Scaffold new components with stories, tests, and documentation following SOTA patterns and best practices
/plugin marketplace add flight505/storybook-assistant-plugin/plugin install flight505-storybook-assistant@flight505/storybook-assistant-pluginThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdscripts/create_component.pytemplates/react/button.templatetemplates/react/card.templatetemplates/react/custom.templatetemplates/react/input.templatetemplates/react/modal.templatetemplates/react/table.templateThis 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: