storybook-assistant

Plugin storybook-assistant in flight505/storybook-assistant. Commands read from the repo's manifest — 1 month ago.

Skills (18)

• accessibility-remediation

  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

• ci-cd-generator

  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.

• component-scaffold

  Scaffold new components with stories, tests, and documentation following SOTA patterns and best practices

• Component 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.

• dark-mode-generation

  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 preserv

• design-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 u

• Bidirectional Design Token Sync

  Use this skill when users mention "sync design tokens", "Figma to code", "design system sync", "token drift", "keep tokens in sync", or want to synchronize design tokens between Figma and codebase bidirectionally with automatic drift detection and conflict resolution.

• natural-language-generation

  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 stakeh

• performance-analysis

  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.

• platform-support

  Use this skill when the user asks about "Storybook with Tauri", "Storybook with Electron", "desktop app components", "Tauri IPC mocking", "Electron limitations", mentions "cross-platform development", "native APIs in Storybook", or wants to develop Storybook stories for Tauri or Electron application

• Plugin 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 "storybo

• server-components

  Use this skill when the user asks to "create server component", "add React Server Component", "use async component", "setup Next.js 15", "use React 19", "implement PPR", "add Server Actions", mentions "use server", "use client", "Suspense boundaries", or wants to build modern server-rendered compone

• story-generation

  Use this skill when the user asks to "generate stories for components", "parse component props", "detect component variants", "analyze components", "create stories automatically", mentions "component parser", "story automation", or wants to generate Storybook stories from existing component files. T

• storybook-config

  Generate and configure Storybook 10 for any framework with automatic detection, SOTA best practices, and platform-specific optimizations (Web, Tauri, Electron)

• style-guide-generator

  Use this skill when the user asks to "generate a style guide", "create design system documentation", "document design tokens", "create a design system", "document colors and typography", mentions "design tokens", "component library documentation", or wants to create comprehensive design system docum

• testing-suite

  Use this skill when the user asks to "set up testing", "configure tests for Storybook", "add interaction tests", "add accessibility tests", "set up a11y testing", "configure Vitest", "configure Playwright", mentions "play functions", "test-storybook", "component testing", or wants to add comprehensi

• 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.

• AI-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 a

Slash commands (11)

• /storybook-assistant:analyze-usage

  Analyze component usage across the codebase with deprecation planning and migration impact analysis

• /storybook-assistant:create-component

  Scaffold a new component with story, tests, and optional visual mockup following SOTA patterns

• /storybook-assistant:design-to-code

  Transform design screenshots and mockups into pixel-perfect React components using Claude's vision AI

• /storybook-assistant:fix-accessibility

  Analyze and fix accessibility issues with AI-powered suggestions

• /storybook-assistant:generate-dark-mode

  Generate dark mode color schemes with intelligent color inversion

• /storybook-assistant:generate-from-description

  Generate production-ready components from natural language descriptions

• /storybook-assistant:generate-stories

  Generate story files for existing components with interaction tests, accessibility checks, and multiple variants

• /storybook-assistant:setup-ci-cd

  Generate production-ready CI/CD pipelines for Storybook

• /storybook-assistant:setup-storybook

  Initialize Storybook 10 in your project with automatic framework detection, SOTA configuration, and optional visual generation

• /storybook-assistant:setup-visual-testing

  Set up AI-powered visual regression testing for Storybook with intelligent diff analysis and auto-approval rules

• /storybook-assistant:sync-design-tokens

  Synchronize design tokens bidirectionally between Figma and code with automatic drift detection and conflict resolution

Subagents (3)

• accessibility-auditor

  Autonomous agent that analyzes components for WCAG 2.2 accessibility violations and suggests context-aware fixes with one-click application

• component-generator

  Autonomous agent that generates production-ready components from natural language descriptions with TypeScript, stories, tests, and accessibility built-in

• visual-regression-analyzer

  Autonomous agent that analyzes visual diff screenshots using AI to categorize changes as expected design updates, warnings, or errors. Understands context from git history, design tokens, and component evolution to reduce false positives and catch real bugs.

Hooks (1)

• SessionStart

  bash ${CLAUDE_PLUGIN_ROOT}/scripts/check-environment.sh

Similar plugins