Skills
Teach your AI assistant how to build with HeroUI Native Pro
HeroUI Native Pro skills are static instruction files that teach your AI agent heroui-native-pro component patterns, React Native 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 and theme variables. Use both together for best results.
Available Skills
| Skill | What it teaches | Install |
|---|---|---|
heroui-native-pro | heroui-native-pro component patterns, MCP tool usage, compound components, Uniwind styling | See below |
heroui-pro-design-taste | HeroUI design system principles — spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility (shared across React and Native) | See below |
Installation
curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-native-procurl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-tastecurl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-native-pro
curl -fsSL https://heroui.pro/docs/install | HEROUI_PERSONAL_TOKEN=your_token bash -s -- heroui-pro-design-tasteReplace 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-native-pro
- Two packages:
heroui-native(base) vsheroui-native-pro(pro) — what comes from where - MCP tool reference: when to use
list_components,get_component_docs,get_theme_variables,get_docs - Critical Native rules: compound components, Uniwind (Tailwind CSS for React Native), React Native Reanimated, Keyboard avoidance
- All Native Pro component categories with names (charts, forms, navigation, overlays, feedback, data display, layout)
- Theming system overview: semantic colors, typography, spacing with light/dark mode
- Common mistakes and corrections
heroui-pro-design-taste
- Shared across the full HeroUI ecosystem:
heroui-native,heroui-native-pro,@heroui/react,@heroui-pro/react - Design principles learned from iterative human feedback
- Categories: spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility
- Design philosophy: semantic over visual, generous whitespace, subtle depth, minimalism
Start Prompting
Build a login screen with email and password fields, a "Sign in" button, and social auth optionsReview this screen and improve the spacing, typography, and color usage following HeroUI design principlesCreate an onboarding flow with illustrations, progress dots, and a "Get Started" button — make it look polished and production-readySupported Tools
Claude Code, Cursor, OpenCode, Codex, Antigravity (Gemini CLI). Skills follow the Agent Skills open standard.
Related
- MCP Server — Live access to
heroui-native-prodocs and themes - Design Taste — Deep dive into the design principles
- UI for Agents — Overview of all AI tools