Agent Skills
Install HeroUI Pro skill packs for AI tools so agents write high-quality code from the start.
This article is generated by CC powered by GLM-5.1, referencing the official documentation.
HeroUI Pro provides Skills, a knowledge base that teaches AI agents how to use Pro components correctly. It includes component patterns, API conventions, and design principles.
Skills are cached knowledge that works offline and loads automatically when the agent starts. They work best when combined with real-time data from MCP.
Installation
@heroui-pro/react — Charts, advanced forms, navigation, overlays, data display — 55 components in total.
heroui-native-pro — Date pickers, steppers, progress buttons, slide buttons, number inputs — 30 components in total.
heroui-pro-design-taste — 78 design principles across 10 categories, applicable to all HeroUI packages.
Skills use the Personal Token, not the HP Key from hpsetup. These are two different authentication systems — do not mix them up.
Supported AI Tools
The installation script automatically detects installed tools and installs to the corresponding directory:
| AI Tool | Installation Path |
|---|---|
| Claude Code | ~/.claude/skills/{skill-name}/ |
| Cursor | ~/.cursor/skills/{skill-name}/ |
| Codex CLI | ~/.codex/skills/{skill-name}/ |
| OpenCode | ~/.config/opencode/skill/{skill-name}/ |
| Antigravity (Gemini) | ~/.gemini/antigravity/skills/{skill-name}/ |
If no installed AI tools are detected, the script will output download links. You can also set HEROUI_PRO_SKILLS_DIR to install to a custom path.
Skill Pack Details
heroui-react-pro
Composite component patterns, MCP tool usage, and CSS styling system for @heroui-pro/react.
Coverage:
- Charts: AreaChart, BarChart, LineChart, PieChart, RadarChart, ComposedChart
- Data Display: KPI, KPIGroup, TrendChip, NumberValue, Rating, EmptyState
- Forms: CellSelect, CellSwitch, CellSlider, InlineSelect, NativeSelect, NumberStepper
- Navigation: Sidebar, FloatingToc, Stepper, Segment
- Overlays: Command, ContextMenu, HoverCard, Sheet
- Feedback: PressableFeedback, DropZone, EmojiPicker
- Layout: FileTree, Kanban, ItemCard
heroui-native-pro
Composite component patterns, Uniwind styling, and Reanimated conventions for heroui-native-pro.
Coverage:
- Date & Time: DatePicker, DateRangePicker, RangeCalendar, Calendar
- Forms: NumberField, NumberStepper, RadioButtonGroup
- Buttons: ProgressButton, SlideButton, ToggleButton, SocialAuthButton, ToggleButtonGroup
- Navigation: Stepper, Segment, SplitView
- Data Display: NumberValue, Rating, ProgressBar, ProgressCircle, EmptyState, Badge
- Charts: AreaChart, BarChart, LineChart
heroui-pro-design-taste
78 design principles across 10 categories, applicable to all HeroUI packages.
Categories: Spacing, Typography, Color, Cards, Forms, Buttons, Icons, Navigation, Layout, Accessibility.
Uninstallation
Delete the corresponding directory:
rm -rf ~/.claude/skills/heroui-react-pro
rm -rf ~/.claude/skills/heroui-native-pro
rm -rf ~/.claude/skills/heroui-pro-design-tasteHow is this guide?
Last updated on