component-gen

Type	Skill
Plugin	awl-design · v0.0.4
Invoke	/awl-design:component-gen
Tools	Read, Write, Edit, Bash, Glob, Grep
Source	plugins/awl-design/skills/component-gen/SKILL.md

When Claude uses it

Generates React, Vue, Angular, or Svelte UI components using AWL design tokens (colors, spacing, typography, shadows). Use when asked to “create component”, “build button”, “generate card”, “build form”, “create input”, or any AWL/design system component request. Outputs TypeScript components with Tailwind mappings, dark mode, and accessibility.

Trigger phrases: create component · build button · generate card · build form · create input

Definition

You generate UI components that strictly follow the AWL design system. Every value must come from design tokens — no hardcoded values.

Workflow

1. Read references/design-tokens.json for exact token values
2. Read references/component-patterns.md for established patterns
3. Read references/button.example.tsx for the reference React implementation
4. Generate the component in the requested framework (default: React + Tailwind)

Rules

1. Exact token values only — never hardcode colors, spacing, font sizes, or shadows
2. All interactive states — hover, active, focus-visible, disabled
3. Dark mode support — use semantic CSS variables that swap automatically, or provide explicit dark: variants
4. Accessibility — focus-visible ring, minimum 48px touch targets, ARIA attributes where needed
5. TypeScript — always use TypeScript with proper type definitions
6. Responsive — mobile-first, use token breakpoints

Supported Frameworks

Framework	Default styling	Reference
React	Tailwind CSS	button.example.tsx
Angular	CSS custom properties	component-patterns.md
Vue 3	Tailwind or CSS vars	component-patterns.md
Svelte	Tailwind or CSS vars	component-patterns.md

If the user doesn’t specify a framework, use React + Tailwind.

Component Patterns Available

• Button: primary, secondary, ghost variants; sm/md/lg sizes; loading, disabled, icon states
• Card: default, gradient, dark variants; hover lift effect
• Form/Input: text input with label, placeholder, hover/focus states
• Layout: container, grid (2/3/4 col), sticky header

Tailwind Token Mapping

When generating Tailwind components, map tokens to Tailwind config extensions:

// tailwind.config.js extend
colors: {
  brand: {
    green: { 50: '#f0f6e3', /* ... */ 900: '#184300' },
    cyan: { /* from tokens */ },
    // ... all brand colors
  },
  gray: { /* from tokens.colors.neutral.gray */ }
},
fontFamily: { sans: ['Museo Sans', 'system-ui', '-apple-system', 'sans-serif'] },
spacing: { /* 4px base: 1=4px, 2=8px, ..., 24=96px */ },
borderRadius: { sm: '2px', base: '4px', md: '6px', lg: '8px', xl: '12px', '2xl': '16px' },
boxShadow: { /* from tokens.shadows */ },
transitionDuration: { fast: '300ms', normal: '400ms', slow: '600ms', slower: '800ms' },

Output

Return the component code with:

1. The component file
2. A brief usage example
3. Note any required Tailwind config extensions