Skip to main content

Quick Start

This guide will help you get started with Webflow Agent Skills by walking through a common use case: setting up webhook verification.

Prerequisites

1

Install the skills

First, install Webflow Agent Skills using the Skills CLI:
npx skills add 224-industries/webflow-skills
Or install just the webhooks skill:
npx skills add 224-industries/webflow-skills --skill webflow-webhooks
2

Verify installation

Confirm the skills are available to your AI agent by checking your agent’s skills configuration or asking it to list installed skills.

Example: Webflow Webhook Verification

Let’s use the webflow-webhooks skill to create a secure webhook handler that verifies incoming Webflow events.
1

Ask your agent to create a webhook handler

With the skill installed, you can now ask your AI agent:
"Create a Node.js webhook handler that receives and verifies Webflow webhook events"
The agent will use the webflow-webhooks skill to generate code that follows Webflow’s security best practices.
2

Review the generated code

Your agent will generate code similar to this:
const crypto = require('crypto');
const express = require('express');
const app = express();

app.use(express.json());

app.post('/webhook', (req, res) => {
  const signature = req.headers['x-webflow-signature'];
  const webhookSecret = process.env.WEBFLOW_WEBHOOK_SECRET;
  
  // Verify webhook signature
  const hash = crypto
    .createHmac('sha256', webhookSecret)
    .update(JSON.stringify(req.body))
    .digest('hex');
  
  if (hash !== signature) {
    return res.status(401).send('Invalid signature');
  }
  
  // Handle the webhook event
  const { triggerType, data } = req.body;
  
  console.log('Webhook received:', triggerType);
  console.log('Data:', data);
  
  res.status(200).send('Webhook received');
});

app.listen(3000, () => {
  console.log('Webhook server running on port 3000');
});
3

Deploy and test

The agent can help you:
  • Set up environment variables
  • Deploy the webhook handler
  • Configure the webhook in Webflow
  • Test with sample events

Working with Other Skills

Each skill provides specialized capabilities for different Webflow features:

Webflow Designer API

Build Designer Extensions or generate code for the Playground:
"Create a Designer Extension that adds a button to insert a pre-styled card component"

Webflow Code Components

Create React components for Webflow:
"Build a React code component with a text prop and image prop that I can import into Webflow"

Webflow Browser API

Manage tracking and consent:
"Add code to integrate OneTrust consent management with Webflow Analyze"

Webflow Enterprise API

Work with Enterprise endpoints:
"Fetch audit logs for my workspace using the Webflow Enterprise API"

Skill Discovery

Your AI agent automatically knows when to use each skill based on your request. The skills include:
  • Detailed API references - Complete documentation for all Webflow APIs
  • Code examples - Production-ready patterns and snippets
  • Best practices - Security, performance, and design guidelines
  • Helper scripts - Utilities to search and navigate references
Skills work across any AI agent that supports the Agent Skills standard, including Claude, Cursor, Playbooks, Context7, and Gumloop.

Next Steps

Webflow Browser API

Control Webflow Analyze and Optimize from JavaScript

Webflow Code Components

Build React code components for Webflow

Webflow Designer API

Build Designer Extensions and API integrations

Webflow Enterprise API

Access Enterprise-only API endpoints

Webflow Webhooks

Handle Webflow events securely

Resources

Try asking your agent to explain what each skill does or to show you examples from the skill’s reference documentation.

Build docs developers (and LLMs) love