Official Webflow Agent Skills
28 chapters · 2 hours 50 minutes · 38,079 words
28 chapters · 170 min
npx skills add webflow/webflow-skills/plugin marketplace add webflow/webflow-skillsTypeset in this issue’s own colours, resolved from the awesome-design-md registry.
A collection of Agent Skills (opens in a new tab) 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.
These skills work with any agent that supports the Agent Skills standard, including Claude Code, Cursor, and others.
main, last pushed 5 August 2026.SKILL.md, not by matching a directory convention. One layout observed: plugins/webflow-skills/skills/*/SKILL.md.h1 and no skipped levels:Install using the plugin marketplace (opens in a new tab):
# Add the marketplace
claude plugin marketplace add webflow/webflow-skills
# Install the plugin
claude plugin install webflow-skills@webflow-skillsInstall from the Cursor Marketplace or add manually via Settings > Rules > Add Rule > Remote Rule (Github) with webflow/webflow-skills.
Install using the npx skills (opens in a new tab) CLI:
npx skills add https://github.com/webflow/webflow-skillsClone this repo and copy the skill folders into the appropriate directory for your agent:
| Agent | Skill Directory | Docs |
|---|---|---|
| Claude Code | ~/.claude/skills/ | docs (opens in a new tab) |
| Cursor | ~/.cursor/skills/ | docs (opens in a new tab) |
| OpenCode | ~/.config/opencode/skills/ | docs (opens in a new tab) |
| OpenAI Codex | ~/.codex/skills/ | docs (opens in a new tab) |
| Pi | ~/.pi/agent/skills/ | docs (opens in a new tab) |
Webflow MCP Server and CLI Tooling
Site, CMS, audit, Designer, and publishing skills require the Webflow MCP server (opens in a new tab) to be installed and configured. CLI and Code Component workflows also require Node.js and the Webflow CLI.
For detailed setup instructions, visit the Webflow MCP Documentation (opens in a new tab).
All skills ship from the single webflow-skills plugin.
| 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-mcp:figma-to-webflow | Build pages, sections, components, or full sites from Figma designs using Figma MCP and Webflow MCP |
| 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 |
| 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 |
Guided, educational skills from Webflow University (opens in a new tab) that teach MCP workflows hands-on.
| Skill | Description |
|---|---|
| webflow-university:mcp-getting-started | Guided onboarding for your first Webflow MCP workflow — checks your connection, helps you pick a real task, coaches your prompt, and runs it with you |
MIT
.claude-plugin/marketplace.json by Webflow, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree./webflow/webflow-skills.md, and each chapter at its own .md URL.