component-scaffold
Component Scaffold Skill
This skill provides comprehensive component scaffolding with:
- Framework-specific component templates (React, Vue, Svelte)
- TypeScript interfaces with proper types
- Accessibility attributes (ARIA labels, roles)
- Storybook stories with variants and tests
- Optional visual mockups
- Best practice patterns for each framework
Features
Component Generation
- Type-Based Templates: Pre-built templates for common component types (Button, Input, Card, Modal, Table, etc.)
- Custom Components: Generate components with user-defined props
- Framework Support: React, Vue 3, Svelte 5
- TypeScript First: All components generated with proper TypeScript types
- Accessibility: Built-in ARIA attributes and semantic HTML
More from flight505/storybook-assistant
visual-design
Generate style guides, component mockups, and visual assets using AI (Gemini 3 Pro Image, FLUX.2 Pro). Optional feature - gracefully skips if OPENROUTER_API_KEY unavailable.
7plugin guide & help
Use this skill when users ask specifically about the Storybook Assistant plugin - "what can the storybook assistant do", "storybook plugin features", "storybook assistant commands", "help with storybook assistant", "storybook plugin capabilities". ONLY triggers when user explicitly mentions "storybook assistant", "storybook plugin", or asks about Storybook-specific features. Does NOT trigger on generic help questions.
7ai-powered visual regression testing
Use this skill when users mention "visual regression", "detect UI changes", "screenshot comparison", "visual testing", "pixel diff", "UI regression", or want to set up intelligent visual testing that understands intentional vs accidental changes. Analyzes visual diffs with AI to categorize changes as expected, warnings, or errors based on git history and design tokens.
7component usage analytics
Use this skill when users mention "component usage", "where is this component used", "deprecate component", "migration impact", "component analytics", or want to track and analyze component usage across the codebase with deprecation planning and migration impact analysis.
7storybook-config
Generate and configure Storybook 10 for any framework with automatic detection, SOTA best practices, and platform-specific optimizations (Web, Tauri, Electron)
5design-to-code
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.
5