Hex UIv0.1

Skills

Prose context packs for Claude Code. Eight SKILL.md files that complement the 11 structured MCP tools.

Why skills

The MCP server returns structured data — props, variants, ranked recipes, checklist items. Skills give the agent the prose reasoning that lives alongside: when to reach for a dialog vs a sheet, why Switch beats Checkbox for instant settings, what a good recipe-selection heuristic looks like. Agents load skills lazily based on the trigger keywords in their frontmatter, so the eight packs cost ~800 tokens of system prompt total, not 8 × 5k.

Hex UI follows Anthropic’s Agent Skills format verbatim: one directory per skill, a SKILL.md at the root with YAML frontmatter, progressive disclosure via sibling files.

Install

The CLI copies the eight bundled skills into .claude/skills/ in your project (or --target if you want a custom location).

bash
# One command, per project
npx @hex-core/cli skills install

# Or point at a custom target
npx @hex-core/cli skills install --target ./my-skills

Re-running is idempotent — existing directories are skipped unless you pass --overwrite. Commit the installed skills to your repo so teammates’ agents pick them up automatically.

The eight shipped

  • Overview (hex-ui-overview) — Primer + mental model + when to reach for hex-ui vs shadcn.
  • MCP tools decision tree (hex-ui-mcp-tools) — Which of the 11 tools to call for any given intent.
  • Recipes workflow (hex-ui-recipes-workflow) — End-to-end brief → resolve → get_recipe → install → verify.
  • Theming (hex-ui-theming) — HSL tokens, dark mode, customize_component, adding themes.
  • CLI (hex-ui-cli) — hex init / add / list / recipe add / skills install with all flags.
  • Accessibility (hex-ui-accessibility) — Radix defaults, icon-only aria-label rule, keyboard maps.
  • Anti-patterns (hex-ui-anti-patterns) — React 19 / Next 16 hygiene + top compositional mistakes.
  • Registry authoring (hex-ui-registry-authoring) — Writing your own components, recipes, or third-party registry.

Full source at github.com/oscarabcorona/hex-ui/tree/main/skills.

Authoring your own

A skill is a directory with SKILL.md. Frontmatter has two fields: name (kebab-case) and description (one sentence, front-load trigger keywords). Body is markdown under ~5k tokens. Deeper files — examples/*.md, scripts/, resources/ — load on demand via progressive disclosure.

For authoring recipes, components, or an entire third-party registry, see Spec-driven development and the hex-ui-registry-authoring skill.

Edit this page on GitHub