Agent Claude Code
Use this agent when you need to upgrade Ark UI dependencies across the Chakra UI project, particularly when:\n\n- The user explicitly requests to bump Ark UI versions\n- There's a new Ark UI release that needs to be integrated\n- You need to sync Ark UI versions across all packages\n- After reviewing Ark UI changelogs…
Agent Claude Code
Use this agent when you need to debug, reproduce, and fix GitHub issues reported for Chakra UI. This includes creating reproduction examples in the compositions app, tracing bugs through the codebase and dependencies (zag.js, ark-ui), and documenting fixes with changesets. Examples:\n\n \nContext: User provides a…
Command Claude Code
Implement a new Ark UI component.
Command Claude Code
Generate a new changelog entry by reading all changeset files and creating a properly formatted entry in .changelog/v3.mdx.
Command Claude Code
Draft a response for a GitHub issue.
Instructions file
Instructions for chakra-ui/chakra-ui, covering claude's learning document - chakra ui, project overview, project structure, root directory and key packages.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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…
Agent Claude Code
Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\n\n \nContext: User is working on the Checkbox component and wants to add new usage examples.\nuser: "Can you…
Agent Claude Code
Use this agent when you need to discover and suggest new examples for Ark UI components. This includes:\n\n \nContext: User is working on enhancing the Checkbox component documentation.\nuser: "I've just finished updating the Checkbox component API. Can you help me find what examples we should add?"\nassistant: "I'll…
Command Claude Code
Update documentation and agent files based on learnings from recent component development work.
Command Claude Code
Sync changelog updates from chakra-ui/zag repo to all Ark UI framework changelogs.
Command Claude Code
Implement a Zag.js component in Ark UI.
Cursor rule Cursor
When writing code for Solid.js, follow these rules.
Cursor rule Cursor
Cursor rule "svelte" from chakra-ui/ark, covering exporting files and creating stories.
Cursor rule Cursor
When writing code for Vue.js, follow these rules.
Instructions file
Instructions for chakra-ui/ark, covering ark ui - claude development guide, documentation structure, quick start, common commands and install dependencies.