Component Designer Skill
Instructions
- Analyze component requirements from task
- Design component structure and appearance
- Define all component states (default, hover, active, disabled, focus, error)
- Specify component variations (sizes, styles, types)
- Consider accessibility requirements
- Define responsive behavior
- 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
Component Types
- Buttons: Primary, secondary, icon buttons
- Inputs: Text, email, password, textarea, select
- Cards: Content cards, product cards, feature cards
- Modals: Dialogs, popups, confirmations
- Navigation: Menus, breadcrumbs, pagination
- Forms: Form layouts, field groups, validation
- Lists: Ordered, unordered, definition lists
- Tables: Data tables, comparison tables
- Alerts: Success, error, warning, info messages
- Badges: Status badges, notification badges
- Tooltips: Hover tooltips, popover tooltips
Component States
- Default: Initial appearance
- Hover: Mouse over state
- Active: Click/press state
- Focus: Keyboard focus state
- Disabled: Non-interactive state
- Loading: Loading/processing state
- Error: Error state
- Success: Success state
- Selected: Selected/checked state
Accessibility Requirements
- Touch Targets: Minimum 44x44px for mobile
- Color Contrast: WCAG AA minimum (4.5:1)
- Keyboard Navigation: All interactive elements keyboard accessible
- Focus Indicators: Visible focus states
- ARIA Labels: Proper ARIA attributes
- Semantic HTML: Use appropriate HTML elements
1---2name: component-designer3description: Designs reusable UI components including buttons, inputs, cards, modals, and other interface elements. Specifies states, variations, and usage guidelines. Considers accessibility and responsive behavior.4---5
6# Component Designer Skill
7
8## Instructions
9
101. Analyze component requirements from task
112. Design component structure and appearance
123. Define all component states (default, hover, active, disabled, focus, error)
134. Specify component variations (sizes, styles, types)
145. Consider accessibility requirements
156. Define responsive behavior
167. Return structured component specifications with:
17 - Component description
18 - Visual specifications (colors, sizes, spacing)
19 - State variations
20 - Usage guidelines
21 - Accessibility requirements
22 - Responsive behavior
23
24## Examples
25
26**Input:** "Design a button component"
27**Output:**
28```markdown
29### Component: Button
30
31**Variations:**
32- Primary Button
33- Secondary Button
34- Tertiary Button
35- Danger Button
36
37**Sizes:**
38- Small: padding 8px 16px, font 14px
39- Medium: padding 12px 24px, font 16px (default)
40- Large: padding 16px 32px, font 18px
41
42**Primary Button States:**
43- Default: Background #007bff, Text #ffffff, Border none
44- Hover: Background #0056b3, Transform scale(1.02)
45- Active: Background #004085
46- Focus: Outline 2px solid #007bff, Outline offset 2px
47- Disabled: Background #6c757d, Opacity 0.6, Cursor not-allowed
48
49**Accessibility:**
50- Minimum touch target: 44x44px
51- Color contrast: 4.5:1 (WCAG AA)
52- Keyboard accessible
53- Focus indicator visible
54- ARIA labels when needed
55
56**Responsive:**
57- Mobile: Full width on screens < 480px
58- Tablet+: Auto width with min-width 120px
59```
60
61## Component Types
62
63- **Buttons**: Primary, secondary, icon buttons
64- **Inputs**: Text, email, password, textarea, select
65- **Cards**: Content cards, product cards, feature cards
66- **Modals**: Dialogs, popups, confirmations
67- **Navigation**: Menus, breadcrumbs, pagination
68- **Forms**: Form layouts, field groups, validation
69- **Lists**: Ordered, unordered, definition lists
70- **Tables**: Data tables, comparison tables
71- **Alerts**: Success, error, warning, info messages
72- **Badges**: Status badges, notification badges
73- **Tooltips**: Hover tooltips, popover tooltips
74
75## Component States
76
77- **Default**: Initial appearance
78- **Hover**: Mouse over state
79- **Active**: Click/press state
80- **Focus**: Keyboard focus state
81- **Disabled**: Non-interactive state
82- **Loading**: Loading/processing state
83- **Error**: Error state
84- **Success**: Success state
85- **Selected**: Selected/checked state
86
87## Accessibility Requirements
88
89- **Touch Targets**: Minimum 44x44px for mobile
90- **Color Contrast**: WCAG AA minimum (4.5:1)
91- **Keyboard Navigation**: All interactive elements keyboard accessible
92- **Focus Indicators**: Visible focus states
93- **ARIA Labels**: Proper ARIA attributes
94- **Semantic HTML**: Use appropriate HTML elements
majiayu000