SKILL.md
Easing Audit
The user wants a comprehensive review of their project's animation easings.
Step 1: Scan the Project
Search for animation and transition properties across the codebase:
- Search for CSS files (
.css,.scss,.sass,.less) containingtransitionoranimationproperties - Search for component files (
.jsx,.tsx,.vue,.svelte) containing Tailwind easing classes (ease-,transition-) or inline style animation properties - Search for CSS-in-JS patterns (
style=,css=,styled.) with transition/animation values
Step 2: Categorize Findings
For each animation/transition found, categorize:
- Defaults — Using
ease,linear,ease-in,ease-out,ease-in-out(browser defaults, likely unintentional) - Custom — Using
cubic-bezier(...),linear(...), or Tailwindease-[...](intentional choices) - Missing — Animations/transitions with no easing specified (falls back to browser default
ease)
Step 3: Generate Suggestions
For each default or missing easing, suggest a specific Easing Wizard curve replacement. Base suggestions on:
- The CSS property being animated (opacity → subtle, transform → responsive, etc.)
- The surrounding code context (hover → quick ease-out, modal → spring, etc.)
- Motion design best practices
Use get_presets with verbose: true to get share URLs for each suggested preset.
Only use curve creation tools if no preset is a good match.
Step 4: Output the Report
Present findings as a structured markdown report:
## Easing Audit Report
### Summary
- **X** animations/transitions found
- **Y** using browser defaults
- **Z** with no easing specified
- **W** using custom easings
### Findings
| File | Line | Property | Current | Suggested | Reasoning | Preview |
|------|------|----------|---------|-----------|-----------|---------|
| src/App.css | 12 | transition | ease | Spring SNAP | Hover state benefits from responsive spring feel | [Preview](url) |
| ... | ... | ... | ... | ... | ... | ... |
### Recommendations
[Prioritized list of highest-impact improvements, starting with the most visible/frequently triggered animations]