القائمة
ตรวจสอบและปรับปรุง animation/motion ใน UI codebase — review, audit, plan อิงจาก Emil Kowalski's design engineering philosophy แหล่งความรู้: emilkowalski/skills
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Inspect SoloCorp audit trails and governance compliance. Use when the user runs /audit, asks for audit trail, guard events, compliance, or pipeline evidence.
Save SoloCorp session context to durable notes. Use when the user runs /brain, asks to remember session context, or wants to persist decisions for later sessions.
Deploy or export SoloCorp profiles and validate packaging for agent platforms. Use when the user runs /deploy, wants Codex export, profile packaging, or platform sync checks.
Create a structured SoloCorp department handoff. Use when the user runs /handoff, transfers work between departments, or needs a Head-to-Head handoff record.
Run SoloCorp full-cycle pipeline for a feature. Use when the user runs /pipeline, asks for a full department cycle, or wants orchestrated multi-dept delivery (route → plan → implement → QA → status).
Classify a user request into SoloCorp departments and recommend Grok agents. Use when the user runs /route, asks which department owns work, or needs routing before pipeline execution.
استنادا إلى تصنيف SOC المهني
| name | ui-animation-review |
| description | ตรวจสอบและปรับปรุง animation/motion ใน UI codebase — review, audit, plan อิงจาก Emil Kowalski's design engineering philosophy แหล่งความรู้: emilkowalski/skills |
Skill สำหรับตรวจสอบ animation/motion ใน UI codebase
อิงจาก Emil Kowalski's animation philosophy (ex-Vercel, ex-Linear)
ตรวจสอบ animation/motion ใน diff โดยใช้ 10 Non-Negotiables:
| # | ข้อ | เช็ค |
|---|---|---|
| 1 | Justified motion | animation นี้มี purpose หรือ "it looks cool"? |
| 2 | Frequency-appropriate | keyboard/100+/day → ไม่ animate |
| 3 | Responsive easing | ease-in บน UI? → ❌ ใช้ ease-out |
| 4 | Sub-300ms | >300ms โดยไม่มีเหตุผล? |
| 5 | Origin-aware | popover/dropdown scale จาก center? |
| 6 | Interruptible | keyframes บน toast/toggle? ใช้ transitions แทน |
| 7 | GPU-only | animate width/height/margin? |
| 8 | Accessibility | prefers-reduced-motion? hover gate? |
| 9 | Asymmetric timing | กดช้า ปล่อยเร็วเท่ากัน? |
| 10 | Cohesion | animation match component personality? |
Output format (REQUIRED): Markdown table Before/After/Why
| Before | After | Why |
|--------|-------|-----|
| `transition: all 300ms` | `transition: transform 200ms ease-out` | ระบุ property ที่ต้องการ; `all` animate โดยไม่จำเป็น |
| `ease-in` บน dropdown | `ease-out` + custom curve | `ease-in` เริ่มช้า รู้สึก sluggish |
| `transform-origin: center` | `var(--radix-popover-content-transform-origin)` | Popover ต้อง scale จาก trigger |
ใช้เมื่อต้องการ survey ทั้ง codebase สำหรับ animation issues:
Categories:
Commands ที่ grep หา:
transition, animation, @keyframes — core animationsease-in, ease-out, cubic-bezier — easing issuesscale(0), transform: scale(0) — bad entrancestransition: all — over-broad transitionstransform-origin: center — wrong origin (ยกเว้น modal)width, height, margin, padding, top, left — GPU violationsprefers-reduced-motion — missing a11y@media (hover — missing hover gateเมื่อต้องสร้างแผนปรับปรุง animation:
## แผน: [ชื่อสั้น]
**ไฟล์:** `path/to/file.tsx`
**บรรทัด:** L42-L48
**ปัญหา:** [สรุปสั้น]
**Current code:**
```css
.example {
transition: all 300ms ease-in;
}
Target:
.example {
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
Fix type: [easing / duration / origin / interruptibility / performance / a11y] Priority: [HIGH / MEDIUM / LOW] Feel check: ลองดูใน slow motion / frame-by-frame ว่า easing รู้สึกถูกต้อง
## Animation Reference Tables
### Easing Curves (CSS Custom Properties)
```css
/* ใช้ custom cubic-bezier — ห้ามใช้ built-in CSS easings */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
| Element | Duration |
|---|---|
| Button press | 100-160ms |
| Tooltip, small popover | 125-200ms |
| Dropdown, select | 150-250ms |
| Modal, drawer | 200-500ms |
| Marketing | ยาวกว่านี้ได้ |
| UI max | 300ms |
// Apple-style (recommended — easier to reason)
{ type: "spring", duration: 0.5, bounce: 0.2 }
// Traditional physics
{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
| สถานการณ์ | เทคโนโลยี |
|---|---|
| Predetermined motion | CSS transitions / @starting-style |
| Dynamic, interruptible | CSS transitions / WAAPI |
| Gesture-driven | Springs (via useSpring / Motion) |
| Scroll-driven | IntersectionObserver + CSS |
| Marketing/delight | CSS keyframes |
transform + opacity (GPU composited)width, height, margin, padding, top, leftx/y/scale shorthand ไม่ hardware accelerated — ใช้ transform string แทนตอน load หนัก@media (prefers-reduced-motion: reduce) — keep opacity/color, remove movement@media (hover: hover) and (pointer: fine) — gate hover animations