Menü
分析 React 项目的框架、依赖、SSR 边界、样式体系和已有动画能力，形成后续动画库选型与实现的技术上下文。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| 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根据动效目标和 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 时使用。