Expert in Framer design and development - from interactive prototypes to production sites with Framer Motion, CMS integration, and the Framer MCP server
A comprehensive Claude Code skill for Framer design and development expertise, with integrated Framer MCP server support.
Activate the Framer Expert skill by using:
/skill framer-expert
Or simply type framer-expert to invoke the skill.
The Framer MCP server has been installed and configured. After restarting Claude Code, you'll have access to:
"How do I create a staggered list animation in Framer Motion?"
"Create a custom button component with hover effects and property controls"
"Analyze my Framer project structure and suggest optimizations"
"How do I set up a blog with Framer CMS and dynamic routing?"
Fade In:
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
/>
Spring Animation:
<motion.div
animate={{ scale: 1.2 }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}
/>
Hover Effect:
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
/>
Stagger Children:
<motion.ul
variants={containerVariants}
initial="hidden"
animate="visible"
>
{items.map((item) => (
<motion.li variants={itemVariants}>{item}</motion.li>
))}
</motion.ul>
1.0.0 - Initial release with MCP integration
Note: After installing the Framer MCP server, restart Claude Code to enable MCP functionality.
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer