framer-deploy-integration
Deploy Framer integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Framer-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy framer", "framer Vercel", "framer production deploy", "framer Cloud Run", "framer Fly.io".
Best use case
framer-deploy-integration is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Deploy Framer integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Framer-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy framer", "framer Vercel", "framer production deploy", "framer Cloud Run", "framer Fly.io".
Teams using framer-deploy-integration should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/framer-deploy-integration/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How framer-deploy-integration Compares
| Feature / Agent | framer-deploy-integration | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Deploy Framer integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Framer-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy framer", "framer Vercel", "framer production deploy", "framer Cloud Run", "framer Fly.io".
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# Framer Deploy Integration
## Overview
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.
## Instructions
### Step 1: Vercel Serverless (CMS Sync API)
```typescript
// 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 });
}
```
```bash
vercel env add FRAMER_API_KEY production
vercel env add FRAMER_SITE_ID production
vercel --prod
```
### Step 2: Fly.io (Long-Running Sync Service)
```bash
fly secrets set FRAMER_API_KEY=framer_sk_...
fly secrets set FRAMER_SITE_ID=abc123
fly deploy
```
### Step 3: Webhook Receiver for Content Updates
```typescript
// 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 });
}
```
## Output
- Serverless CMS sync endpoint
- Webhook handler for content update automation
- Platform secrets configured
## Resources
- [Framer Server API](https://www.framer.com/developers/server-api-introduction)
- [Vercel Serverless](https://vercel.com/docs/functions)
## Next Steps
For webhook patterns, see `framer-webhooks-events`.Related Skills
running-integration-tests
Execute integration tests validating component interactions and system integration. Use when performing specialized testing. Trigger with phrases like "run integration tests", "test integration", or "validate component interactions".
research-to-deploy
Researches infrastructure best practices and generates deployment-ready configurations, Terraform modules, Dockerfiles, and CI/CD pipelines. Use when the user needs to deploy services, set up infrastructure, or create cloud configurations based on current best practices. Trigger with phrases like "research and deploy", "set up Cloud Run", "create Terraform for", "deploy this to AWS", or "generate infrastructure configs".
workhuman-deploy-integration
Workhuman deploy integration for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman deploy integration".
workhuman-ci-integration
Workhuman ci integration for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman ci integration".
wispr-deploy-integration
Wispr Flow deploy integration for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr deploy integration".
wispr-ci-integration
Wispr Flow ci integration for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr ci integration".
windsurf-ci-integration
Integrate Windsurf Cascade workflows into CI/CD pipelines and team automation. Use when automating Cascade tasks in GitHub Actions, enforcing AI code quality gates, or setting up Windsurf config validation in CI. Trigger with phrases like "windsurf CI", "windsurf GitHub Actions", "windsurf automation", "cascade CI", "windsurf pipeline".
webflow-deploy-integration
Deploy Webflow-powered applications to Vercel, Fly.io, and Google Cloud Run with proper secrets management and Webflow-specific health checks. Trigger with phrases like "deploy webflow", "webflow Vercel", "webflow production deploy", "webflow Cloud Run", "webflow Fly.io".
webflow-ci-integration
Configure Webflow CI/CD with GitHub Actions — automated CMS validation, integration tests with test tokens, and publish-on-merge workflows. Use when setting up automated testing or CI pipelines for Webflow integrations. Trigger with phrases like "webflow CI", "webflow GitHub Actions", "webflow automated tests", "CI webflow", "webflow pipeline".
vercel-deploy-preview
Create and manage Vercel preview deployments for branches and pull requests. Use when deploying a preview for a pull request, testing changes before production, or sharing preview URLs with stakeholders. Trigger with phrases like "vercel deploy preview", "vercel preview URL", "create preview deployment", "vercel PR preview".
vercel-deploy-integration
Deploy and manage Vercel production deployments with promotion, rollback, and multi-region strategies. Use when deploying to production, configuring deployment regions, or setting up blue-green deployment patterns on Vercel. Trigger with phrases like "deploy vercel", "vercel production deploy", "vercel promote", "vercel rollback", "vercel regions".
veeva-deploy-integration
Veeva Vault deploy integration for REST API and clinical operations. Use when working with Veeva Vault document management and CRM. Trigger: "veeva deploy integration".