Component Kickstart
Describe a component, get production-ready accessible HTML/CSS/JS back
Contact forms, nav menus, card layouts, hero sections, pricing tables — designers rebuild these from scratch every project. This recipe generates production-ready, accessible components with your project's design tokens already applied.
PROMPT
Create a skill called "Component Kickstart". When I describe a UI component (or share a screenshot/mockup), generate a complete, production-ready implementation. Use semantic HTML5, proper ARIA attributes for accessibility, and CSS structured with my design tokens if provided (CSS custom properties or Tailwind classes). Include all interaction states (hover, focus with visible focus ring, active, disabled, loading, error, success) and keyboard navigation (proper tab order, key bindings per WAI-ARIA patterns). Make it responsive by default (mobile-first). Let me choose the output framework: vanilla HTML/CSS, React (functional component with hooks), Vue (composition API), Svelte, or Astro. The output should be ready to use in a project, not a skeleton — include actual styling, transitions, and interaction behavior.
How It Works
Describe the component you need (or share a screenshot), optionally
provide your project's design tokens, and your Claw generates clean,
semantic, accessible HTML/CSS with the tokens applied. Includes all
interaction states and keyboard navigation.
What You Get
- Semantic HTML5 with proper ARIA attributes
- CSS using your design tokens (or sensible defaults)
- All interaction states: hover, focus, active, disabled, loading, error
- Keyboard navigation (tab order, enter/space/escape behavior)
- Responsive by default (mobile-first)
- Output in your framework: vanilla HTML/CSS, React, Vue, Svelte, or Astro
- Ready-to-use — not a starting point, a finished component
Setup Steps
- Describe the component: "Contact form with name, email, phone, message, and file upload"
- Optionally provide your design tokens (CSS variables or Tailwind config)
- Choose your framework (default: vanilla HTML/CSS)
- Your Claw generates the complete component
- Drop it into your project
Tips
- Providing design tokens means the component matches your project immediately
- Without tokens, it uses clean, unstyled defaults you can easily customize
- The ARIA attributes and keyboard navigation make every component accessible out of the box
- Works great as a starting point even if you customize heavily after
- Over time, your Claw builds a personal component library from your past requests