메뉴
Use when a site needs the smooth entrance and scroll-reveal animations that make a page feel alive and crafted, to add tasteful motion with a real animation library rather than ad-hoc transitions.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when several pieces of work are genuinely independent and can run at once, to fan them out across parallel agents instead of doing them in sequence. Cuts wall-clock time and keeps each strand in its own clean context.
Use when a written plan exists and you are about to build it in the current session, to work it task by task with a checkpoint after each. Keeps execution honest against the plan instead of drifting into a freehand build.
Use when work needs its own isolated checkout — parallel strands that would fight over files, or a risky change you want quarantined from the main tree. Gives each strand a real working directory on its own branch without re-cloning.
Use whenever the user says "use slipstream", "use superpowers", or starts any task in a project that has slipstream. A hard, always-on discipline that forces scoped reads over whole-file reads to save tokens, recalls memory before acting, and records what is durable every turn so memory grows constantly.
Use when a site needs to look designed rather than defaulted, before building sections: establish a cohesive design system of type scale, spacing, colour, radius and shadow tokens so every component shares one premium visual language.
Use when building the top of a landing page, to produce a high-impact hero with confident display type, a clear single call to action and balanced composition, the kind of opening a polished marketing site leads with.
| name | frontend-motion |
| description | Use when a site needs the smooth entrance and scroll-reveal animations that make a page feel alive and crafted, to add tasteful motion with a real animation library rather than ad-hoc transitions. |
| slipstream | {"category":"frontend","requires":["frontend-vite-react"],"verification":{"kind":"build","description":"The app builds with the motion library and animations in place.","command":"pnpm --dir {{appName}} build"},"tags":["design","motion","polish"]} |
The "designed in a tool" feel is often motion: elements that ease in as they enter the viewport, hover states that respond, transitions that are smooth rather than instant. This skill adds that with a dedicated animation library so the motion is consistent and accessible, not a pile of one-off CSS transitions.
motion, the successor to framer-motion) as a dependency.viewport={{ once: true }} so sections reveal as the user reaches them and do not replay.prefers-reduced-motion: gate the animations so users who ask for less motion get an instant, static layout. Motion is an enhancement, never a requirement to read the page.Build the app and confirm it compiles with the motion library, then load the page and check that sections fade and rise into view on scroll, and that enabling reduced-motion in the OS turns the animations off without breaking the layout.