菜单
Expert guidance for high-performance, accessible animations using Motion (formerly Framer Motion). Use when creating or refining UI transitions, layout animations, or complex component interactions in React.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Expert implementation of AI workflows using LangGraph and CrewAI. Use when building multi-agent systems, stateful graphs, or complex tool-use scenarios.
Expert guidance for vector database management and RAG workflows using ChromaDB. Use when implementing semantic search, document embeddings, or agentic memory.
Professional FastAPI development for high-performance AI backends. Use when building async APIs, implementing Pydantic models, or integrating with LangGraph and SQL databases.
Expert guidance for building high-performance React applications with Monaco Editor integration. Use when implementing IDE-like features, real-time collaboration, or complex UI states with Zustand and Socket.IO.
Advanced management of application state and data storage using SQLite and Redis. Use when implementing persistent storage, caching layers, or session management.
Advanced Tailwind CSS patterns for scalable, maintainable, and stunning UIs. Use for component styling, theme configuration, or optimizing bundle sizes.
| name | framer-motion |
| description | Expert guidance for high-performance, accessible animations using Motion (formerly Framer Motion). Use when creating or refining UI transitions, layout animations, or complex component interactions in React. |
motion/react (v11+). Import from motion/react.opacity and transform (x, y, scale, rotate).style={{ willChange: "transform, opacity" }} for frequent animations.layout prop for size/position changes; use layoutId for shared element transitions.useReducedMotion. Maintain semantic HTML (e.g., <motion.button>).Use named variants instead of inline objects to keep code clean and enable staggering.
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}
Wrap conditional elements in <AnimatePresence> and provide exit variants. Use mode="wait" for sequential transitions.
Use whileHover, whileTap, and whileInView for declarative interactive feedback.
useScroll / useTransform: Scroll-linked effects (parallax, progress).useAnimate: Imperative sequence control.useSpring: Tactile, natural-feeling interactions.motion/react imported correctly?AnimatePresence used where needed?