Skills | Morpha UI

Morpha skills are small, agent-consumable instructions for using Morpha UI. They grow alongside the components — as I build a custom component, I ship the skill that teaches an agent how to use it correctly.

Overview

A skill is a markdown file an agent reads to learn how to do something specific with Morpha UI: install a component, apply the tokens, follow the composition patterns. The point is agent-first delivery — instead of an agent guessing how my system works, it reads the skill and gets it right the first time.

These are distinct from generic agent skills that teach broad heuristics (frontend design, Next.js conventions) and aren't tied to any library. Morpha skills are specific to this kit — they answer a different question: how to build correctly with Morpha UI.

Installing the skill

Install the Morpha UI skill through the CLI:

npx morpha-ui@latest add skills

Unlike components, the skill is free — no login required. It lands in .claude/skills/morpha-ui/SKILL.md (pass --path to change the location, --dry-run to preview). It's also installed automatically by npx morpha-ui@latest init, right after the theme — so a fresh project is agent-ready from the start.

Anatomy of a Morpha skill

A skill is plain markdown with a small frontmatter and a predictable body. It's agent-consumable, and it leans on this site's LLM pipeline (llms.txt, the raw content.md endpoints) so an agent can pull the underlying docs it references.

---
name: morpha-ui
description:
  Build, style, and theme UI in a project that uses Morpha UI — install
  components, apply the Morpha tokens, and compose the Base UI-backed primitives.
---

## When to use

<the situations where an agent should reach for this skill>

## Foundations

<the color, typography, elevation and accessibility token rules — inline>

## Component catalog

<every component: install command, purpose, and Morpha gotchas>

## Fetch full detail on demand

<raw-markdown endpoints the agent can pull for exhaustive per-component API>

What the shipped skill covers

npx morpha-ui@latest add skills installs a single, comprehensive SKILL.md (name: morpha-ui) — the hand-crafted reference an agent reads to build with Morpha UI. It bundles:

Install flow — the skill is free; the theme and components are pro. login once, then add theme and add <component>.

Foundations, inline — the full token contract: MD3 color roles + tonal scales, the .type-* type scale (Outfit), shadow-xs…xl elevation, and the WCAG-AA accessibility checklist. The rule throughout: build on tokens, never hardcode.

Rules of the road — cn from @/lib/utils, Base UI (not Radix), no combobox, compose before building, and defer to the vendored shadcn skill for wrapper-component mechanics.

Component catalog — every component grouped by category with its add <name> command, one-line purpose, and the Morpha gotchas, plus machine-fetchable content.md links for full per-component API.

Because the catalog and foundations are served from this site, the installed skill stays a distilled map that points back to the always-current docs (llms.txt, the content.md endpoints) rather than a frozen copy.

Cross-links for the human reader: the CLI page, Color Guidance, and the Components catalog.

Roadmap

The catalog grows as custom components ship — each premium component can carry its own skill, so the agent always has up-to-date instructions for whatever I add next.