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.

Skills teach your agent how to write code. The MCP server gives it live access to component docs, CSS files, and theme variables. Use both together for best results.

Available Skills

Skill	What it teaches	Install
`heroui-react-pro`	`@heroui-pro/react` component patterns, MCP tool usage, v3 conventions, CSS system	See below
`heroui-pro-design-taste`	HeroUI design system principles — spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility	See below

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
MCP tool reference: when to use list_components, get_component_docs, get_css, get_docs
Critical v3 rules: no Provider, compound components, Tailwind v4, onPress not onClick
All Pro component categories with names (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.

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

On this page