Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns…
Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like "is this…
Creates the colocated .doc.ts spec next to an existing component's source — a typed ComponentDoc object with token inventory, props, and accessibility requirements with WCAG SC references. Use when a component is missing its doc, when documenting a component, or as step 4 of the /add-component flow.
Scaffolds a new component in @agentic-ds/core or @agentic-ds/agents end-to-end — source, Storybook story, unit tests, spec doc, and index export — by planning once, then orchestrating the add-component-source, add-component-story, add-component-tests, add-component-spec, and verify-component skills. Use when adding…
Audits and updates an existing component — source, story, and spec doc — fixing violations, story gaps, and spec drift. Always plans changes and waits for approval before writing any files. Use when a component needs to be brought up to standard, or when asked to fix, update, or improve a specific existing component.