Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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".
.claude/skills/jeremylongshore-framer-reference-architecture/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-02 | ✗→✓ | ▲ Improved | 3% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 89% | 0% |
| case-05 | ✗→✓ | ▲ Improved | 30% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 34% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 96% | 0% |
Production architecture for Framer integrations covering plugins, Server API CMS sync, code components, and automated publishing pipelines.
┌─────────────────────────────────────────────┐
│ 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 │ │
│ └────────────┘ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────┘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| 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 |
| 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 |
Start with framer-install-auth to set up your development environment.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 21,421 | 16,389 | -23% | 1 | 1 | 0% | 2,916 | 3,203 | +10% | 0 | 0 | — |
case-02 | fail→pass | 22,172 | 21,645 | -2% | 1 | 1 | 0% | 3,668 | 3,784 | +3% | 0 | 0 | — |
case-03 | fail→pass | 27,197 | 31,780 | +17% | 1 | 1 | 0% | 3,328 | 6,276 | +89% | 0 | 0 | — |
case-04 | pass→pass | 12,520 | 13,631 | +9% | 1 | 1 | 0% | 2,129 | 2,487 | +17% | 0 | 0 | — |
case-05 | fail→pass | 13,589 | 17,240 | +27% | 1 | 1 | 0% | 2,382 | 3,087 | +30% | 0 | 0 | — |
case-06 | pass→pass | 11,986 | 11,810 | -1% | 1 | 1 | 0% | 1,991 | 2,884 | +45% | 0 | 0 | — |
case-07 | pass→pass | 14,994 | 16,021 | +7% | 1 | 1 | 0% | 2,652 | 2,867 | +8% | 0 | 0 | — |
case-08 | fail→pass | 21,532 | 19,904 | -8% | 1 | 1 | 0% | 2,652 | 3,547 | +34% | 0 | 0 | — |
case-09 | pass→pass | 13,920 | 13,865 | -0% | 1 | 1 | 0% | 1,486 | 2,521 | +70% | 0 | 0 | — |
case-10 | pass→pass | 20,635 | 17,782 | -14% | 1 | 1 | 0% | 2,721 | 3,101 | +14% | 0 | 0 | — |
case-11 | fail→pass | 17,109 | 16,535 | -3% | 1 | 1 | 0% | 2,336 | 4,588 | +96% | 0 | 0 | — |
case-12 | fail→pass | 10,721 | 8,801 | -18% | 1 | 1 | 0% | 1,918 | 2,451 | +28% | 0 | 0 | — |
case-13 | fail→pass | 8,123 | 6,887 | -15% | 1 | 1 | 0% | 1,367 | 2,130 | +56% | 0 | 0 | — |
case-14 | fail→pass | 10,675 | 1,943 | -82% | 1 | 1 | 0% | 2,015 | 1,181 | -41% | 0 | 0 | — |
case-15 | pass→pass | 11,206 | 9,686 | -14% | 1 | 1 | 0% | 1,146 | 2,982 | +160% | 0 | 0 | — |
case-16 | fail→pass | 11,281 | 3,597 | -68% | 1 | 1 | 0% | 1,326 | 1,511 | +14% | 0 | 0 | — |
case-17 | pass→pass | 11,669 | 3,028 | -74% | 1 | 1 | 0% | 1,262 | 1,462 | +16% | 0 | 0 | — |
case-18 | pass→pass | 8,613 | 5,724 | -34% | 1 | 1 | 0% | 1,623 | 1,885 | +16% | 0 | 0 | — |
case-19 | pass→pass | 9,124 | 6,468 | -29% | 1 | 1 | 0% | 1,354 | 2,232 | +65% | 0 | 0 | — |
case-20 | pass→pass | 5,443 | 10,584 | +94% | 1 | 1 | 0% | 1,277 | 2,157 | +69% | 0 | 0 | — |
case-21 | pass→pass | 11,877 | 12,264 | +3% | 1 | 1 | 0% | 1,563 | 2,466 | +58% | 0 | 0 | — |
case-22 | pass→pass | 6,652 | 10,136 | +52% | 1 | 1 | 0% | 1,481 | 1,899 | +28% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +41 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.