메뉴
Implement web animations with the right engine (Motion, GSAP, Anime.js, React Spring, tailwindcss-motion) and a mandatory prefers-reduced-motion fallback at 60fps. Use when adding any motion to a site.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Design, build, verify, and publish a curated Claude Code pack — a reusable collection of rules, skills, hooks, loops, and review agents — to GitHub. Trigger this skill whenever the user wants to "create a Claude Code pack", "build a rules/hooks/skills collection", "make a guardrail pack", "package my hooks/skills/agents", "publish a Claude Code config to GitHub", or assemble enforced standards for a stack (e.g. Next.js + Supabase, Django, etc.). This skill is the methodology that produced github.com/m-binimran/dev-pack; reuse it instead of re-deriving the process. Run it BEFORE writing any pack files — it sequences research, clarification, building, verification, and safe publishing.
Audit a web page/component against WCAG 2.2 AA — semantics, keyboard, contrast, labels, focus, alt text. Use when reviewing UI for accessibility or before shipping a page.
Design Next.js route handlers and server actions with input validation, correct status codes, error handling, and rate limiting. Use when building an API endpoint, server action, or webhook receiver.
Get Next.js App Router caching right — static vs dynamic rendering, fetch cache, revalidatePath/revalidateTag, and ISR. Use when data is stale, a page won't update, or you're tuning performance vs freshness.
Build a production React component on shadcn/ui + Tailwind — variants, compound pattern, accessible states, and a clean prop API. Use when creating a new UI component or refactoring a messy one.
Safely back up and restore a Postgres/Supabase database — pg_dump/pg_restore, Supabase backups/PITR, and a no-data-loss restore runbook. Use before risky migrations, for disaster recovery, or when cloning prod to staging.
| name | animation-implement |
| description | Implement web animations with the right engine (Motion, GSAP, Anime.js, React Spring, tailwindcss-motion) and a mandatory prefers-reduced-motion fallback at 60fps. Use when adding any motion to a site. |
Pick one primary engine, animate cheap properties, and never ship motion without a reduced-motion path.
| Need | Tool |
|---|---|
| React enter/exit, layout, stagger | Motion (motion/react) |
| Scroll timelines, pinning, parallax | GSAP + ScrollTrigger (useGSAP) |
| SVG path draw / morph | Anime.js (strokeDashoffset) |
| Physics / drag | React Spring |
| Zero-JS micro-interaction | tailwindcss-motion classes |
| Prebuilt animated marketing bits | Magic UI |
Primary = Motion (UI) or GSAP (cinematic scroll). Use the other sparingly. Don't ship both heavily.
reduced-motion-guard hook checks this)useReducedMotion() → zero distance/duration when reduced.if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; before building the timeline.@media (prefers-reduced-motion: reduce) reset.transform + opacity. No animating width/top/left (layout thrash).return () => tl.kill()).