Agent skill

Framer Webhooks Events

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Implement Framer webhook signature validation and event handling.

MITAuto-check passedBackend & APIs

Install Framer Webhooks Events

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-webhooks-events -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace framer-webhooks-events --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/framer-webhooks-events .claude/skills/framer-webhooks-events && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
framer-webhooks-events
GitHub stars
2.8k
Token cost
~944 tokens
SKILL.md length
155 words
Files
1
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Implement Framer webhook signature validation and event handling.

  • Works in 3 steps: Subscribe to CMS Changes via Server API → External Webhook → Framer Sync → Plugin Event Subscriptions
  • Setting up webhook endpoints
  • SKILL.md covers Prerequisites, Error Handling, Examples and Overview, plus 4 more sections
  • Needs FRAMER_API_KEY

What it does

Framer Webhooks Events is an agent skill from jeremylongshore/tons-of-skills-marketplace. 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".

Its SKILL.md is about 940 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Designed for Claude Code

It sits in Backend & APIs, covering Webhooks. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Setting up webhook endpoints
  • Implementing signature verification
  • Handling Framer event notifications securely
  • With phrases like framer webhook

Example prompts

  • “framer webhook”
  • “framer events”
  • “framer webhook signature”
  • “/framer-webhooks-events”

Requirements

  • A credential in FRAMER_API_KEY
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(curl:*)

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Subscribe to CMS Changes via Server API
  2. External Webhook → Framer Sync
  3. Plugin Event Subscriptions

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(curl:*)

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • framer.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FRAMER_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Framer Webhooks Events loads about 944 tokens when it runs. Until then it costs about 88 tokens; SKILL.md has 155 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~88
When it runs · the whole SKILL.md, loaded when a task matches
~944

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 155 words, ~944 tokens.

Download SKILL.mdSave it as .claude/skills/framer-webhooks-events/SKILL.md (or your agent's skills folder).
name
framer-webhooks-events
description
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".
allowed-tools
Read, Write, Edit, Bash(curl:*)
compatibility
Designed for Claude Code
version
1.5.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, framer

Framer Webhooks & Events

Prerequisites

Approved event source/destinations, signing or authentication controls where supported, event ledger, redaction policy, and synthetic fixtures.

Error Handling

Reject unknown event schemas/destinations, deduplicate replayed events, bound retries, and pause downstream actions on access or privacy failures.

Examples

Deliver a fictional event twice, process it once under an opaque ID, and reject an unknown destination without forwarding page or visitor data.

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

Next Steps

For performance, see framer-performance-tuning.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/.curated/framer-webhooks-events of jeremylongshore/tons-of-skills-marketplace.

Open the folder on GitHubat commit cfae287

Compare with similar skills

Framer Webhooks Events next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Framer Webhooks Events compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Framer Webhooks Events this skilljeremylongshore/tons-of-skills-marketplace2.8k—~944Automated safety check: PassMIT
Novu Design Workflownovuhq/novu40k—~2.6kAutomated safety check: PassCustom licence
Golivemikehasa/golive-skill1.3k—~13kAutomated safety check: NotesMIT
Stripe Appsfossasia/eventyay1.7k1 repos~3.6kAutomated safety check: PassApache-2.0
Dingtalk Messageagentscope-ai/ReMe3.6k—~1.6kAutomated safety check: PassApache-2.0
PR Review Provideryansongda/pay5.4k—~2.4kAutomated safety check: PassMIT

Similar skills

  • Design notification workflows the Novu way — choose channels, set severity, decide when a workflow is critical, configure digests, and route based on subscriber state.

    40k GitHub stars~2.6k tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Golive

    mikehasa/golive-skill

    Take an agent-written app from repo to live production on the user's OWN accounts, with providers they choose (hosting, database, auth, payments, email, domain/DNS).

    1.3k GitHub stars~13k tokensUpdated 7 days ago
    Backend & APIsAuto-check: notes
  • Stripe Apps

    fossasia/eventyay

    A skill your agent uses when building, modifying, or reviewing a Stripe App — or when the user describes something that implies one (e.g.

    1.7k GitHub starsUsed in 1 repo~3.6k tokens
    Backend & APIsAuto-check passed
  • Dingtalk Message

    agentscope-ai/ReMe

    钉钉消息发送技能。支持企业内部机器人(批量单聊/群聊)和 Webhook 自定义机器人两种接入方式,支持多机器人管理,支持文本、Markdown、链接、ActionCard、FeedCard等多种消息类型。

    3.6k GitHub stars~1.6k tokensUpdated 2 days ago
    Backend & APIsAuto-check passed
  • PR Review Provider

    yansongda/pay

    A skill your agent uses when reviewing PRs that add or modify a payment Provider in yansongda/pay - covers plugin pipeline, multi-tenant safety, signature verification, docs, and naming conventions.

    5.4k GitHub stars~2.4k tokensUpdated 3 days ago
    Backend & APIsAuto-check passed
  • Stripe Best Practices

    kanchengw/cnllm

    Guides Stripe integration decisions — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup (Accounts v2, controller properties), billing/subscriptions, Treasury financial…

    173 GitHub starsUsed in 2 repos~925 tokens
    Backend & APIsAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo
  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes
  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed
  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Framer Webhooks Events

What does Framer Webhooks Events do?

Implement Framer webhook signature validation and event handling. Framer Webhooks Events is an agent skill from jeremylongshore/tons-of-skills-marketplace. Implement Framer webhook signature validation and event handling.

When should I use Framer Webhooks Events?

Framer Webhooks Events fits situations like: setting up webhook endpoints; implementing signature verification; handling Framer event notifications securely; with phrases like framer webhook.

How do I install Framer Webhooks Events in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-webhooks-events -a claude-code`. Or copy the skill folder (skills/.curated/framer-webhooks-events in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/framer-webhooks-events in your project. Claude Code loads it when a task matches its description.

How do I install Framer Webhooks Events in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-webhooks-events -a codex`. Or copy the skill folder (skills/.curated/framer-webhooks-events in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/framer-webhooks-events in your project. Codex loads it when a task matches its description.

Can I use Framer Webhooks Events in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-webhooks-events -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/framer-webhooks-events, .gemini/skills/framer-webhooks-events, .github/skills/framer-webhooks-events and .opencode/skills/framer-webhooks-events in your project.

What does Framer Webhooks Events need to run?

Going by SKILL.md and its folder, Framer Webhooks Events needs credentials named FRAMER_API_KEY. Our summary lists: A credential in FRAMER_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(curl:*). Compatibility (from SKILL.md): Designed for Claude Code.

Does Framer Webhooks Events access the network?

SKILL.md names 1 domain. As links in the text: framer.com. This is read from the text; nothing was executed.

Is Framer Webhooks Events safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Framer Webhooks Events use?

Framer Webhooks Events is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Framer Webhooks Events use?

About 944 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Framer Webhooks Events?

Skills that share tags, products or a category with Framer Webhooks Events: Novu Design Workflow (novuhq/novu, 40k stars), Golive (mikehasa/golive-skill, 1.3k stars), Stripe Apps (fossasia/eventyay, 1.7k stars) and Dingtalk Message (agentscope-ai/ReMe, 3.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Framer Webhooks Events?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.