Validation Checklists

Use these checklists to ensure UI consistency across all HRMS development.

Pre-Implementation Checklist

Before writing ANY UI code, verify:

• Read the Design System Overview
• Read the AI Rules
• Check if the component already exists in the prototype
• Verify color usage follows Design Tokens
• Confirm spacing follows standards (p-6 minimum on cards)
• Check dark mode requirements
• Review similar existing components for patterns

Component Implementation Checklist

For EVERY new component:

Structure

• Uses forwardRef pattern (if applicable)
• Has displayName set
• Exports component and variants (if using CVA)
• Uses cn() for className merging

Styling

• Uses CSS variables (not hard-coded colors)
• Follows spacing rules (minimum p-6 for cards)
• Uses correct border radius (rounded-2xl for cards)
• Has proper shadows (shadow-lg for cards)
• Supports dark mode with dark: variants

Variants

• All variants documented
• Default variant specified
• No custom variants without design system update

Accessibility

• Has proper focus states
• Uses semantic HTML
• Includes ARIA labels where needed
• Focus ring uses focus-visible:ring-1 focus-visible:ring-ring

Animations

• Has appropriate hover states
• Uses transition-all for smooth effects
• Stats cards have hover:-translate-y-1
• Buttons have hover:scale-[1.02] active:scale-95

Page Implementation Checklist

For EVERY new page:

Layout

• Uses Layout component wrapper
• Has correct background (bg-background)
• Follows responsive breakpoints
• Mobile-first approach

Components

• Stats cards use gradient pattern
• Content cards use shadow pattern (no borders)
• Buttons use correct variants
• Forms follow form patterns
• Tables follow table patterns

Visual Quality

• Looks like a "shipped product" (not a wireframe)
• Has proper spacing (p-6 minimum on cards)
• Dark mode tested and working
• Mobile view tested
• No plain white cards with gray borders

Data

• Loading states use Skeleton components
• Empty states have proper messaging
• Error states are handled gracefully

Code Review UI Checklist

Automatic Rejection Criteria

REJECT the PR if ANY of these are present:

Approval Criteria

APPROVE if ALL of these are true:

• Follows design system patterns exactly
• Uses CSS variables throughout (bg-card, text-foreground, etc.)
• Dark mode works correctly
• Responsive design implemented
• All components imported from @/components/ui
• Proper hover and focus states on all interactive elements
• Correct spacing and border radius
• Uses Lucide icons from correct package

Stats Card Verification

For every stats card, verify:

• Uses gradient background (not plain white)
• Correct gradient for the metric type:
  • Employees: from-blue-500 to-blue-600
  • On Leave: from-amber-400 to-orange-500
  • Pending: from-violet-500 to-purple-600
  • Open Positions: from-emerald-400 to-green-500
• Has rounded-2xl
• Has p-6
• Has shadow-lg
• Has hover lift: hover:shadow-xl hover:-translate-y-1 duration-300
• Icon container uses bg-white/20 backdrop-blur-sm
• Text is white with text-white/80 for labels

Content Card Verification

For every content card, verify:

• Uses bg-card text-card-foreground
• Has rounded-2xl
• Has p-6
• Has shadow-lg shadow-gray-200/50 dark:shadow-black/40
• Has border-none (no borders)
• Title uses text-lg font-semibold

Button Verification

For every button, verify:

• Uses Button component from @/components/ui/button
• Correct variant for the action type
• Primary buttons have shadow-lg shadow-primary/25
• Has hover scale: hover:scale-[1.02]
• Has active scale: active:scale-95
• Uses rounded-full for pill shape (or rounded-lg for rectangular)

AI Button Verification

For the AI floating button, verify:

• Uses gradient: from-violet-500 via-purple-500 to-fuchsia-500
• Has glow: shadow-xl shadow-violet-500/30
• Has hover glow: hover:shadow-2xl hover:shadow-violet-500/40
• Has hover:scale-105 active:scale-95
• Fixed position: fixed bottom-6 right-6 (or md:bottom-8 md:right-8)
• Uses Sparkles icon from Lucide