---

name: component-validator description: Validates components after implementation - TypeScript, Design Tokens, Responsive, Accessibility, Animation Performance. Use proactively after each section implementation.

Component Validator

This skill provides checkpoint validation after implementing each component or section, catching issues early before they accumulate.

When to Use This Skill

• After implementing each section (mandatory checkpoint)
• After significant component changes
• Before moving to the next page
• When debugging quality issues
• Before final verification

Validation Checklist

1. TypeScript Validation

Copy# Run type check
npx tsc --noEmit

# Expected: 0 errors

Common Issues:

2. Design Token Usage

Check that components use design tokens, NOT hardcoded values:

❌ Bad:

Copy<div className="bg-blue-500 text-white rounded-lg">

✅ Good:

Copy<div className="bg-primary text-primary-foreground rounded-radius">

Token Categories to Check:

3. Responsive Validation

Test at 3 breakpoints:

Responsive Checklist:

• No horizontal overflow at any breakpoint
• Text readable at all sizes (min 16px body)
• Touch targets minimum 44x44px on mobile
• Grid columns collapse properly
• Images responsive with sizes attribute

4. Accessibility Validation

Must Pass:

Quick Check:

Copy# Browser DevTools
# - Run Lighthouse Accessibility audit
# - Check with axe-core extension

5. Animation Performance

Performance Budget:

Optimizations:

Copy// ✅ Good: GPU-accelerated properties
transform: translateY(20px)
opacity: 0

// ❌ Bad: Causes layout shifts
margin-top: 20px
height: 0

Framer Motion Best Practices:

Copy// Use layout animations sparingly
<motion.div layout /> // Can be expensive

// Prefer transform-based animations
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
/>

// Use viewport detection
<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true, margin: "-100px" }}
/>

6. Design Quality Validation (KRITISCH)

This is the most important validation! A technically correct but visually generic section FAILS.

6.1 Background Check

6.2 Typography Hierarchy Check

Minimum Typography Scale:

CopySection Headlines: text-4xl md:text-5xl lg:text-6xl (minimum)
Card Headlines: text-xl (minimum)
Body Text: text-base md:text-lg

6.3 Spacing Check

6.4 Visual Elements Check

Count distinctive visual elements (need 3+ per section):

6.5 Banned Pattern Check

Automatic FAIL if any of these are detected:

6.6 Inspiration Alignment Check

7. SEO Validation (Per Section)

Validation Output Format

After validation, report:

Copy## Validation Report: {SectionName}

### Technical Checks
| Check | Status | Issues |
|-------|--------|--------|
| TypeScript | ✓ | 0 errors |
| Design Tokens | ✓ | Using tokens |
| Responsive | ✓ | All breakpoints |
| Accessibility | ⚠️ | Missing alt on 1 image |
| Animation | ✓ | 60fps, GPU-accelerated |
| SEO | ✓ | H2 with keyword |

### Design Quality Checks (KRITISCH)
| Check | Status | Details |
|-------|--------|---------|
| Background | ✓ | Gradient mesh with blur shapes |
| Typography | ✓ | Fraunces display, text-6xl headline |
| Spacing | ✓ | py-32, generous whitespace |
| Visual Elements | ✓ | 4 distinctive elements found |
| Banned Patterns | ✓ | None detected |
| Inspiration Ref | ✓ | Matches bild1.png (Armonia) |

### Design Excellence Score
| Category | Score |
|----------|-------|
| Inspiration Alignment | 9/10 |
| Typography Distinction | 8/10 |
| Color Intentionality | 9/10 |
| Spatial Composition | 8/10 |
| Visual Details | 8/10 |
| Animation Strategy | 7/10 |
| Anti-Generic Check | 9/10 |
| **TOTAL** | **8.3/10** |

### 3 Distinctive Elements:
1. Warm cream background (#F2F0E9)
2. Asymmetric grid layout (1fr, 1.5fr)
3. Dramatic 7xl serif headline with blur glow image treatment

### Issues Found:
1. [A11Y] Image missing alt text at line 45

### Recommendations:
- Add descriptive alt text to hero image

### Status: ✓ PASS (Score: 8.3/10, Minimum: 7)

IMPORTANT: If Design Excellence Score < 7, the section FAILS regardless of technical checks!

Status Levels

Automated Checks

TypeScript

Copynpx tsc --noEmit

ESLint

Copynpx eslint . --ext .ts,.tsx

Accessibility (via Playwright)

Copyimport { injectAxe, checkA11y } from 'axe-playwright'

test('accessibility', async ({ page }) => {
  await page.goto('/')
  await injectAxe(page)
  await checkA11y(page)
})

Lighthouse

Copynpx lighthouse http://localhost:3000 --only-categories=accessibility,performance

Integration with Workflow

This skill is used:

1. After /implement creates each section
2. Before moving to next page
3. During /verify final check

Checkpoint Flow:

CopyImplement Section → Validate → Pass? → Next Section
                              ↓ Fail
                        Fix Issues → Re-validate