Storybook plugins

Extract any website's complete design language — colors, typography, spacing, shadows, motion, and voice — and output DTCG tokens, Tailwind/shadcn/Figma variables, CSS, and a visual preview. Grade consistency, battle two sites, remix in six design vocabularies, recolor via OKLCH, generate brand guidelines, and rebuild pages for pixel-diff fidelity checks.

Detect UI visual regressions by capturing screenshots of components or pages with Playwright or Cypress, comparing against baselines across responsive breakpoints, generating pixel diffs, analyzing changes, and producing markdown reports with recommendations. Integrates with Percy, Chromatic, BackstopJS, and CI workflows.

Create and manage snapshot tests for UI components and data using Jest, Vitest, or pytest to catch regressions. Analyze test failures with intelligent diff reviews, selectively update snapshots for intentional changes, validate and organize snapshot files, then generate detailed analysis reports.

Enforces Test-Driven Development by detecting the test framework, installing a reporter, and outputting test results. Blocks file writes with forbidden terms and enforces semantic rules via bash guards and LLM prompt checks.

Manage React Native Storybook stories using Component Story Format (CSF) — set up Storybook v10 in Expo, CLI, or Re.Pack projects, upgrade across major versions, and connect to a local Storybook instance for accessing UI components and documentation in Claude Code.

Build scalable design systems by generating tokens, component specifications, documentation templates, naming conventions, icon systems, and pattern libraries. Audit for WCAG accessibility, consistency, token coverage, and theming support using dedicated skills and commands.

Accelerate website creation and optimization with 103 structured skills spanning research, brand strategy, design, content, SEO, analytics, performance, security, and deployment—each providing expert-level prompts for tasks like auditing accessibility, fixing Core Web Vitals, conducting competitive analysis, running experiments, and managing incident response.

Delegate brand guideline creation to generate style guides, component libraries, color palettes, and usage docs, ensuring visual consistency and cohesive experiences across app platforms with Figma and Storybook.

Establish and maintain brand guidelines for apps by generating style guides, component libraries, color palettes, and usage docs to ensure visual consistency across platforms and manage assets with Figma and Storybook integration.

Delegate brand management to generate style guides, component libraries, color palettes, and usage docs ensuring visual consistency across app platforms. Maintain brand assets and evolve identity while accelerating development workflows.

Enforce an inclusive design workflow from discovery through handoff: research, strategy, critique, accessibility audits, usability testing, and design-debt tracking, all managed by specialized agents and skills that produce accessible, production-ready UI specs and prototypes.

Manage the full Storybook workflow from Claude: initialize Storybook in a project, write and review component stories with a strict workflow, preview components in a running dev server, and upgrade Storybook across major versions.

Generate complete design systems with CSS tokens for typography, colors, spacing, and elevation; React components like buttons; Markdown documentation; and governance rules to build consistent component libraries and enforce UI standards across teams.

Audit design system tokens, components, and Figma files for compliance, drift, accessibility, and health; generate CI/CD pipelines, codemods for migrations, governance rules, onboarding docs, release notes, benchmarks, and interactive reports to enforce consistency across design and code.

Audit and fix code quality, security, accessibility, and performance issues across frontend and backend codebases. Generate typed React components, tests, Storybook stories, API endpoints, database migrations, and CI/CD configs. Manage git workflows, create documentation, and orchestrate multi-agent development tasks.

Validates and enforces quality for Storybook projects by configuring stories with TypeScript-safe args, autodocs, MDX documentation, play-function interaction tests, and project setup with addons and React-Vite frameworks.

Enforce accessible, consistent gluestack-ui component patterns across React Native and web projects with validation, theming, and an MCP server for component discovery and source retrieval.

Orchestrate multi-agent workflows with guardrails for systematic software engineering: design architectures, enforce quality via adversarial reviews, audit security/compliance, generate docs/diagrams/tests, track work across sessions, and accrue persistent knowledge in markdown artifacts.

Build and manage a production-ready frontend design system with 263+ design styles, multi-tenant Keycloak theming, token generation, component scaffolding, accessibility auditing, and style conversion

Build scalable design systems by generating design tokens, UI component specifications, documentation templates, icon systems, naming conventions, pattern libraries, and token-based theming supporting light/dark modes. Audit code for WCAG 2.2 accessibility compliance with remediation steps and evaluate full systems for consistency, completeness, token coverage, and issues.

Orchestrate a spec-to-ship pipeline across 58 skills — scaffold projects, generate backend/frontend code with OpenAPI contracts, run TDD cycles, audit quality/security, and deploy via CI/CD. Includes multi-agent collaboration for PM, dev, QA, and DevOps roles with human approval gates and continuous learning via LEARN.md.

Automate Svelte 5 workflows by enforcing code style rules on edits, generating structured JSDoc component docs, wiring Storybook stories as Vitest browser tests with MSW support, previewing stories via Playwright, and creating or fixing unit, SSR, and E2E tests.