Skills
Agent-ready skills for using Morpha UI, distributed alongside the components.
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 the generic AI → Skills: those teach broad heuristics (frontend design, Next.js conventions) and aren't tied to any library. Morpha skills are specific to this kit. The two cross-link, but they live in different places because they answer different questions.
How skills are distributed
The model is three channels — pick whichever fits the project's setup:
npx morpha-ui@latest add-skill <name>Installs the skill the same way components are installed — through the authenticated Morpha CLI.
npx shadcn@latest add <registry-url>Skills shipped as registry items, installed by the shadcn CLI alongside components.
npx skills add morpha-ui/<name>The same channel the generic vendored skills use, for projects standardized on it.
Honest status: today these channels are the intended model — the contract this page
defines. The actual distribution (the add-skill command, the shadcn registry items,
the skills.sh packages) ships in a later step. For now, the starter skill below is the
reference, shown inline.
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: using-morpha-ui
description: How to install and build with Morpha UI components and tokens.
---
## When to use
<the situations where an agent should reach for this skill>
## Steps
<the ordered actions to take>
## Reference
<links into the Morpha docs the agent can fetch for detail>Starter skill: using-morpha-ui
This is the authored starter skill, shown inline as a complete example. It covers the three things an agent needs to use Morpha UI well: install, tokens, and composition.
---
name: using-morpha-ui
description: How to install Morpha UI components and build with its tokens and conventions.
---
## When to use
Use this when adding or building UI in a project that uses Morpha UI — installing a
component, theming it, or composing primitives.
## Steps
1. Install components with the Morpha CLI.
- Authenticate once: `npx morpha-ui@latest login`.
- Add a component: `npx morpha-ui@latest add <component>`.
- Reference: /docs/ui-kit/cli
2. Apply the token contract.
- Theme against the Cupido CSS variables; never hardcode colors, spacing or radii.
- Light and dark come from the same variables — don't fork styles per theme.
- Reference: /docs/ui-kit/color-guidance
3. Follow the cn convention and composition patterns.
- Use `cn` from `@/lib/utils` (clsx + tailwind-merge) for shadcn-style components;
use `lib/cn.ts` (bare tailwind-merge) only for Fumadocs-sourced components.
- Compose from existing primitives before writing a new one.
- Reference: /docs/ui-kit/components
## Reference
- Components catalog: /docs/ui-kit/components
- CLI: /docs/ui-kit/cli
- Color & tokens: /docs/ui-kit/color-guidance
- Accessibility baseline: /docs/ui-kit/accessibilityCross-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.