framer-webhooks-events
Implement Framer webhook signature validation and event handling. Use when setting up webhook endpoints, implementing signature verification, or handling Framer event notifications securely. Trigger with phrases like "framer webhook", "framer events", "framer webhook signature", "handle framer events", "framer notifications".
Best use case
framer-webhooks-events is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Implement Framer webhook signature validation and event handling. Use when setting up webhook endpoints, implementing signature verification, or handling Framer event notifications securely. Trigger with phrases like "framer webhook", "framer events", "framer webhook signature", "handle framer events", "framer notifications".
Teams using framer-webhooks-events 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-webhooks-events/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How framer-webhooks-events Compares
| Feature / Agent | framer-webhooks-events | 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?
Implement Framer webhook signature validation and event handling. Use when setting up webhook endpoints, implementing signature verification, or handling Framer event notifications securely. Trigger with phrases like "framer webhook", "framer events", "framer webhook signature", "handle framer events", "framer notifications".
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
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 Webhooks & Events
## Overview
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.
## Instructions
### Step 1: Subscribe to CMS Changes via Server API
```typescript
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`);
});
}
}
```
### Step 2: External Webhook → Framer Sync
```typescript
// 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 });
});
```
### Step 3: Plugin Event Subscriptions
```tsx
// 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));
});
```
## Output
- WebSocket-based real-time CMS subscriptions
- External webhook handler triggering Framer sync
- Plugin event subscriptions for canvas changes
## Resources
- [Framer Server API](https://www.framer.com/developers/server-api-introduction)
- [Plugin Subscriptions](https://www.framer.com/developers/reference)
## Next Steps
For performance, see `framer-performance-tuning`.Related Skills
workhuman-webhooks-events
Workhuman webhooks events for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman webhooks events".
wispr-webhooks-events
Wispr Flow webhooks events for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr webhooks events".
windsurf-webhooks-events
Build Windsurf extensions and integrate with VS Code extension API events. Use when building custom Windsurf extensions, tracking editor events, or integrating Windsurf with external tools via extension development. Trigger with phrases like "windsurf extension", "windsurf events", "windsurf plugin", "build windsurf extension", "windsurf API".
webflow-webhooks-events
Implement Webflow webhook registration, signature verification, and event handling for form_submission, site_publish, ecomm_new_order, page_created, and more. Use when setting up webhook endpoints, implementing event-driven workflows, or handling Webflow notifications. Trigger with phrases like "webflow webhook", "webflow events", "webflow webhook signature", "handle webflow events", "webflow notifications".
vercel-webhooks-events
Implement Vercel webhook handling with signature verification and event processing. Use when setting up webhook endpoints, processing deployment events, or building integrations that react to Vercel deployment lifecycle. Trigger with phrases like "vercel webhook", "vercel events", "vercel deployment.ready", "handle vercel events", "vercel webhook signature".
veeva-webhooks-events
Veeva Vault webhooks events for REST API and clinical operations. Use when working with Veeva Vault document management and CRM. Trigger: "veeva webhooks events".
vastai-webhooks-events
Build event-driven workflows around Vast.ai instance lifecycle events. Use when monitoring instance status changes, implementing auto-recovery, or building event-driven GPU orchestration. Trigger with phrases like "vastai events", "vastai instance monitoring", "vastai status changes", "vastai lifecycle events".
twinmind-webhooks-events
Handle TwinMind meeting events including transcription completion, action item extraction, and calendar sync notifications. Use when implementing webhooks events, or managing TwinMind meeting AI operations. Trigger with phrases like "twinmind webhooks events", "twinmind webhooks events".
together-webhooks-events
Together AI webhooks events for inference, fine-tuning, and model deployment. Use when working with Together AI's OpenAI-compatible API. Trigger: "together webhooks events".
techsmith-webhooks-events
TechSmith webhooks events for Snagit COM API and Camtasia automation. Use when working with TechSmith screen capture and video editing automation. Trigger: "techsmith webhooks events".
supabase-webhooks-events
Implement Supabase database webhooks, pg_net async HTTP, LISTEN/NOTIFY, and Edge Function event handlers with signature verification. Use when setting up database webhooks for INSERT/UPDATE/DELETE events, sending HTTP requests from PostgreSQL triggers, handling Realtime postgres_changes as an event source, or building event-driven architectures. Trigger with phrases like "supabase webhook", "database events", "pg_net trigger", "supabase LISTEN NOTIFY", "webhook signature verify", "supabase event-driven", "supabase_functions.http_request".
stackblitz-webhooks-events
WebContainer lifecycle events: server-ready, port changes, error handling. Use when working with WebContainers or StackBlitz SDK. Trigger: "webcontainer events".