Framer Motion Best Practices
by fratilanico · development · go, react, spring, refactoring, skill
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
Source: https://github.com/fratilanico/apex-os-bad-boy
Install
git clone https://github.com/fratilanico/apex-os-bad-boyTags: go, react, spring, refactoring, skill
⭐ 7 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
Framer Motion Best Practices is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- Code Edit Quality by fratilanico
SEARCH/REPLACE block patterns for precise code edits. Based on Cline's edit methodology for accurate file modifications.
- Context Window Stewardship by fratilanico
Use when context window is filling up, when agent responses degrade in quality over a long session, when deciding what to load into an agent's context vs keep in files, or when designing multi-agent systems where subagents need isolated contexts. Triggers on: context full, context rot, compaction, session degradation, token limit.
- Prompt Engineering Apex by fratilanico
Use when writing prompts for Claude or any LLM, when agent outputs are inconsistent or low quality, when structuring system prompts for APEX OS agents, or when implementing CoT/ToT reasoning patterns. Triggers on: prompt design, system prompt, instruction engineering, output quality, JSON schema enforcement.
- Rag Retrieval Patterns by fratilanico
Use when building or debugging RAG pipelines, when semantic search returns irrelevant results, when implementing hybrid BM25+dense retrieval, or when grounding LLM answers in document sources. Triggers on: retrieval augmented generation, vector search, embeddings, BM25, reranking, knowledge base.
- React Agent Loop by fratilanico
Use when building AI agents that need to reason and act in loops, when an agent needs to use tools iteratively, when implementing memory across agent turns, or when debugging an agent that gets stuck or loops infinitely. Triggers on: ReAct, agent loop, tool use, memory, LangChain, agent stuck.
- Shadcn Master by fratilanico
Shadcn UI, Radix UI, and Tailwind CSS component patterns for enterprise applications
- Supabase Expert by fratilanico
Use when building or debugging Supabase features — RLS policies, Auth flows, Storage rules, Edge Functions, and real-time subscriptions
- Tool Definition Patterns by fratilanico
Standards for defining AI agent tools based on Cline's system prompt patterns. Covers parameter typing, documentation, edit formats, safety mechanisms, and operational best practices.
Frequently asked questions
How do I install Framer Motion Best Practices?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support Framer Motion Best Practices?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is Framer Motion Best Practices free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.