Motion signature
Design PROMake new things feel like Vuesax
The three moves that carry the whole feel — panels that grow out of the control that opened them, the cursor-proximity light, and the press ripple — with the real curves, durations and rules behind them.
- 276 lines
- 1,756 words
- 11 KB
- Updated 2026-07-22
The skill
Checking your access…
One moment.
What it covers
- The morph engine and its five rules
- Curve vocabulary: which bezier, when
- Proximity glow, wiring and radii
- Press tilt and ripple, tuned by mass
- Squircle corners and the 1.7× rule
- Reduced motion in every layer
Best for: Building a new component, variant or interaction.
Where the file goes
Same content everywhere — only the location changes. Restart the editor afterwards; instruction files are read at startup, not per message.
| Editor | Path | Applies to |
|---|---|---|
| Claude Code | ~/.claude/skills/vuesax-style/SKILL.md | Every project |
| Claude Code | <repo>/.claude/skills/vuesax-style/SKILL.md | This project only |
| Cursor | .cursor/rules/vuesax-style.mdc | This project only |
| VS Code (Copilot) | .github/copilot-instructions.md | This project only |
| Windsurf | .windsurfrules | This project only |
| Zed | .rules | This project only |