메뉴
Break a PRD or feature description into discrete, actionable work items ordered by dependency. Outputs a numbered list of tasks ready to implement one at a time, each small enough to complete in a single session.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Scaffold a new motion-* web component end-to-end — TypeScript source, types file, Vite build entry, package.json subpath export, src/index.ts re-export, and a docs page. Use when the user asks to add, scaffold, or create a new component named like motion-X.
Audit the codebase for animation primitive violations, duplicated animation logic, composition opportunities, and architectural drift. Produces a prioritized list of improvements with specific file locations.
Ask focused clarifying questions before building any new component or feature. Forces shared understanding of animation behavior, props API, trigger conditions, accessibility, and done criteria BEFORE writing any code.
Turn a vague component idea or feature request into a structured Product Requirements Document covering purpose, props API, animation behavior spec, accessibility, and docs structure. Use before implementing anything non-trivial.
Run pre-publish verification for the motion-components package — typecheck, preload-rule check, library build, and bundle size budget. Use before bumping the version or running npm publish.
Spec-first development loop for motion components — define the types contract and observable behavior before writing any implementation code, then implement to match the spec. Prevents drift between intent and code.
| name | tasks |
| description | Break a PRD or feature description into discrete, actionable work items ordered by dependency. Outputs a numbered list of tasks ready to implement one at a time, each small enough to complete in a single session. |
Take a PRD (from /plan) or any feature description and decompose it into a numbered list of discrete, self-contained work items. Each issue must be small enough to implement and verify in a single focused session. Order them by dependency so they can be executed top-to-bottom without backtracking.
/plan produces a spec and you're ready to start breaking groundProduce a numbered list. Each issue follows this template:
### Issue N: <short title>
**Goal:** One sentence — what will be true when this issue is done.
**Files touched:** List the files that will be created or modified.
**Inputs:** What must exist before this issue can start (previous issue numbers, or "none").
**Steps:**
1. ...
2. ...
**Done when:** Specific, observable condition. (e.g., "`npx tsc --noEmit` passes", "the docs preview renders the animation", "the prop is reflected as an attribute in DevTools")
When the input is a new component, always produce issues in this order:
<tag>.types.ts with the props interface. No implementation yet.<tag>.ts with LitElement shell, all @property declarations, static styles, and a no-op render(). No animation logic yet. Wire Vite entry + src/index.ts re-export + package.json export.<DocsPreview>, <CodeWindow>, and <PropsTable>. Component must be visually complete.npx tsc --noEmit and fix all errors. This is always the final issue.For site-only features (no new component), collapse as appropriate but keep typecheck as the last issue.
After issues are defined, execute them top-to-bottom using the new-component skill (.claude/skills/new-component/SKILL.md) for new components, or follow the project's standard edit workflow for modifications.
plan skill (.claude/skills/plan/SKILL.md)new-component skill (.claude/skills/new-component/SKILL.md)style-guide skill (.claude/skills/style-guide/SKILL.md)spec-first skill (.claude/skills/spec-first/SKILL.md)release skill (.claude/skills/release/SKILL.md)