From framer-pack
Implements Framer event handling via WebSocket subscriptions, webhook signature validation, and plugin events for secure CMS synchronization.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin framer-packThis skill is limited to using the following tools:
Framer's Server API uses a WebSocket channel for real-time communication, not traditional REST webhooks. For event-driven integrations, you subscribe to changes via the WebSocket connection or set up your own webhook endpoints that trigger Framer sync via the Server API.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Framer's Server API uses a WebSocket channel for real-time communication, not traditional REST webhooks. For event-driven integrations, you subscribe to changes via the WebSocket connection or set up your own webhook endpoints that trigger Framer sync via the Server API.
import { framer } from 'framer-api';
async function watchChanges() {
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
// Subscribe to collection changes
const collections = await client.getCollections();
for (const col of collections) {
col.subscribe((items) => {
console.log(`Collection "${col.name}" updated: ${items.length} items`);
});
}
}
// Receive webhook from your CMS, sync to Framer
import express from 'express';
import { framer } from 'framer-api';
const app = express();
app.use(express.json());
app.post('/webhooks/cms-update', async (req, res) => {
const { event, data } = req.body;
// Validate webhook source
const signature = req.headers['x-webhook-signature'];
if (!verifySignature(req.body, signature as string)) {
return res.status(401).json({ error: 'Invalid signature' });
}
if (event === 'content.updated') {
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
const col = (await client.getCollections()).find(c => c.name === data.collection);
if (col) {
await col.setItems(data.items.map(i => ({ fieldData: i })));
await client.publish();
console.log(`Synced ${data.items.length} items and published`);
}
}
res.json({ received: true });
});
// Inside a Framer plugin — subscribe to canvas changes
import { framer } from 'framer-plugin';
// Watch for selection changes
framer.subscribeToSelection((selection) => {
console.log('Selection changed:', selection.length, 'layers');
});
// Watch for code file changes
framer.subscribeToCodeFiles((codeFiles) => {
console.log('Code files updated:', codeFiles.map(f => f.name));
});
For performance, see framer-performance-tuning.