Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From storybook-assistant
Scaffold new components with stories, tests, and documentation following SOTA patterns and best practices
npx claudepluginhub flight505/storybook-assistantHow this skill is triggered — by the user, by Claude, or both
Slash command
/storybook-assistant:component-scaffoldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides comprehensive component scaffolding with:
Scaffolds production-ready React and React Native components with TypeScript types, tests, styles, accessibility, Storybook stories, and documentation.
Generates React/Vue components with TypeScript, tests, and CSS modules. Detects framework from package.json, checks project knowledge graph for existing patterns, and creates production-ready scaffolding.
Builds production-ready frontend components with accessible markup, sensible props, and defined states. Use when creating, refactoring, or designing component APIs.
Share bugs, ideas, or general feedback.
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: