Storybook plugins

Extract full design languages from any website URL into Tailwind configs, shadcn/ui CSS vars, Figma variables, React themes, DTCG tokens, and motion/voice specs. Generate WCAG audits, graded report cards, head-to-head battle pages, style remixes, theme recolors, brand guidelines books, and shippable design system bundles.

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.

Enforce Test-Driven Development by auto-detecting test frameworks like Vitest, Jest, Storybook, pytest, or Go tests, installing reporters, configuring JSON output, and using pre-tool hooks to block file writes/edits until tests pass.

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.

Write and configure React Native Storybook stories in CSF for components, set up Storybook in Expo, CLI, or Re.Pack projects with metro.config.js and WebSockets, incrementally upgrade across versions like 5.x to 10.x converting storiesOf to CSF, and connect to local instances to access UI components, stories, and docs.

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.

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.

Automate complete UI/UX design workflows with AI agents and skills enforcing discovery, research, strategy, inclusive accessible design, critique, prototyping, motion design, and handoff specs to engineers. Maintains shared design state, taste profiles, and debt registers for consistent, high-quality outputs across projects.

Automate Storybook setup, story generation in CSF3 format, interactive controls and play functions for testing, configuration of main.ts/preview.ts with Vite addons, documentation via autodocs/MDX, and validation scripts to ensure React stories always build and render correctly with TypeScript support.

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.

Enforce accessibility, quality, and theming standards in gluestack-ui React Native and web projects using validation skills and MCP server. Discover components, retrieve source code, Storybook demos, and metadata; customize themes with NativeWind and dark mode support.

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

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.

Set up Vizzly CLI for visual regression testing in JS projects like Next.js and Astro, analyze failures by viewing baseline/current screenshots and pixel diffs with cause suggestions like layout shifts, check test status from report-data.json with pass/fail counts and TDD links, suggest screenshot opportunities in Playwright/Cypress/Jest tests with line numbers and names.

Convert Figma, Sketch, or Penpot designs to production-ready UI code for React with Tailwind/CSS modules, SwiftUI, Flutter widgets; extract and sync design tokens across formats; compare design-code drift; optimize/export assets for web/mobile; audit WCAG accessibility.

Convert Figma, Sketch, or Penpot designs to production UI code in React with TypeScript/Tailwind/CSS, SwiftUI, Flutter, or HTML/Tailwind. Extract and sync design tokens across formats, generate components with tests/Stories, optimize/export assets for web/mobile, audit WCAG accessibility, and detect design-code drift.