webflow / webflow-skills
★ 99A skill package that teaches your agent 12 capabilities — every one documented and browsable below, no GitHub required · by webflow.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates…
1 file — installable on its own
Analyze assets on a Webflow site for SEO optimization. Identifies assets missing alt text and assets with non-SEO-friendly names, then generates and applies…
1 file — installable on its own
Create or update multiple CMS items in a Webflow collection with validation and diff preview. Use when adding multiple blog posts, products, or updating fields…
1 file — installable on its own
cms-best-practices — an installable skill for AI agents, published by webflow/webflow-skills.
1 file — installable on its own
Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team members, portfolios, or other…
1 file — installable on its own
Add, review, or remove inline custom scripts on a Webflow site (up to 10,000 chars). Use for analytics, tracking pixels, chat widgets, or any custom…
1 file — installable on its own
Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or…
1 file — installable on its own
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions.…
1 file — installable on its own
Find and fix broken or insecure links across an entire site, including CMS content, to improve SEO and user experience. Audits HTTP/HTTPS issues and validates…
1 file — installable on its own
Publish a Webflow site with a plan-confirm-publish workflow. Shows what changed since last publish, runs pre-publish checks, and requires explicit confirmation…
1 file — installable on its own
Query and summarize site activity logs for a Webflow enterprise site. Surfaces recent changes, identifies who made them, and generates human-readable activity…
1 file — installable on its own
Comprehensive audit of a Webflow site including pages, CMS collections, health scoring, and actionable insights. Use for site analysis, migration planning, or…
1 file — installable on its own
Webflow Skills
A collection of Agent Skills for working with Webflow sites through the Webflow MCP server. Manage CMS content, audit site health, optimize assets, build in Webflow Designer, create Code Components, run Webflow CLI workflows, and safely publish changes.
Installing
These skills work with any agent that supports the Agent Skills standard, including Claude Code, Cursor, and others.
Claude Code
Install using the plugin marketplace:
# Add the marketplace
claude plugin marketplace add webflow/webflow-skills
# Install the plugin
claude plugin install webflow-skills@webflow-skillsCursor
Install from the Cursor Marketplace or add manually via Settings > Rules > Add Rule > Remote Rule (Github) with webflow/webflow-skills.
npx skills
Install using the npx skills CLI:
npx skills add https://github.com/webflow/webflow-skillsClone / Copy
Clone this repo and copy the skill folders into the appropriate directory for your agent:
| Agent | Skill Directory | Docs |
|---|---|---|
| Claude Code | ~/.claude/skills/ | docs |
| Cursor | ~/.cursor/skills/ | docs |
| OpenCode | ~/.config/opencode/skills/ | docs |
| OpenAI Codex | ~/.codex/skills/ | docs |
| Pi | ~/.pi/agent/skills/ | docs |
Prerequisites
Webflow MCP Server and CLI Tooling
Site, CMS, audit, Designer, and publishing skills require the Webflow MCP server to be installed and configured. CLI and Code Component workflows also require Node.js and the Webflow CLI.
What You Need
- Webflow Account - Active Webflow account with sites
- Webflow MCP Server - Installed and configured in your MCP environment
- Node.js and Webflow CLI - Required for Webflow CLI and Code Component workflows
- Compatible Agent - Any agent with MCP and skills support enabled
Quick Setup
- Add the Webflow MCP server to your agent's MCP configuration
- Authenticate with your Webflow account when prompted
- Verify the connection by listing your Webflow sites
For detailed setup instructions, visit the Webflow MCP Documentation.
Skills
All skills ship from the single webflow-skills plugin.
Webflow MCP Skills
| Skill | Description |
|---|---|
| webflow-mcp:bulk-cms-update | Batch create/update CMS items with validation and preview |
| webflow-mcp:cms-collection-setup | Create collections with custom fields and relationships (16 field types) |
| webflow-mcp:cms-best-practices | Expert guidance on CMS architecture and optimization |
| webflow-mcp:compress-cms-image | Compress and convert CMS item image fields to webp or avif |
| webflow-mcp:site-audit | Comprehensive health check with scoring (0-100) and recommendations |
| webflow-mcp:asset-audit | Identify optimization opportunities for images and files |
| webflow-mcp:link-checker | Scan and fix broken/insecure links across pages and CMS content |
| webflow-mcp:accessibility-audit | WCAG 2.1 compliance check with detailed reports and fixes |
| webflow-mcp:safe-publish | Preview, confirm, publish workflow with verification |
| webflow-mcp:custom-code-management | Manage tracking scripts and custom code safely |
| webflow-mcp:flowkit-naming | Apply Webflow's official FlowKit CSS naming conventions |
| webflow-mcp:designer-tools | Build and manage page structure, elements, components, and styles in Webflow Designer |
Webflow CLI Skills
| Skill | Description |
|---|---|
| webflow-cli:cloud | Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting |
| webflow-cli:devlink | Export Webflow Designer components to React/Next.js code for external projects |
| webflow-cli:designer-extension | Build Designer Extensions for custom Webflow Designer functionality |
| webflow-cli:code-component | Create and deploy reusable React components for Webflow Designer |
| webflow-cli:troubleshooter | Diagnose and fix Webflow CLI issues including installation, auth, build, and bundle problems |
Webflow Code Component Skills
| Skill | Description |
|---|---|
| webflow-code-component:component-scaffold | Generate new Code Component boilerplate with React component and definition file |
| webflow-code-component:convert-component | Convert an existing React component into a Webflow Code Component |
| webflow-code-component:component-audit | Audit Code Components for architecture decisions and Shadow DOM compatibility |
| webflow-code-component:deploy-guide | Step-by-step guide for deploying Code Components to a workspace |
| webflow-code-component:local-dev-setup | Initialize a new Code Components project from scratch |
| webflow-code-component:pre-deploy-check | Pre-deployment validation for bundle size, dependencies, SSR compatibility |
| webflow-code-component:troubleshoot-deploy | Debug deployment failures with root cause analysis and fixes |
Resources
- Webflow MCP Documentation
- Prompt Library - Ready-to-use example prompts
- Available Tools - Complete tool reference
- Agent Skills - Learn about the Agent Skills standard
License
MIT
Install the whole package (12 skills):
npx skills add https://github.com/webflow/webflow-skillsOr install a single skill:
npx skills add https://github.com/webflow/webflow-skills --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.