بنقرة واحدة
ui-animate
Add purposeful motion: micro-interactions, transitions, choreography
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Add purposeful motion: micro-interactions, transitions, choreography
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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