Storybook plugins

Extract a complete design language from any website — DTCG tokens, Tailwind/shadcn/Figma vars, motion, voice — then grade consistency, generate brand guidelines, remix in six styles, pair two sites, recolor via OKLCH, rebuild and pixel-diff for fidelity scoring, and bundle a downloadable design system

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 your test framework (Vitest, Jest, Storybook, pytest, Go), installing the matching reporter, and blocking direct file edits to redirect reads through a custom pipeline that runs on session start and each user prompt.

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.

Enforces an inclusive design workflow for AI coding agents: discovery, strategy, critique, accessibility auditing, and handoff. Automates design reviews, usability testing, accessibility compliance (WCAG), design system token management, and UX copywriting, producing structured specs and reports in Markdown.

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.

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.

Enforces structured software development workflows with guardrails, quality gates, and knowledge accrual. Orchestrates multi-agent reviews, generates documentation (Diataxis, ADRs, OpenAPI specs), manages work items, and runs security/penetration testing engagements.

Automates code review, testing, and development workflows with agentic skills that analyze PRs, run TDD cycles, diagnose CI failures, orchestrate bug fixes, and generate documentation—all with confidence-gated, evidence-backed outputs.

Generate production-ready React/TypeScript UIs with a 263+ design style library, atomic design components, and multi-tenant Keycloak theming. Includes accessibility auditing, design token generation, and style conversion between CSS, Tailwind, and styled-components.

Manage the full product development lifecycle: run structured discovery sessions, create PRDs and FRDs, decompose into parallel tasks, orchestrate multi-agent execution with git worktrees, generate QA test procedures with Playwright screenshots, and maintain design systems.

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.

Automates the full spec-to-ship pipeline: generates backend APIs (OpenAPI), frontend components (React/Next.js), BDD tests, production-ready code, CI/CD, and documentation, with integrated security audits, design system checks, and a LEARN.md continuous improvement loop.

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.