Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From framer-pack
Deploys Framer Server API integrations like CMS sync and webhook handlers to Vercel, Fly.io, and Cloud Run. Configures secrets and production pipelines.
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-deploy-integrationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Deploy Framer Server API integrations (CMS sync services, webhook handlers) to cloud platforms. Framer sites themselves are hosted by Framer — this covers deploying your backend services that interact with Framer.
Sets up GitHub Actions CI/CD for Framer plugins: Vite builds, Vitest tests on PRs, CMS sync/publishing on main via Framer API, and repo secrets.
Deploys Figma webhook receivers and design token APIs to Vercel, Cloud Run, and Fly.io with secret management, verification, and health checks.
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.
Share bugs, ideas, or general feedback.
Deploy Framer Server API integrations (CMS sync services, webhook handlers) to cloud platforms. Framer sites themselves are hosted by Framer — this covers deploying your backend services that interact with Framer.
// api/sync-framer.ts — Vercel serverless function
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { framer } from 'framer-api';
export default async function handler(req: VercelRequest, res: VercelResponse) {
if (req.method !== 'POST') return res.status(405).end();
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
const { items, collectionName } = req.body;
const collections = await client.getCollections();
const col = collections.find(c => c.name === collectionName);
if (!col) return res.status(404).json({ error: 'Collection not found' });
await col.setItems(items);
await client.publish();
res.json({ synced: items.length, published: true });
}
vercel env add FRAMER_API_KEY production
vercel env add FRAMER_SITE_ID production
vercel --prod
fly secrets set FRAMER_API_KEY=framer_sk_...
fly secrets set FRAMER_SITE_ID=abc123
fly deploy
// api/webhook-handler.ts — receive webhooks from your CMS, sync to Framer
export default async function handler(req, res) {
const { event, data } = req.body;
if (event === 'content.published') {
const client = await framer.connect({ apiKey: process.env.FRAMER_API_KEY!, siteId: process.env.FRAMER_SITE_ID! });
// Sync updated content to Framer CMS
const col = (await client.getCollections()).find(c => c.name === 'Blog Posts');
if (col) await col.setItems([{ fieldData: data }]);
await client.publish();
}
res.json({ ok: true });
}
For webhook patterns, see framer-webhooks-events.