Component Designer

Component Designer Skill

Instructions

1. Analyze component requirements from task
2. Design component structure and appearance
3. Define all component states (default, hover, active, disabled, focus, error)
4. Specify component variations (sizes, styles, types)
5. Consider accessibility requirements
6. Define responsive behavior
7. Return structured component specifications with:
   • Component description
   • Visual specifications (colors, sizes, spacing)
   • State variations
   • Usage guidelines
   • Accessibility requirements
   • Responsive behavior

Examples

Input: "Design a button component" Output:

### Component: Button

**Variations:**
- Primary Button
- Secondary Button
- Tertiary Button
- Danger Button

**Sizes:**
- Small: padding 8px 16px, font 14px
- Medium: padding 12px 24px, font 16px (default)
- Large: padding 16px 32px, font 18px

**Primary Button States:**
- Default: Background #007bff, Text #ffffff, Border none
- Hover: Background #0056b3, Transform scale(1.02)
- Active: Background #004085
- Focus: Outline 2px solid #007bff, Outline offset 2px
- Disabled: Background #6c757d, Opacity 0.6, Cursor not-allowed

**Accessibility:**
- Minimum touch target: 44x44px
- Color contrast: 4.5:1 (WCAG AA)
- Keyboard accessible
- Focus indicator visible
- ARIA labels when needed

**Responsive:**
- Mobile: Full width on screens < 480px
- Tablet+: Auto width with min-width 120px