skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

framer-expert

Builds Framer sites, Framer Motion animations, and CMS-driven pages with MCP project access.

1|Updated Aug 18, 2026
Search Tags:#react#mcp#prototyping#animation#cms#framer#framer motion
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill framer-expert-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-expert
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/framer-expert
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill framer-expert-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing and shipping Framer projects requires juggling prototyping, Framer Motion animation code, CMS setup, and production optimization, and this Skill consolidates that expertise into one guided workflow with direct MCP access to live Framer projects. ## Core Features & Use Cases - Framer MCP Integration: List projects, query components and variants, retrieve CMS collections, and monitor builds through the Model Context Protocol. - Framer Motion Patterns: Copy-paste-ready code for springs, staggered lists, scroll-triggered parallax, layout animations, drag gestures, and page transitions with AnimatePresence. - Production Site Building: Custom code components with property controls, CMS collections with dynamic routing, responsive breakpoint strategies, and performance optimization. - Use Case: Ask how to create a smooth page transition and receive three implementation methods (prototype connector, AnimatePresence code, shared element layoutId) with performance guidance. ## Quick Start Ask the agent to create a staggered list animation in Framer Motion or to analyze your Framer project structure via the MCP server.

Frequently Asked Questions about framer-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a staggered list animation in Framer Motion?▼

Define container variants with staggerChildren and delayChildren, then define item variants for hidden and visible states. Apply the container variants to the parent motion element and item variants to each child motion.li element.

How do I add property controls to a Framer code component?▼

Use addPropertyControls from the framer package with ControlType options like String, Color, Number, Boolean, and EventHandler. Each control appears in the Framer design panel so designers can configure the component without editing code.

What can the Framer MCP server do?▼

The Framer MCP server lists projects, queries project structure and components, retrieves CMS collections, and monitors builds and deployments. It enables programmatic auditing, design token extraction, and automated component documentation.

Does Framer Motion support reduced motion accessibility?▼

Yes, use the useReducedMotion hook to detect the user's prefers-reduced-motion setting and conditionally disable or simplify animations. The skill recommends this alongside GPU-accelerated transform and opacity animations.

Why do Framer Motion animations cause performance issues?▼

Animating width or height forces layout recalculation instead of GPU compositing. Animate transform and opacity instead, use will-change sparingly, lazy-load off-screen animations, and keep transitions under 0.5 seconds.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

ux-ui-design

Design UX/UI experiences from user research through interactive prototypes.

Community
Advanced
travisjneumantravisjneuman
88

seo-analytics-auditor

Audit website SEO, verify analytics implementations, and check Core Web Vitals.

Community
Intermediate
AtlasRoXAtlasRoX

frontend-patterns

Provides curated React and Next.js frontend development patterns with TypeScript code snippets.

Community
Intermediate
AnXueHuaAnXueHua

web-design-reviewer

Detect and fix visual design issues in web applications via browser automation.

Community
Intermediate