Menu
将模糊的 React 动效诉求拆解为明确的动画目标、触发条件、范围边界和验收标准，为后续项目分析与选型提供清晰输入。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
根据动效目标和 React 项目上下文，在 CSS、WAAPI、Framer Motion、GSAP、Lottie、Remotion 等方案之间做合理取舍，并输出可执行选型结论。
对 React 动效实现做闭环验证，检查性能、SSR、reduced motion、清理逻辑和代码维护性，确保结果适合真实项目交付。
将已选定的动画方案映射为 React 组件、页面、样式和依赖改动，直接完成动效代码实现，并保持代码可维护。
分析 React 项目的框架、依赖、SSR 边界、样式体系和已有动画能力，形成后续动画库选型与实现的技术上下文。
Build, edit, and troubleshoot Remotion video projects and compositions. Use when Codex needs to create or refine React-based motion graphics, timed scenes, transitions, audio or video layering, still renders, or frame-driven animation inside a Remotion app.
Git 提交规范，涵盖 commit message 格式（feat/fix/refactor）、Issue 关联、分支命名、PR 提交准备、rebase 使用。当用户提交代码、编写 commit message、创建分支或准备 PR 时使用。
| name | motion-requirement-alignment |
| description | 将模糊的 React 动效诉求拆解为明确的动画目标、触发条件、范围边界和验收标准，为后续项目分析与选型提供清晰输入。 |
| license | MIT |
| metadata | {"author":"Aki workspace","version":"1.0.0","category":"planning","estimated_tokens":"1800"} |
把用户对 React 动效的模糊表达整理成可执行的需求结构，明确动效要服务的界面层级、触发方式、性能约束和不可触碰的边界。
react-project-context-analysis 和 animation-library-selection 直接使用。## Motion Goal
- 目标：
- 层级：
- 触发方式：
## Scope
- 影响范围：
- 是否允许新增依赖：
- 是否需要 SSR 兼容：
## Constraints
- 性能约束：
- 可访问性约束：
- 禁止项：
## Success Criteria
1. ...
2. ...
A: 优先把“酷”翻译成具体效果，例如更明确的入场节奏、更好的按钮反馈或更顺滑的页面切换，不直接放大为全页复杂动画。
A: 当需求涉及首屏复杂滚动联动、全页大面积动画、资源型动画或 SSR 场景下的强客户端依赖时。
react-project-context-analysisanimation-library-selection