메뉴
Auto-generate CSF3 Storybook stories for design system components that lack .stories.tsx files. Can target a specific component or scan all components. Use when a user asks to generate stories or add Storybook coverage.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Scaffold a new design system block (pre-composed UI section). Creates the block file and updates src/index.ts. Use when a user asks to create a new block or scaffold block boilerplate for a given category.
Scaffold a new Radix UI design system component. Creates ComponentName.tsx, index.ts, and updates src/index.ts exports. Use when a user asks to create a new component or scaffold component boilerplate.
Audit the design system for CSS design token compliance. Finds unused --ag-* tokens, undefined token references, and hardcoded colors in component files. Creates AO tasks for issues found. Use when a user asks to audit tokens or check for hardcoded colors.
| name | story-generator |
| description | Auto-generate CSF3 Storybook stories for design system components that lack .stories.tsx files. Can target a specific component or scan all components. Use when a user asks to generate stories or add Storybook coverage. |
Auto-generate CSF3 Storybook stories for design system components.
Use this skill when the user:
.stories.tsx filesFor each component without stories, the skill creates:
src/components/<ComponentName>/<ComponentName>.stories.tsx — CSF3 stories including:
variant prop exists)size prop exists)If the user names a specific component, extract the ComponentName. Otherwise, the audit will scan all components.
Create an AO task for story generation:
Set the task status to "ready".
Enqueue with workflow_ref: "storybook-story-generator".
Confirm to the user the story generation is queued and the daemon will execute it.
Generated stories follow these conventions:
Meta<typeof Component> + StoryObj<typeof Component>)import { Component } from "./index")(["v1", "v2"] as const).map(...) pattern for variant/size grids"Components/<ComponentName>"User: "generate Storybook stories for the Badge component"
Create task "Generate stories for Badge", set to ready, enqueue with storybook-story-generator workflow.