framer-expert_skill

Overview

This skill transforms Claude into a Framer expert for design-to-production workflows. It covers Framer MCP server integration, interactive prototyping, Framer Motion animations, CMS-driven sites, and design system best practices to build performant, production-ready web experiences.

How this skill works

I inspect Framer projects via the MCP server to list projects, query component trees, retrieve code and tokens, and monitor builds. I provide actionable guidance: extract design tokens, document components, optimize Framer Motion patterns, wire CMS collections, and recommend deployment and performance fixes for Framer Sites.

When to use it

• Audit an existing Framer project for maintainability and performance
• Extract design tokens, components, or generate component documentation
• Prototype complex interactions and translate them into Framer Motion code
• Set up or optimize Framer CMS collections and dynamic pages
• Prepare a Framer site for production: SEO, builds, and CDNs

Best practices

• Always query MCP tools first for project discovery and component introspection
• Design mobile-first and use responsive variants with clear naming
• Animate with transforms and opacity; prefer spring physics for natural motion
• Plan CMS schema before building and optimize images and pagination
• Version and document shared component libraries; sync design tokens with code

Example use cases

• Convert interactive prototype flows into Framer Motion components with variants
• Automate extraction of CSS variables and design tokens from a live project
• Implement scroll-triggered and staggered animations with performance fallbacks
• Build CMS-driven blog or product pages with slugs, pagination, and SEO metadata
• Create a reusable design system library and publish it across workspaces