design-system

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.

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.

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.