Skills

HeroUI Pro skills are static instruction files that teach your AI agent @heroui-pro/react component patterns, v3 conventions, and the HeroUI design system — so it writes correct code without needing to look everything up.

Available Skills

Installation

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-react-pro

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-taste

curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-react-pro
curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-taste

Replace your_token with your token from the Pro dashboard. The installer detects your tools (Claude Code, Cursor, OpenCode, Codex, Antigravity) and places the skill in the correct directory.

What's Inside

heroui-react-pro

• Two packages: @heroui/react (base) vs @heroui-pro/react (pro) — what comes from where
• Unified MCP: one MCP covers both packages — list_components, get_component_docs, get_css, get_docs, get_component_source_code, get_theme_variables
• Critical v3 rules: no Provider, compound components, Tailwind v4, onPress not onClick
• All Pro component categories with names (AI, charts, forms, navigation, overlays, feedback, data display, layout)
• CSS system overview: design tokens, BEM classes, theme variants
• Common mistakes and corrections

heroui-pro-design-taste

• 78 design principles across 10 categories learned from iterative human feedback
• Applies across the full HeroUI ecosystem: @heroui/react, @heroui-pro/react, @heroui/native, @heroui-pro/native
• Categories: spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility
• Design philosophy: semantic over visual, generous whitespace, subtle depth, minimalism

Start Prompting

Build a settings page with a Sidebar, CellSwitch toggles, CellSelect dropdowns, and a CellSlider for font size

Review this page and improve the spacing, typography, and color usage following HeroUI design principles

Create a dashboard with KPI cards, TrendChips, and an AreaChart — make it look polished and production-ready

Supported Tools

Claude Code, Cursor, OpenCode, Codex, Antigravity (Gemini CLI). Skills follow the Agent Skills open standard.

Related

• MCP Server — Live access to both @heroui-pro/react and @heroui/react docs, CSS, themes, and source code from a single MCP
• Design Taste — Deep dive into the design principles
• Building with AI — Overview of all AI tools