القائمة
分析 React 项目的框架、依赖、SSR 边界、样式体系和已有动画能力，形成后续动画库选型与实现的技术上下文。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
根据动效目标和 React 项目上下文，在 CSS、WAAPI、Framer Motion、GSAP、Lottie、Remotion 等方案之间做合理取舍，并输出可执行选型结论。
对 React 动效实现做闭环验证，检查性能、SSR、reduced motion、清理逻辑和代码维护性，确保结果适合真实项目交付。
将模糊的 React 动效诉求拆解为明确的动画目标、触发条件、范围边界和验收标准，为后续项目分析与选型提供清晰输入。
将已选定的动画方案映射为 React 组件、页面、样式和依赖改动，直接完成动效代码实现，并保持代码可维护。
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 时使用。
استنادا إلى تصنيف SOC المهني
| name | react-project-context-analysis |
| description | 分析 React 项目的框架、依赖、SSR 边界、样式体系和已有动画能力，形成后续动画库选型与实现的技术上下文。 |
| license | MIT |
| allowed-tools | react-project-context-scanner react-project-context-scanner-verifier |
| metadata | {"author":"Aki workspace","version":"1.0.0","category":"design","estimated_tokens":"2200"} |
在改动代码前，先建立 React 项目的技术画像，避免脱离上下文进行错误选型或引入不必要依赖。
motion / framer-motiongsap@lottiefiles、lottie-reactuse clientreact-project-context-scanner 并用对应 verifier 检查输出完整性。{
"framework": "nextjs",
"react_version": "19.x",
"typescript": true,
"styling": ["tailwind"],
"existing_motion_libs": ["gsap"],
"ssr": true,
"sensitive_surfaces": ["hero", "home-above-the-fold"],
"implementation_notes": [
"avoid client-heavy animation on first paint"
]
}
A: 要。已有依赖会影响优先级，但不代表任何场景都必须继续使用同一个库。
A: 在 Next.js、RSC、App Router 或任何需要首屏服务端渲染的项目里，都要优先检查客户端动效边界。
motion-requirement-alignmentanimation-library-selectionreact-motion-implementation