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".

Zur Installation springen

Repository: jeremylongshore/claude-code-plugins-plus-skills
Letzte Quellaktivität: 17. Juli 2026 um 22:18
Erkannte Sprache von SKILL.md: Englisch
Sterne: 2.604
Forks: 378

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill framer-reference-architecture

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

clerk-core-workflow-a

Implement user sign-up and sign-in flows with Clerk. Use when building authentication UI, customizing sign-in experience, or implementing OAuth social login. Trigger with phrases like "clerk sign-in", "clerk sign-up", "clerk login flow", "clerk OAuth", "clerk social login".

2026-07-23

clerk-core-workflow-b

Implement session management and middleware with Clerk. Use when managing user sessions, configuring route protection, or implementing token refresh and custom JWT templates. Trigger with phrases like "clerk session", "clerk middleware", "clerk route protection", "clerk token", "clerk JWT".

2026-07-23

clerk-enterprise-rbac

Configure enterprise SSO, role-based access control, and organization management. Use when implementing SSO integration, configuring role-based permissions, or setting up organization-level controls. Trigger with phrases like "clerk SSO", "clerk RBAC", "clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".

2026-07-23

Alle aus diesem Repository ansehen

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.

name	framer-reference-architecture
description	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".
allowed-tools	Read, Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["saas","framer"]
compatibility	Designed for Claude Code

name	framer-reference-architecture
description	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".
allowed-tools	Read, Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <jeremy@intentsolutions.io>
tags	["saas","framer"]
compatibility	Designed for Claude Code

framer-reference-architecture

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository