Storybook — визуальное тестирование дизайн-системы

★ 7.5 · design

storybook is a Claude Code skill that synchronizes a Storybook-based design system with the claude.ai/design agent by compiling stories into previews and verifying their visual fidelity against a reference render using Playwright and Chromium. The skill bundles the package's compiled `dist/` into `_ds_bundle.js` — the exact artifact the design agent builds with — and compiles each story source module in full, including hooks, fixtures, and local helpers, resolving all component imports via `lib/story-imports.mjs`. Ground truth is the repository's own Storybook render: a compare harness screenshots every story in the reference Storybook alongside the matching preview, and the agent iterates until they align. No story code is ever evaluated at build time — stories run only in the browser against the real artifact. Requires React 18+, with Playwright and Chromium as mandatory dependencies, not optional ones.