Agent skill · software engineering · erichowens
component-template-generator
Generates starter component code using design tokens. Creates React/Vue/Svelte components with proper token usage, variants, and accessibility built in.
Why this skill is useful
Generates React/Vue/Svelte component templates with design token integration and accessibility features that the AI wouldn't reliably create on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Component Template Generator Create production-ready component code that properly uses your design tokens. Generates React, Vue, or Svelte components with variants, accessibility, and token integration. Quick Start Minimal example - generate a Button component: Key principle: Components use semantic token names, not hardcoded values. Core Mission Generate component templates that: 1. Use design tokens correctly (semantic names, not hex values) 2. Include common variants (size, color, state) 3. Have accessibility built in (ARIA, keyboard, focus) 4. Are framework-idiomatic (React hooks, Vue composition, Svelte stores) When to Use ✅ Use when: Starting a component library with generated tokens Need consistent token usage across components Want accessibility baked into templates Bootstrapping a design system implementation ❌ Do NOT use when: Need tokens only (use design-system-generator) Need complete UI library (use shadcn/ui or similar) Customizing existing components (just edit them) Component Catalog Core Components Component Variants Accessibility ----------- ---------- --------------- Button primary, secondary, ghost, destructive ✅ Focus ring, disabled state Input default, error, disabled ✅ Label association, error announcement Card default, interactive, highlighted ✅ Semantic article/section Badge default, success, warning, error ✅ Status announcements Layout Components Component Variants Features ----------- ---------- ---------- Container default, narrow, wide Max-width + padding Stack vertical, horizontal Gap using spacing tokens Grid 2-col, 3-col, 4-col, auto Responsive breakpoints Interactive Components Component Variants Accessibility ----------- ---------- --------------- Dialog default, alert ✅ Focus trap, escape close Dropdown default ✅ Keyboard navigation Tabs default ✅ Arrow key navigation Toggle default ✅ Switch role Template Structure Each component template includes: Framework Templates React + Tailwind React + CSS Variables Vue 3 + Composition API S …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/component-template-generator