Framer reference architecture

Skill jeremylongshore/claude-code-plugins-plus-skills/plugins/saas-packs/framer-pack/skills/framer-reference-architecture

425 plugins, 2,810 skills, 200 agents for Claude Code. Open-source marketplace at tonsofskills.com with the ccpi CLI package manager.

Install

npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill framer-reference-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

'Implement Framer reference architecture with best-practice project layout.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

5.0 KB, as published. Nobody here has run it

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.