Help us improve
Share bugs, ideas, or general feedback.
From framer-pack
Installs and configures Framer authentication for editor plugins or Server API. Scaffolds Vite+React plugin projects and sets up API keys with env vars.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packHow this skill is triggered — by the user, by Claude, or both
Slash command
/framer-pack:framer-install-authThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Set up the Framer Plugin SDK for building editor plugins, or the `framer-api` package for Server API access. Framer has two developer surfaces: **Plugins** (run inside the Framer editor UI) and **Server API** (run from any Node.js server via WebSocket).
Sets up Vite-powered local dev for Framer plugins with hot-reload to editor, TypeScript/React components, and Vitest testing for logic.
Expert guidance for Framer design, Framer Motion animations, interactive prototyping, production site building, and CMS/MCP integration. Activates automatically when working on Framer sites or animations.
Sets up local dev workflows for Figma plugins and REST API integrations with esbuild watch mode, hot reload, Vitest testing, and design token extraction.
Share bugs, ideas, or general feedback.
Set up the Framer Plugin SDK for building editor plugins, or the framer-api package for Server API access. Framer has two developer surfaces: Plugins (run inside the Framer editor UI) and Server API (run from any Node.js server via WebSocket).
| Type | Package | Use Case |
|---|---|---|
| Plugin | framer-plugin | UI that runs inside Framer editor |
| Server API | framer-api | Headless CMS sync, CI/CD publishing |
| Code Components | React in Framer | Custom components on the canvas |
| Code Overrides | React in Framer | Modify existing component behavior |
# Scaffold a new plugin project
npx create-framer-plugin@latest my-plugin
cd my-plugin
npm install
npm run dev
This creates a Vite + React project with the framer-plugin package pre-configured. The plugin runs inside Framer's editor iframe.
npm install framer-api
// server.ts — Server API connection
import { framer } from 'framer-api';
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!, // From site settings
siteId: process.env.FRAMER_SITE_ID!,
});
// List all CMS collections
const collections = await client.getCollections();
console.log('Collections:', collections.map(c => c.name));
# .env (NEVER commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123def456
# .gitignore
.env
.env.local
Open Framer, go to your project, click Plugins > Development > select your local plugin. The dev server hot-reloads into the editor.
// Plugin verification — runs inside Framer editor
import { framer } from 'framer-plugin';
export function App() {
const handleTest = async () => {
const selection = await framer.getSelection();
console.log('Selected layers:', selection.length);
framer.notify(`Found ${selection.length} selected layers`);
};
return <button onClick={handleTest}>Test Connection</button>;
}
| Error | Cause | Solution |
|---|---|---|
Plugin not showing | Dev server not running | Run npm run dev and reload Framer |
Invalid API key | Wrong key or site ID | Generate new key in site settings |
WebSocket connection failed | Network/firewall | Allow outbound WSS connections |
framer-plugin not found | Missing dependency | Run npm install framer-plugin |
After setup, proceed to framer-hello-world for your first plugin or component.