メニュー
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)