Menu
Scaffold new components with stories, tests, and documentation following SOTA patterns and best practices
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use this skill when the user writes/edits components, asks to "fix accessibility issues", "add ARIA labels", "improve accessibility", "check WCAG compliance", "remediate a11y violations", mentions "screen reader support", "keyboard navigation", or wants AI-powered accessibility fixes with one-click application. Automatically analyzes components for a11y issues and suggests context-aware fixes. Trigger on PostToolUse hook or explicit request.
Use this skill when the user asks to "setup CI/CD", "configure GitHub Actions", "deploy Storybook", "setup Chromatic", "add visual regression to CI", "create deployment pipeline", or wants to generate complete CI/CD workflows for Storybook deployment and testing.
Use this skill when the user asks to "generate dark mode", "create dark theme", "add dark mode support", "convert to dark mode colors", "generate dark color palette", or wants to automatically generate dark mode variants for their components with intelligent color inversion and accessibility preservation.
Use this skill when the user uploads a design screenshot, shares a Figma export, provides a mockup image, or asks to "convert design to code", "build from mockup", "generate component from screenshot", "extract design to React", or wants to transform visual designs into production-ready components using Claude's vision capabilities.
Use this skill when the user describes a component in natural language, says "create a component with...", "I need a card that has...", "build a form with fields for...", "generate component from description", or provides detailed component requirements in plain English. Enables non-technical stakeholders to generate production-ready components through natural language descriptions.
Use this skill when the user asks to "analyze performance", "check bundle size", "optimize component", "analyze imports", "reduce bundle", "check for performance issues", or wants to identify and fix performance bottlenecks in their Storybook components with AI-powered suggestions.
| name | component-scaffold |
| description | Scaffold new components with stories, tests, and documentation following SOTA patterns and best practices |
This skill provides comprehensive component scaffolding with:
Templates are located in templates/ directory:
templates/
├── react/
│ ├── button.template.tsx
│ ├── input.template.tsx
│ ├── card.template.tsx
│ ├── modal.template.tsx
│ ├── table.template.tsx
│ └── custom.template.tsx
├── vue/
│ ├── button.template.vue
│ ├── input.template.vue
│ └── ...
├── svelte/
│ ├── button.template.svelte
│ ├── input.template.svelte
│ └── ...
└── styles/
├── button.template.css
├── input.template.css
└── ...
Main script for component generation:
python3 create_component.py \
--name Button \
--type button \
--framework react \
--typescript \
--output src/components/Button.tsx
Arguments:
--name: Component name (PascalCase)--type: Component type (button, input, card, modal, table, custom)--framework: Target framework (react, vue, svelte)--typescript: Generate TypeScript (default: true)--output: Output file path--props: Custom props (comma-separated, for custom type)--variants: Custom variants (comma-separated)Helper to retrieve appropriate template:
from get_component_template import get_template
template = get_template(
component_type='button',
framework='react',
typescript=True
)
python3 create_component.py \
--name MyButton \
--type button \
--framework react \
--output src/components/MyButton.tsx
Generated:
import React from 'react';
import './MyButton.css';
export interface MyButtonProps {
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
loading?: boolean;
onClick?: () => void;
children: React.ReactNode;
}
/**
* MyButton component with multiple variants and sizes
*/
export function MyButton({
variant = 'primary',
size = 'medium',
disabled = false,
loading = false,
onClick,
children,
}: MyButtonProps) {
return (
<button
className={`btn btn-${variant} btn-${size}`}
disabled={disabled || loading}
onClick={onClick}
aria-busy={loading}
>
{loading ? 'Loading...' : children}
</button>
);
}
python3 create_component.py \
--name Dialog \
--type modal \
--framework react \
--output src/components/Dialog.tsx
Generated:
python3 create_component.py \
--name UserCard \
--type custom \
--framework react \
--props "name:string,email:string,avatar:string,onEdit:function" \
--output src/components/UserCard.tsx
After creating a component, automatically generate its story:
# Create component
python3 create_component.py --name Button --type button --output src/components/Button.tsx
# Generate story (using story-generation skill)
python3 ../story-generation/scripts/generate_story.py \
src/components/Button.tsx \
--level full \
--output src/components/Button.stories.tsx
<script setup lang="ts">defineProps<T>()defineEmits for eventsexport lettemplates/{framework}/{type}.template.{ext}create_component.pyTemplates use variable replacement:
{{COMPONENT_NAME}}: Component name (PascalCase){{COMPONENT_CLASS}}: CSS class name (kebab-case){{PROPS}}: Props interface{{PROP_DESTRUCTURING}}: Destructured props with defaults{{COMPONENT_LOGIC}}: Component logic (hooks, computed, etc.){{COMPONENT_CONTENT}}: JSX/template content{{ATTRIBUTES}}: HTML attributes (aria, data, etc.)The script handles common errors:
Potential improvements: