Search documentation

Search components and pages

Agent skill

A SKILL.md that teaches your coding agent how to install, theme, and build with Yami UI correctly.

What it is

The Yami UI agent skill is a single SKILL.mdfile you install into your coding agent (Cursor, Claude, and other agents that read agent skills). Once installed, the agent automatically knows the registry's install flow, component conventions, theming tokens, and the GSAP-powered void motion layer — so it builds with Yami UI the way it's meant to be used instead of guessing.

Install

The skill ships as a registry item, so it installs with the same shadcn CLI as every component. It drops a SKILL.md into ~/.agents/skills/yami-ui/.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/skill.json

With the @yami namespace registered in components.json (see the installation guide), the short form also works:

npx shadcn@latest add @yami/skill

What the skill covers

  • Install order — add the @yami theme first, then components; the CLI resolves registry dependencies.
  • Component conventions — import from @/components/ui/*, merge classes with cn(), and style with semantic token classes.
  • Theming tokens — OKLCH semantic colors, --radius, --ring-width, brand glow, display typography, and motion tokens.
  • Void motion — wrap the app in MotionProvider, GSAP triggers, and respecting prefers-reduced-motion.

Prefer to tune tokens by hand? See the theming guide or the theme playground.