shadcn/ui composition

SkillDocs & knowledge

Map product UI onto the canvas with shadcn-like grammar, roles, tokens, and patterns (not React trees).

Then ask your AI: use the shadcn/ui composition skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add it as a step in a pipeline you build on Ahel, or connect Ahel to Claude, ChatGPT, Cursor, Claude Code or Codex and ask your AI to use it.

About this skill

zuoge, open-source AI design workspace with a document-derived SoA infinite artboard and Design Agent

What this skill tells your AI

The instructions your AI receives, as published by recombyn/zuoge in .agents/skills/shadcn_ui/SKILL.md and read by Ahel’s review.

Map product UI onto the canvas with shadcn-like grammar — roles, tokens, and patterns (not React trees).

Roles, not one-off skins — primary / secondary / ghost / destructive mean the same everywhere.
Semantic color — background / foreground / primary / muted / danger — not random hex.
One radius + spacing rhythm across the board.
Labeled states — never color alone for active/error/disabled.
Compose from patterns — invent chrome only if nothing fits.

Need	Compose
Button primary	Filled primary + centered label; loading = visible state
Button secondary/ghost	Stroke or muted fill + label; same height as primary
Destructive	Danger fill/stroke + clear label
Input	Label above; field; optional placeholder; error adjacent
Form group	Related fields stacked with shared left edge
Card	Surface + title + body + optional action row
Table	Header row + aligned columns; no clipped cells
Nav	Top or side; active = weight and color
Tabs	Label row; active underline; panel below
Dialog / drawer	Panel with title + body + actions
Toast / alert	Compact surface + short message
Badge / avatar	Small pill or circle + short text/initials
Skeleton	Muted bars matching content layout
Switch / checkbox	Affordances labeled by adjacent text

Context	Lean
Settings	Comfortable field spacing; clear section titles
Dashboard	Tighter tables OK; keep header distinct
Marketing embed	Fewer controls; one primary CTA

dashboard_ui / mobile_app_ui / landing_page; awesome_design_md for brand tokens.

Hierarchy reads in one glance; interactive states are labeled; spacing rhythm is consistent; primary action is obvious.

Advanced