The Design Taste skill teaches AI agents how to properly use the HeroUI design system to produce polished, production-quality mobile interfaces.

Installation

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 places the skill into the correct directory for your tools.

What It Teaches Your AI

Without design taste, AI assistants produce functional but generic UIs. This skill fixes that across 10 categories:

Spacing — consistent padding, margins, and gaps using the design token scale
Typography — proper font weights, sizes, and line heights for hierarchy
Color — semantic token usage (bg-surface, text-muted, bg-accent) instead of arbitrary values
Cards — correct anatomy with proper slot composition and shadow usage
Forms — field grouping, label patterns, and validation styling
Buttons — variant hierarchy (primary > secondary > tertiary > ghost)
Icons — consistent sizing, semantic colors, and proper placement
Navigation — tab bars, stack navigators, and drawer patterns that feel native to mobile
Accessibility — accessible labels, roles, VoiceOver/TalkBack support, and touch target sizing
General — minimalism, no duplicate representations, prefer built-in components

Tool	What it does	When to use
Design Taste	Teaches how to design — spacing, color, typography, polish	"Build a settings screen" — gets the design right
Native Pro Skill	Teaches what components exist and their APIs	"Use a BottomSheet with snap points" — gets the implementation right
MCP Server	Real-time access to `heroui-native-pro` docs and theme variables	"What props does Button accept?" — gets the details right

Together they produce UIs that are correctly implemented, beautifully designed, and accurately documented.

Review this screen and improve the spacing, typography, and color usage

Build a profile screen with avatar, stats row, action buttons, and a scrollable activity feed

Audit this screen for design consistency — check color token usage, spacing scale, and typography hierarchy

Skills — Install guide and full skills reference
MCP Server — Live access to heroui-native-pro documentation and theme variables
UI for Agents — Overview of all AI tools

Without design taste, AI assistants produce functional but generic UIs. This skill fixes that across 10 categories:

Spacing — consistent padding, margins, and gaps using the design token scale

Typography — proper font weights, sizes, and line heights for hierarchy

Color — semantic token usage (bg-surface, text-muted, bg-accent) instead of arbitrary values

Cards — correct anatomy with proper slot composition and shadow usage

Forms — field grouping, label patterns, and validation styling

Buttons — variant hierarchy (primary > secondary > tertiary > ghost)

Icons — consistent sizing, semantic colors, and proper placement

Navigation — tab bars, stack navigators, and drawer patterns that feel native to mobile

Accessibility — accessible labels, roles, VoiceOver/TalkBack support, and touch target sizing

General — minimalism, no duplicate representations, prefer built-in components

Tool	What it does	When to use
Design Taste	Teaches how to design — spacing, color, typography, polish	"Build a settings screen" — gets the design right
Native Pro Skill	Teaches what components exist and their APIs	"Use a BottomSheet with snap points" — gets the implementation right
MCP Server	Real-time access to `heroui-native-pro` docs and theme variables	"What props does Button accept?" — gets the details right

Together they produce UIs that are correctly implemented, beautifully designed, and accurately documented.