Skill

Installation

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. Adds components and morph.css to your project.
• Writing transitions. Picks the right vt-* classes and follows the same rules.
• Recipes. Lists, shared elements, slides and Next.js route transitions.
• Tuning. Adjusts timing and easing through the --vt-* settings.

Try asking

For example, you can ask your agent to:

• “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/
├── 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