Tools: Five Webflow Agent Skills So AI Coding Agents Can Actually Work With Webflow

Webflow Agent Skills by 224 Industries ## What Are Agent Skills? ## Why We Built These ## The Five Skills ## 1. webflow-designer-api ## 2. webflow-browser-api ## 3. webflow-code-components ## 4. webflow-webhooks ## 5. webflow-enterprise-api ## How to Install ## How They're Structured ## What We Learned Building These ## Contributing ## Frequently Asked Questions ## What agents support Agent Skills? ## Do I need a Webflow Enterprise plan to use these skills? ## Can I use these skills without Claude Code? ## Are these officially maintained by Webflow? ## npx build-skill ## Memberstack Agent Skills 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. Repo: github.com/224-industries/webflow-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. 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. Here's what we released: 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. 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. 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. 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. 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. The fastest way is with the Vercel skills CLI: If you're using Claude Code or Factory's Droid, you can add them as a plugin: They also work with the CLIs by Playbooks and Context7: Each skill follows the Agent Skills specification. The structure looks like this: 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: 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. 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: This creates the folder structure and updates all manifest files automatically. 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. 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. 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. 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. Build your own Agent Skills with npx build-skill 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. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: # 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 Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # 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 COMMAND_BLOCK: # 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 CODE_BLOCK: /plugin add 224-industries/webflow-skills Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: /plugin add 224-industries/webflow-skills CODE_BLOCK: /plugin add 224-industries/webflow-skills COMMAND_BLOCK: # Playbooks npx playbooks add skill 224-industries/webflow-skills # Context7 npx ctx7 skills install /224-industries/webflow-skills Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # Playbooks npx playbooks add skill 224-industries/webflow-skills # Context7 npx ctx7 skills install /224-industries/webflow-skills COMMAND_BLOCK: # Playbooks npx playbooks add skill 224-industries/webflow-skills # Context7 npx ctx7 skills install /224-industries/webflow-skills COMMAND_BLOCK: 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 Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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 COMMAND_BLOCK: 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 CODE_BLOCK: python scripts/search_references.py --search "consent" python scripts/search_references.py --tag "styles" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: python scripts/search_references.py --search "consent" python scripts/search_references.py --tag "styles" CODE_BLOCK: python scripts/search_references.py --search "consent" python scripts/search_references.py --tag "styles" COMMAND_BLOCK: node scripts/add-skill.js <skill-name> "<description>" Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: node scripts/add-skill.js <skill-name> "<description>" COMMAND_BLOCK: node scripts/add-skill.js <skill-name> "<description>"