figma_ds_setup_storybook
Connects a freshly initialized Storybook to an extracted design system by generating preview CSS, copying fonts, and patching config for Tailwind, JSX, and theme switching so stories render correctly.
Instructions
Wire a freshly-initialized Storybook workshop to the extracted design system — run AFTER npm create storybook@latest inside outDir. Generates .storybook/preview.css (Tailwind entry importing the extracted tokens plus the SOURCE app's @theme utility mapping, custom @utility definitions, @layer base, and @font-face rules mined from its stylesheets, with a dark variant covering both .dark and [data-theme] conventions), copies self-hosted font files into staticDirs, and patches main.js (tailwind vite plugin + automatic JSX runtime — without it stories throw 'React is not defined') and preview.jsx (preview.css import + a theme toolbar/decorator using the extracted mode names). Idempotent; anything it can't patch safely is returned as a manual step. Local Mode only.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| outDir | Yes | The design-system package dir (same outDir as figma_ds_analyze) containing the freshly-initialized .storybook/. |