Webflow Agent Skills by 224 Industries
AI coding agents are good at writing code. They're not so good at writing code for platforms they don't know much about. If you've ever asked Claude Code or Cursor to build a Webflow Designer Extension and received a hallucinated API that doesn't exist, you know what I mean.
We built five open-source Agent Skills that give coding agents the context they need to work with Webflow properly. They're MIT-licensed, free, and work across any agent that supports the open Agent Skills standard.
What Are Agent Skills?
Agent Skills are folders of instructions, scripts, and reference docs that AI agents can discover and load on demand. Think of them as knowledge packs. When an agent encounters a task it doesn't have enough context for (like building a Webflow Designer Extension), it reads the relevant skill and gets up to speed.
The format was originally developed by Anthropic and released as an open standard. It's now supported by a growing list of agent products including OpenAI Codex, Claude Code, Cursor, GitHub Copilot, Gemini CLI, OpenCode, Roo Code, Factory's Droid, and many others.
Each skill contains a SKILL.md file (the entry point), reference documentation, and helper scripts. Agents parse these files to understand how an API works, what patterns to follow, and what mistakes to avoid.
Why We Built These
224 Industries is a Webflow Premium Partner based in Brisbane, Australia. Since 2016, we've been building marketing websites for tech and SaaS companies like Easy Agile, Clear Dynamics, and Giraffe.
We use AI coding agents daily in our development workflow. The problem? Webflow's APIs are well-documented on their site, but agents don't have that documentation in their context window when they're writing code. The result is guesswork, hallucinated methods, and broken output.
Agent Skills fix this. Instead of agents guessing how the Webflow Designer API works, they can read accurate, structured reference docs at the point they need them. Our team's output quality improved immediately after we started using these skills internally, so we decided to open-source them.
The Five Skills
Here's what we released:
1. webflow-designer-api
Work with the Webflow Designer API, either by building Designer Extensions (iframes inside the Webflow Designer) or by generating code snippets for the Designer API Playground. Covers element manipulation, styles, components, pages, variables, assets, error handling, CLI usage, and UI design patterns.
This is the skill we use most. It includes references for every webflow.* method, plus workflow-specific guides for building extensions vs. prototyping in the Playground.
2. webflow-browser-api
Control Webflow Analyze and Optimize from JavaScript via the Browser API. Covers the global wf object, consent management (with CMP integrations for OneTrust and TrustArc), experiment variation tracking, and custom visitor attributes.
Useful when you need to manage tracking consent, integrate a CMP, or personalise experiences based on visitor attributes.
3. webflow-code-components
Build, define, and import React code components into Webflow using DevLink. Covers declareComponent definitions, all 11 prop types, Shadow DOM styling, Webpack bundling, SSR behaviour, and the CLI import workflow.
If you're building custom React components for Webflow, this skill gives agents full context on how DevLink works, from prop type definitions to framework-specific styling guides for Tailwind, Emotion, Material UI, and others.
4. webflow-webhooks
Receive and verify Webflow webhooks. Includes HMAC-SHA256 signature verification, all 14 event types with payload schemas, setup guides for both dashboard and API-created webhooks, and common debugging patterns.
The skill includes working code examples for Express.js webhook handlers with proper signature verification and timestamp validation.
5. webflow-enterprise-api
Enterprise-only API endpoints for workspace management, audit logs, site activity, 301 redirects, robots.txt configuration, and well-known files. Covers all endpoints, required scopes, and pagination.
This one is only relevant if you're on a Webflow Enterprise workspace, but it fills a gap where agents otherwise have zero context on these endpoints.
How to Install
The fastest way is with the Vercel skills CLI:
# Install all five skills
npx skills add 224-industries/webflow-skills
# Install just one
npx skills add 224-industries/webflow-skills --skill webflow-designer-api
# See what's available
npx skills add 224-industries/webflow-skills --list
If you're using Claude Code or Factory's Droid, you can add them as a plugin:
/plugin add 224-industries/webflow-skills
They also work with the CLIs by Playbooks and Context7:
# Playbooks
npx playbooks add skill 224-industries/webflow-skills
# Context7
npx ctx7 skills install /224-industries/webflow-skills
How They're Structured
Each skill follows the Agent Skills specification. The structure looks like this:
skills/webflow-designer-api/
├── SKILL.md # Entry point with overview and reference index
├── references/ # Detailed API docs, guides, and examples
│ ├── elements-api.md
│ ├── styles-api.md
│ ├── components-api.md
│ └── ...
├── scripts/
│ └── search_references.py # Search references by tag or keyword
└── assets/
└── webflow-variables.css # Design system variables
The SKILL.md file acts as a table of contents. It gives the agent a high-level overview and tells it where to find detailed reference docs. Agents typically read the skill file first, then pull in the specific references they need for the task at hand.
Every reference file includes YAML frontmatter with name, description, and tags so agents (and humans) can search across them:
python scripts/search_references.py --search "consent"
python scripts/search_references.py --tag "styles"
What We Learned Building These
A few things stood out during development.
Concise beats comprehensive. Early versions of our skills were too long. Agents have limited context windows, and stuffing every edge case into one file made them slower and less accurate. Breaking content into focused reference files that agents load on demand produced better results.
Structure matters more than prose. Tables, code examples, and clear headings are more useful to agents than paragraphs of explanation. Agents parse structured content faster and produce more accurate code when they can pattern-match against examples.
Frontmatter enables discoverability. Adding tags and descriptions to every reference file lets agents search for what they need rather than reading everything. The search scripts in each skill make this even easier.
Contributing
The repo is open for contributions. If you spot inaccuracies, want to add more examples, or have ideas for new Webflow-related skills, PRs are welcome.
You can also use the included script to scaffold new skills:
node scripts/add-skill.js <skill-name> "<description>"
This creates the folder structure and updates all manifest files automatically.
Frequently Asked Questions
What agents support Agent Skills?
The Agent Skills format is supported by Claude Code, Cursor, GitHub Copilot (via VS Code), Gemini CLI, Roo Code, OpenHands, Goose, Factory Droid, and many more. The full list of compatible agents is available on agentskills.io.
Do I need a Webflow Enterprise plan to use these skills?
No. Four of the five skills work with any Webflow plan. The webflow-enterprise-api skill covers Enterprise-only endpoints, so you'll need an Enterprise workspace for that one. The webflow-browser-api skill requires Analyze or Optimize to be enabled on your site.
Can I use these skills without Claude Code?
Yes. Agent Skills are an open standard and work with any compatible agent. You can install them with the npx skills CLI, Playbooks, or Context7, depending on which agent you're using.
Are these officially maintained by Webflow?
No. These skills are built and maintained by 224 Industries, a Webflow Premium Partner. The reference content is sourced from Webflow's official documentation and kept up to date by our team.
npx build-skill
Build your own Agent Skills with npx build-skill
Memberstack Agent Skills
Integrate Memberstack Agent Skills for the Memberstack CLI and other parts of Memberstack ecosystem. The perfect skills for those building on Webflow and Memberstack.
Built by Ben Sabic, Fractional CTO at 224 Industries.
Top comments (0)