Twenty Agent Skills for driving a Webflow site with Claude. CMS architecture, bulk updates, publishing safely, accessibility and SEO audits, custom code, Webflow Cloud, the CLI, and the MCP setup that makes it all work.
These are the working instructions from a real Webflow operation, not a tutorial written for GitHub. They exist because the same mistakes kept happening: an agent creating a collection field it cannot delete, publishing to production without checking what changed, or assuming the Designer API can do something only the Data API can. Each skill carries the fix.
Drop them into your skills directory. Project level:
git clone https://github.com/bkoleo/webflow-skills.git
mkdir -p .claude/skills
cp -R webflow-skills/skills/* .claude/skills/Or download the pack if you would rather not clone.
Or user level, so they work in every project:
cp -R webflow-skills/skills/* ~/.claude/skills/Claude picks a skill up automatically when the task matches its description. You can also invoke one by name.
Most of these assume the Webflow MCP server is connected. Start with webflow-mcp-guide, which covers the two connection routes and the difference between what the Data API and the Designer API can each reach. That distinction causes more wasted time than anything else here.
| Skill | What it does |
|---|---|
webflow-mcp-guide |
Driving Webflow with an AI agent. The headless-versus-Designer split, and which tool reaches what. Read this first. |
safe-publish |
Plan, confirm, publish. Shows what changed since the last publish and runs pre-flight checks before anything goes live. |
cms-best-practices |
CMS architecture: collections, relationships, and the decisions that are painful to reverse. |
cms-collection-setup |
Create a collection with fields and relationships. |
bulk-cms-update |
Create or update many CMS items with validation and a diff preview before writing. |
site-audit |
Whole-site audit: pages, collections, health score, actions. |
accessibility-audit |
WCAG 2.1 pass over buttons, forms, links and focus states. |
link-checker |
Broken and insecure links across the site, CMS content included. |
asset-audit |
Assets missing alt text, and assets with names that waste the SEO. |
seo-keyword-optimizer |
Titles and meta descriptions across static pages and CMS items, with a before/after table for approval. |
custom-code-management |
Inline custom scripts, site and page level, within Webflow's character limits. |
components-guide |
Create, edit, reuse and safely delete components, including the marketer-facing assembly workflow. |
interactions-guide |
Webflow Interactions recipes, including the looping marquee that everyone rebuilds badly. |
flowkit-naming |
Applying the Flowkit CSS naming system consistently. |
ai-code-components |
Stateful React components inside Webflow via Generate with AI. |
webflow-cloud |
Deploying Next.js or Astro apps on Webflow Cloud, standalone or mounted on an existing site. |
webflow-cli |
Site, asset, CMS and form management from the terminal, plus DevLink. |
google-ads-in-webflow |
Performance Max campaigns through the Webflow Google Ads app. |
21st-magic |
Component generation via 21st.dev. |
ui-ux-pro-max |
Design intelligence: styles, palettes, font pairings, patterns. |
Publishing is the dangerous verb. safe-publish exists because an agent that can publish can put a half-finished change in front of your customers. Keep a human on that step.
CMS field deletion is not symmetrical with creation. Read cms-best-practices before you let an agent design a collection.
The Data API and the Designer API see different things. Some operations only work in one. webflow-mcp-guide has the map.
MIT. Take them, fork them, change them. No attribution required, though a star is welcome.
I am Kole Ogundipe. I build the AI agent systems that run marketing operations, and Webflow is where a lot of that work lands. These skills run against production sites daily.
If you want systems like this built into your own business, that is what I do: www.tripledouble.marketing
Not affiliated with Webflow.