메뉴
ตรวจสอบและปรับปรุง animation/motion ใน UI codebase — review, audit, plan อิงจาก Emil Kowalski's design engineering philosophy แหล่งความรู้: emilkowalski/skills
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
| 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