Webflow agent skills for Claude Code, Cursor and RevampKey

5 ready-made playbooks that teach an AI agent how to do real Webflow work: which tools to call, what to check first, and when to stop and ask you.

Download RevampKey, free I have it: connect Webflow

Connect Webflow once and all 5 skills install themselves and stay up to date. Mac, Windows and Linux.

All 5 Webflow skills

Each skill is one job. You ask in plain words and the agent loads the skill that matches, then follows its steps.

Start hereRead-only16 Webflow tools

Use the Webflow connector safely

Teaches the agent to confirm the workspace and site, choose the right Webflow tool, keep results small and ask before changing anything on a live site.

Use it when

Before any read or edit on a Webflow site through the connector
When two Webflow tools could both answer the request
When a Webflow call fails on permissions or the Designer bridge

Tools it uses

data_sites_tool
data_pages_tool
data_cms_tool
data_scripts_tool
data_element_tool
data_element_builder
data_style_tool
data_variable_tool
data_component_tool
data_component_builder
asset_tool
data_assets_tool
data_fonts_tool
data_analyze_tool
ask_webflow_ai
data_agent_instructions_tool

Example

Check the About page on my marketing site and tell me what it contains, without changing anything.

I'm connected to the Acme workspace and the site "Acme Marketing" (live). The About page has 6 sections: hero, team grid with 4 members, a timeline, a logo strip, a contact form and a footer. Nothing was changed. The Designer was not needed for this read. Not checked: custom code on the page.

Use in RevampKeyRead the full skill →

Read-only2 Webflow tools

Review your Webflow CMS content with AI

Reviews CMS collection items for empty required fields, stale content, placeholder text and locale gaps, and reports what needs attention. It reads first and asks before changing any item.

Use it when

You want to find placeholder or half-finished blog posts before a launch.
You need to know which items are missing a translation in a secondary locale.
You are cleaning up an old collection and want to see what is out of date.

Tools it uses

data_sites_tool
data_cms_tool

Example

Review my Blog Posts collection for empty fields, outdated posts and missing German translations.

I checked 412 items in Blog Posts across the English and German locales. Of those, 9 published posts have an empty hero image, 3 reference a deleted author, 27 were last updated over 18 months ago, and 373 have no problems I could detect. I haven't changed anything; tell me which group to act on.

Use in RevampKeyRead the full skill →

Read-only6 Webflow tools

Check your Webflow design system for drift

Audits a Webflow site's styles, variables, colour schemes, typography and components for duplicates, hard-coded values and breakpoint drift, and ranks fixes by risk. It only reads and asks before changing anything.

Use it when

Before a design system refactor, to see what is duplicated or orphaned
When the same colour or font size keeps appearing with slightly different values
When components seem to have drifted apart over time

Tools it uses

data_sites_tool
data_variable_tool
data_style_tool
data_element_tool
data_pages_tool
data_component_tool

Example

Check my Webflow site's design system for duplicate classes and hard-coded colours before I refactor it.

I found 3 near-duplicate colour tokens and 6 hard-coded hex values that match a token exactly. Two card title classes are near-duplicates, and one is applied on 14 pages. I haven't changed anything. Here are the fixes ranked by risk, and I'll wait for your approval before editing.

Use in RevampKeyRead the full skill →

Read-only5 Webflow tools

Audit a Webflow site for SEO and AEO

Checks whether your Webflow pages are reachable and indexable, then reviews titles, meta descriptions, headings, alt text and structured data. It returns a read-only list of fixes ranked by impact and never changes the site without your approval.

Use it when

Before launch, to confirm key pages can be found and indexed
When a page is not ranking and you want to know why
When you need a prioritised fix list for an SEO or answer-engine push

Tools it uses

data_sites_tool
data_pages_tool
data_sitemap_tool
data_element_tool
data_scripts_tool

Example

Audit the SEO and AEO of my marketing site and tell me the top fixes by impact.

I checked 24 static pages on the marketing site. Two high-impact issues: the pricing page is excluded from search, and the homepage has no H1. Eleven pages share the same title, so I have listed that as one pattern. I have not changed anything; I can draft the new titles and meta text for your approval.

Use in RevampKeyRead the full skill →

Read-only3 Webflow tools

Audit a Webflow site's custom code with AI

Reads a site's head, body and page-level custom code and registered scripts, then ranks duplicates and risky third-party includes by impact. It only reads and never edits or publishes without asking.

Use it when

A site feels slow and you suspect a third-party script in the head
Analytics numbers look doubled after a tracking snippet was added
You inherited a Webflow site and want to know what code it runs before touching it

Tools it uses

data_sites_tool
data_scripts_tool
data_pages_tool

Example

Audit the custom code on my marketing site and tell me what is risky or duplicated, without changing anything.

I read the site-level code and sampled 12 of 48 pages. The analytics tag is loaded twice, once at site level and once on the pricing page, which likely doubles your page views. A chat widget is loaded from an unpinned URL on every page, so it can change without notice. I found 3 dead registered scripts. I have made no changes; tell me which to act on first.

Use in RevampKeyRead the full skill →

Get all 5 without copying a file

RevampKey adds the skills when you connect Webflow, updates them for you and removes them when you disconnect.

Download RevampKey

How Webflow skills work

