Menu
Add purposeful motion: micro-interactions, transitions, choreography
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Interview the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building, or uses any 'grill' trigger phrases.
Surface deepening opportunities in a codebase — shallow modules, seam leaks, missing locality — and grill through whichever one you pick. Architecture-pattern aware (monolith / distributed / serverless).
Reconcile and validate all documents in the project's docs/ directory
Full-project code audit workflow: audit then fix
Systematic root cause analysis. No fixes without investigation
Principal Engineer persona. Production-first technical judgment
| name | ui-animate |
| description | Add purposeful motion: micro-interactions, transitions, choreography |
/ui-animate [target] - Add purposeful motion: micro-interactions, transitions, choreography. Enhances usability, not decoration.
| Purpose | Duration | Easing |
|---|---|---|
| Instant feedback | 100-150ms | ease-out-quart |
| State changes | 200-300ms | ease-out-quart |
| Layout changes | 300-500ms | ease-out-quint |
| Entrance | 500-800ms | ease-out-expo |
Exit animations: ~75% of enter duration.
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
transform and opacity (never width, height, top, left)prefers-reduced-motion@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
prefers-reduced-motion