Skill

Teach your coding agent Morph UI. It installs components for you and writes view transitions the right way.

Installation

Terminal

npx skills add AnmolSaini16/morph-ui

Works with Claude Code, Cursor, Codex and other agents that support skills. Or copy the skills/morph-ui folder from the repository into .claude/skills/, or your agent's skills folder.

What it knows

Installing components. Checks for React 19.3 and your theme, puts files where your project keeps them, and adds morph.css once.

Writing transitions. Picks the right vt-* classes and follows the same rules as these components: clicks never wait, controls stay live, heights stay fixed.

Recipes. Lists, shared elements, directional slides, number rolls, and route transitions in Next.js.

Tuning. Changes timings and curves through the --vt-* settings, without editing morph.css.

Try asking

Add the Post List to my blog page.
Animate this list when tasks are added or removed.
Make the settings tabs slide between panels.
Add page transitions to my Next.js app.
Make every animation a little faster.

What's inside

The skill is built from the same files as this site, so it always matches the components you see here. Your agent reads only what the task needs.

skills/morph-ui

skills/morph-ui/
├── SKILL.md            when to use it, and the rules
├── references/
│   ├── components.md   each component's exports, classes and theme
│   ├── classes.md      the vt-* classes and settings
│   └── patterns.md     recipes
└── assets/
    ├── morph.css
    ├── theme.css       theme variables, for projects without shadcn
    ├── components/     every component, ready to copy
    └── examples/       a working example of each