Connect Webflow
The Webflow MCP server gives the agent its tools.
Ask in plain words
“Review my Blog Posts collection for empty fields, outdated posts and missing German translations.” Each SKILL.md says when it applies, so only the one that fits is loaded.
Approve any change
The agent calls the tools in order, checks its work, and shows you any change before it makes it.

How to install Webflow skills

In RevampKey the skills install themselves when you connect Webflow. In other tools each skill is one folder with a SKILL.md file, and you also need the Webflow MCP server connected there.

About 1 minute · nothing to copy

Download RevampKey for Mac, Windows or Linux and sign in.
Open Connectors and connect Webflow. All 5 skills come with it and stay up to date; they go away when you remove the connector.
Ask in plain language, for example “Review my Blog Posts collection for empty fields, outdated posts and missing German translations.”
Download RevampKeyConnect Webflow · 1 click
Get RevampKey to connect Webflow
RevampKey is a free desktop app for Mac, Windows and Linux. Install it, sign in, and Webflow is one click away with its skills already attached.
Download RevampKey
Not now? Use the skills in your current tool
for s in essentials cms-content-review design-system-consistency-check seo-and-aeo-audit site-custom-code-audit; do curl -fsSL --create-dirs -o .claude/skills/webflow-$s/SKILL.md https://revampkey.com/marketplace/webflow/skills/$s/SKILL.md done
Other tools

Into this project’s .claude/skills folder

Connect the Webflow MCP server in Claude Code.

Run this in your project folder to add all 5 skills:

for s in essentials cms-content-review design-system-consistency-check seo-and-aeo-audit site-custom-code-audit; do
  curl -fsSL --create-dirs -o .claude/skills/webflow-$s/SKILL.md https://revampkey.com/marketplace/webflow/skills/$s/SKILL.md
done

Ask in plain language, for example “Review my Blog Posts collection for empty fields, outdated posts and missing German translations.”

Into the shared .agents/skills folder

Connect the Webflow MCP server in Cursor.

Run this in your project folder to add all 5 skills:

for s in essentials cms-content-review design-system-consistency-check seo-and-aeo-audit site-custom-code-audit; do
  curl -fsSL --create-dirs -o .agents/skills/webflow-$s/SKILL.md https://revampkey.com/marketplace/webflow/skills/$s/SKILL.md
done

Ask in plain language, for example “Review my Blog Posts collection for empty fields, outdated posts and missing German translations.”

Into the shared .agents/skills folder

Connect the Webflow MCP server in Codex.

Run this in your project folder to add all 5 skills:

for s in essentials cms-content-review design-system-consistency-check seo-and-aeo-audit site-custom-code-audit; do
  curl -fsSL --create-dirs -o .agents/skills/webflow-$s/SKILL.md https://revampkey.com/marketplace/webflow/skills/$s/SKILL.md
done

Ask in plain language, for example “Review my Blog Posts collection for empty fields, outdated posts and missing German translations.”

Into the shared .agents/skills folder

Connect the Webflow MCP server in VS Code.

Run this in your project folder to add all 5 skills:

for s in essentials cms-content-review design-system-consistency-check seo-and-aeo-audit site-custom-code-audit; do
  curl -fsSL --create-dirs -o .agents/skills/webflow-$s/SKILL.md https://revampkey.com/marketplace/webflow/skills/$s/SKILL.md
done

Ask in plain language, for example “Review my Blog Posts collection for empty fields, outdated posts and missing German translations.”

RevampKey or copy the files?

In RevampKey

One click when you connect Webflow
Updated for you when a skill improves
Removed when you disconnect
The MCP server is set up for you
800+ other connectors, same way

Download free

Copy into your project

One command per project
Run it again to get updates
You connect the Webflow MCP server yourself
Works in Claude Code, Cursor, Codex and VS Code

See the command

Webflow skills FAQ

What is a Webflow agent skill?

A SKILL.md file: a short playbook an AI agent loads when your request matches it. Each Webflow skill describes one job, which Webflow tools to use in which order, what to check first and when to stop and ask you.

Do the Webflow skills change anything on their own?

5 of the 5 only read. The others tell the agent to show you the change and wait for a yes before it creates, edits or deletes anything in Webflow.

Which tools can use these skills?

Any agent that reads the open Agent Skills format: Claude Code, Cursor, Codex, VS Code with Copilot and RevampKey. In RevampKey they are attached when you connect Webflow; elsewhere you copy the folders into your project or skills directory.

Do I need the Webflow MCP server too?

Yes. The skills tell the agent how to do the work; the Webflow MCP server gives it the tools to do it. The Webflow MCP setup guide covers every client.

Webflow MCP server setup · This page as Markdown

Put Webflow’s best workflows in your agent

Download RevampKey, connect Webflow and ask your first question in about a minute.

Download RevampKey Connect Webflow · 1 click

All 5 Webflow skills

Use the Webflow connector safely

Use it when

Tools it uses

Review your Webflow CMS content with AI

Use it when

Tools it uses

Check your Webflow design system for drift

Use it when

Tools it uses

Audit a Webflow site for SEO and AEO

Use it when

Tools it uses

Audit a Webflow site's custom code with AI

Use it when

Tools it uses

Get all 5 without copying a file

How Webflow skills work

How to install Webflow skills

RevampKey or copy the files?

In RevampKey

Copy into your project

Webflow skills FAQ

Put Webflow’s best workflows in your agent

Skills for related tools