nextjs
Skills for Next.js developers covering bundle size reduction, Cache Components and Partial Prefetching adoption, and verifying runtime behavior in a running app after code edits.
6 skills143k
@vercelFrontend
Plugin
chakra-ui
Build responsive, accessible UI with Chakra UI, migrate projects from the previous major version, and refactor plain HTML, Tailwind, CSS Modules or styled-components code into Chakra components and themes.
Plugin Signal84/100Strong
maintained100
capable46
documented100
adopted98
Claude Code
$ npx -y skills add chakra-ui/chakra-ui --agent claude-code
Codex
$ npx skills add chakra-ui/chakra-ui -a codex
Cursor
$ npx skills add chakra-ui/chakra-ui -a cursor
Gemini CLI
$ npx skills add chakra-ui/chakra-ui -a gemini-cli
GitHub Copilot
$ npx skills add chakra-ui/chakra-ui -a github-copilot
OpenCode
$ npx skills add chakra-ui/chakra-ui -a opencode
Windsurf
$ npx skills add chakra-ui/chakra-ui -a windsurf
Stats
40,722
Stars
3,646
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
What's inside
3 Skills
/chakra-ui-builderBuild 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/chakra-ui-migrateMigrate 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/chakra-ui-refactorReview, 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
3 Commands
2 Agents
ark-ui-version-bumperYou are an expert dependency management specialist for the Chakra UI project, with deep knowledge of Ark UI integration, monorepo package management, and version synchronization workflows.github-issue-triageYou are an expert GitHub issue triage engineer specializing in the Chakra UI component library. Your mission is to systematically debug, reproduce, and fix reported issues with precision and thoroughness.
README
Chakra UI is a component system for building products with speed. Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC
Documentation
It's the https://chakra-ui.com website for the latest version of Chakra UI.
- Latest: https://chakra-ui.com
- v2: https://v2.chakra-ui.com
- v1: https://v1.chakra-ui.com
- v0: https://v0.chakra-ui.com
Installation
To use Chakra UI components, all you need to do is install the
@chakra-ui/react package and its peer dependencies:
# with Yarn
$ yarn add @chakra-ui/react @emotion/react
# with npm
$ npm i @chakra-ui/react @emotion/react
# with pnpm
$ pnpm add @chakra-ui/react @emotion/react
# with Bun
$ bun add @chakra-ui/react @emotion/react
Usage
Read the docs here: https://www.chakra-ui.com/docs/get-started/installation
Contributing
Read the contribution guide here: https://www.chakra-ui.com/docs/get-started/contributing
Support Chakra UI
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
Individuals
By donating $5 or more you can support the ongoing development of this project. We'll appreciate some support. Thank you to all our supporters! 🙏 [Contribute]
Testimonials
People throw React component libraries and design systems at me regularly. This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.
Great work @thesegunadebayo, really inspiring work. – Ryan Florence
Awesome new open-source component library from @thesegunadebayo. Really impressive stuff! – Colm Tuite
This is incredible work. Amazing job Segun! – Lee Robinson
Chakra UI is glorious! I love the consistent use of focus styling and the subtle animation – Guillermo ▲
Awards and Mentions
We've been extremely humbled to receive awards and mentions from the community for all the innovation and reach Chakra UI brings to the JavaScript ecosystem.
License
MIT © Segun Adebayo
Stars on GitHub
Momentum
- stars in total
- 40.7k
File tree
Similar plugins.
@vercelui
Helps you add, find, fix, style and compose shadcn UI components in your React project, with component docs and usage examples. It can also move a project from Radix UI primitives to Base UI.
2 skills127k
@shadcn-uielectron
electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS.
5 skills124k
@electronleonxlnx-taste-skill
Gives coding agents a design direction, reference images and a browser check, so the websites and app screens they build look deliberate instead of like a generic template page.
1 skill107k
@leonxlnxQuestions about chakra-ui.
Build responsive, accessible UI with Chakra UI, migrate projects from the previous major version, and refactor plain HTML, Tailwind, CSS Modules or styled-components code into Chakra components and themes. Install it with the command on its page. It includes chakra-ui-builder, chakra-ui-migrate, chakra-ui-refactor. Its skills do not fire on their own yet. Free and open source.
- What is chakra-ui?
- Build responsive, accessible UI with Chakra UI, migrate projects from the previous major version, and refactor plain HTML, Tailwind, CSS Modules or styled-components code into Chakra components and themes.
- How do I install chakra-ui?
- Run these in Claude Code: npx -y skills add chakra-ui/chakra-ui --agent claude-code. Then prompt normally.
- Does chakra-ui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin.
- Is chakra-ui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use chakra-ui's skills?
- chakra-ui installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it