ReddRadar
Agent skill
framer-reference-architecture
Implement Framer reference architecture with best-practice project layout. Use when designing new Framer integrations, reviewing project structure, or establishing architecture standards for Framer applications. Trigger with phrases like "framer architecture", "framer best practices", "framer project structure", "how to organize framer", "framer layout".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/framer-pack/skills/framer-reference-architecture
SKILL.md
Framer Reference Architecture
Overview
Production architecture for Framer integrations covering plugins, Server API CMS sync, code components, and automated publishing pipelines.
Architecture Diagram
┌─────────────────────────────────────────────┐
│ Framer Editor │
│ ┌──────────┐ ┌───────────┐ ┌──────────┐ │
│ │ Plugins │ │ Code │ │ Code │ │
│ │ (iframe) │ │ Components│ │ Overrides│ │
│ └────┬─────┘ └───────────┘ └──────────┘ │
│ │ framer-plugin SDK │
├───────┴──────────────────────────────────────┤
│ Framer CMS │
│ ┌──────────────┐ ┌───────────────────┐ │
│ │ Managed │ │ Unmanaged │ │
│ │ Collections │ │ Collections │ │
│ └──────┬───────┘ └───────────────────┘ │
├─────────┴────────────────────────────────────┤
│ Server API (WebSocket) │
│ framer-api package │
└─────────┬────────────────────────────────────┘
│
┌─────────┴────────────────────────────────────┐
│ Your Backend │
│ ┌────────────┐ ┌──────────┐ ┌──────────┐ │
│ │ CMS Sync │ │ Webhook │ │ CI/CD │ │
│ │ Service │ │ Handler │ │ Pipeline │ │
│ └────────────┘ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────┘
Project Structure
framer-integration/
├── plugin/ # Framer editor plugin
│ ├── src/
│ │ ├── App.tsx # Plugin UI
│ │ ├── hooks/ # Plugin state hooks
│ │ └── cms/ # CMS sync logic
│ ├── vite.config.ts
│ └── package.json
├── server/ # Server API backend
│ ├── src/
│ │ ├── sync.ts # CMS sync service
│ │ ├── publish.ts # Auto-publish logic
│ │ └── webhooks.ts # External webhook handlers
│ └── package.json
├── components/ # Shared code components
│ ├── AnimatedCounter.tsx
│ ├── DataList.tsx
│ └── index.ts
├── overrides/ # Shared code overrides
│ ├── animations.tsx
│ └── interactions.tsx
└── .env.example
Integration Patterns
| Pattern | When | How |
|---|---|---|
| Plugin CMS Sync | User-initiated sync | Plugin UI → managed collection |
| Server API Sync | Automated/scheduled | Node.js → Server API WebSocket |
| CI/CD Publish | On content change | GitHub Actions → Server API → publish |
| Webhook Bridge | External CMS events | Webhook → your API → Server API |
Decision Matrix
| Need | Solution |
|---|---|
| Custom UI in editor | Framer Plugin |
| Headless CMS sync | Server API |
| Custom interactive elements | Code Components |
| Modify existing animations | Code Overrides |
| Automated publishing | Server API + CI/CD |
Resources
Next Steps
Start with framer-install-auth to set up your development environment.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jeremylongshore/claude-code-plugins-plus-skills
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?