·chakra-ui
*

chakra-ui

✓
mgd34msu/goodvibes-geminiGitHub: mgd34msu/goodvibes-geminiSource: mgd34msu/goodvibes-gemini

Builds accessible React applications with Chakra UI v3 components, tokens, and recipes. Use when creating styled component systems, theming, or accessible form controls.

mgd34msu·chakra·ui
17Installs·1Trend·@mgd34msu

Installation

GitHub: mgd34msu/goodvibes-gemini
$npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill chakra-ui

How to Install chakra-ui

Quickly install chakra-ui AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill chakra-ui
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: mgd34msu/goodvibes-gemini.

SKILL.md

View raw

Accessible React component library with built-in styling, theming, and design tokens.

| bg | background | bg="blue.500" | | color | color | color="gray.700" | | p, px, py | padding | p="4" px="6" | | m, mx, my | margin | m="auto" my="8" | | w, h | width, height | w="full" h="100vh" | | rounded | border-radius | rounded="lg" | | shadow | box-shadow | shadow="md" | | display | display | display="flex" | | gap | gap | gap="4" |

| solid | Background for solid buttons | | contrast | Text on solid backgrounds | | fg | Foreground/text color | | muted | Muted backgrounds | | subtle | Subtle backgrounds | | emphasized | Hover states | | focusRing | Focus ring color |

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill chakra-ui
Source
mgd34msu/goodvibes-gemini
Category
*Creative Media
Verified
✓
First Seen
2026-03-07
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/mgd34msu/goodvibes-gemini/chakra-ui

Browse more skills from mgd34msu/goodvibes-gemini

Quick answers

What is chakra-ui?

Builds accessible React applications with Chakra UI v3 components, tokens, and recipes. Use when creating styled component systems, theming, or accessible form controls. Source: mgd34msu/goodvibes-gemini.

How do I install chakra-ui?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill chakra-ui Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/mgd34msu/goodvibes-gemini

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-03-07

Related Skills

None