Component Templates Skill
Instructions
Identify Component Type:
- Button, Input, Form, Card, Modal, Dropdown, etc.
- Determine complexity (simple, complex, composite)
- Check for existing similar components
Select Template:
- Match component type to template library
- Choose variant (primary, secondary, outlined, etc.)
- Adapt to detected framework (React, Vue, Svelte)
Generate Component:
- Load base template
- Add props/properties for customization
- Include accessibility features (ARIA labels, roles)
- Add responsive design patterns
- Include styling (CSS modules, Tailwind, styled-components)
Add Variations:
- Size variants (sm, md, lg, xl)
- Color variants (primary, secondary, success, danger)
- State variants (disabled, loading, error)
Component Library
Basic Components
- Button (primary, secondary, outlined, ghost, link)
- Input (text, email, password, number, search)
- Textarea
- Checkbox, Radio, Switch
- Select, Dropdown
- Label, Badge, Tag
Form Components
- Form wrapper
- FormField (label + input + error)
- FormGroup (multiple fields)
- Validation displays
Layout Components
- Container, Grid, Flex
- Card, Panel
- Header, Footer, Sidebar
- Navigation, Breadcrumbs
Feedback Components
- Alert, Toast, Notification
- Modal, Dialog
- Tooltip, Popover
- Loading spinner, Skeleton
Data Display
- Table, List
- Pagination
- Tabs, Accordion
- Progress bar
Examples
Example 1: Button Component (React + TypeScript)
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'outline'
size?: 'sm' | 'md' | 'lg'
disabled?: boolean
loading?: boolean
onClick?: () => void
children: React.ReactNode
}
export const Button: React.FC<ButtonProps> = ({
variant = 'primary',
size = 'md',
...props
}) => { /* implementation */ }
Example 2: Input Component (Vue)
<template>
<div class="input-wrapper">
<label :for="id">{{ label }}</label>
<input
:id="id"
:type="type"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>
Best Practices
- Accessibility first - Include ARIA labels, keyboard navigation
- Responsive design - Mobile-first, breakpoint support
- Type safety - TypeScript props, prop validation
- Composability - Build complex from simple components
- Theming support - CSS variables, theme context
- Documentation - Storybook stories, usage examples
Purpose: Reusable UI component templates
Used by: frontend-generator agent, /component command
1---2name: component-templates3description: UI component library templates (buttons, forms, cards, modals, etc.). Use when generating frontend UI components.4---5
6# Component Templates Skill
7
8## Instructions
9
101. **Identify Component Type**:
11 - Button, Input, Form, Card, Modal, Dropdown, etc.
12 - Determine complexity (simple, complex, composite)
13 - Check for existing similar components
14
152. **Select Template**:
16 - Match component type to template library
17 - Choose variant (primary, secondary, outlined, etc.)
18 - Adapt to detected framework (React, Vue, Svelte)
19
203. **Generate Component**:
21 - Load base template
22 - Add props/properties for customization
23 - Include accessibility features (ARIA labels, roles)
24 - Add responsive design patterns
25 - Include styling (CSS modules, Tailwind, styled-components)
26
274. **Add Variations**:
28 - Size variants (sm, md, lg, xl)
29 - Color variants (primary, secondary, success, danger)
30 - State variants (disabled, loading, error)
31
32## Component Library
33
34### Basic Components
35- Button (primary, secondary, outlined, ghost, link)
36- Input (text, email, password, number, search)
37- Textarea
38- Checkbox, Radio, Switch
39- Select, Dropdown
40- Label, Badge, Tag
41
42### Form Components
43- Form wrapper
44- FormField (label + input + error)
45- FormGroup (multiple fields)
46- Validation displays
47
48### Layout Components
49- Container, Grid, Flex
50- Card, Panel
51- Header, Footer, Sidebar
52- Navigation, Breadcrumbs
53
54### Feedback Components
55- Alert, Toast, Notification
56- Modal, Dialog
57- Tooltip, Popover
58- Loading spinner, Skeleton
59
60### Data Display
61- Table, List
62- Pagination
63- Tabs, Accordion
64- Progress bar
65
66## Examples
67
68**Example 1: Button Component (React + TypeScript)**
69```typescript
70interface ButtonProps {
71 variant?: 'primary' | 'secondary' | 'outline'
72 size?: 'sm' | 'md' | 'lg'
73 disabled?: boolean
74 loading?: boolean
75 onClick?: () => void
76 children: React.ReactNode
77}
78
79export const Button: React.FC<ButtonProps> = ({
80 variant = 'primary',
81 size = 'md',
82 ...props
83}) => { /* implementation */ }
84```
85
86**Example 2: Input Component (Vue)**
87```vue
88<template>
89 <div class="input-wrapper">
90 <label :for="id">{{ label }}</label>
91 <input
92 :id="id"
93 :type="type"
94 :value="modelValue"
95 @input="$emit('update:modelValue', $event.target.value)"
96 />
97 </div>
98</template>
99```
100
101## Best Practices
102
103- **Accessibility first** - Include ARIA labels, keyboard navigation
104- **Responsive design** - Mobile-first, breakpoint support
105- **Type safety** - TypeScript props, prop validation
106- **Composability** - Build complex from simple components
107- **Theming support** - CSS variables, theme context
108- **Documentation** - Storybook stories, usage examples
109
110---
111
112**Purpose**: Reusable UI component templates
113**Used by**: frontend-generator agent, /component command
majiayu000