> This page is for MCP Server. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developers.webflow.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server. # Skills > Production-ready agent skills for popular agents that work with the Webflow MCP server Skills are pre-built agent capabilities that help you accomplish common Webflow tasks through natural language. They work alongside the Webflow MCP server to provide specialized workflows for content management, site optimization, and safe publishing. > **Info** > > **Prerequisites** > > Skills require both: > > * **An agent** - An agent that supports skills > * **The Webflow MCP server** - Installed and configured in the agent > > If you haven't set up the MCP server yet, see the [getting started guide](/mcp/reference/getting-started). ## What are skills? Skills are specialized agent workflows that combine multiple MCP tools to accomplish specific tasks. Instead of manually orchestrating tool calls, you describe what you want and the skill handles the implementation details. For example, rather than: 1. Manually fetching collection schemas 2. Reading each item individually 3. Validating field requirements 4. Updating items one by one You can use the `bulk-cms-update` skill with a prompt like: ``` Update all blog posts to add a default featured image where missing ``` The skill automatically handles validation, generates a preview of changes, and asks for confirmation before applying updates. ## Installing skills To open an interactive installer that lets you select skills and the agents to install them in, run this command: ```bash npx skills add webflow/webflow-skills ``` For specific instructions for AI tools, select your AI tool below to begin: #### Claude Desktop #### Enable skills In Claude Desktop, go to **Settings > Capabilities** ensure that `Code execution and file creation` is enabled. #### Download the Webflow skills Download and extract the Webflow skills from this link: [https://github.com/webflow/webflow-skills/archive/refs/heads/main.zip](https://github.com/webflow/webflow-skills/archive/refs/heads/main.zip) Or go to [https://github.com/webflow/webflow-skills](https://github.com/webflow/webflow-skills) and download the repository compressed file or individual `SKILL.md` files from there. #### Install the skills 1. In Claude Desktop, go to **Customize > Skills**. 2. Click the **+** button and then click **Upload a skill**. 3. From the `plugins` folder of the file you downloaded and extracted, upload one `SKILL.md` file at a time. These files are in sub-folders in the compressed file. #### Try a skill Skills are automatically invoked when they are relevant to your task. For example, if you added the Accessibility Audit skill, Claude Desktop invokes it automatically when you give it a prompt that relates ot the skill, like this example: ``` Audit my Webflow site for accessibility issues ``` If the `accessibility-audit` skill is working, Claude Code automatically invokes it and runs an accessibility check. #### Claude Code Use the Claude Code plugin system to install the skills from the marketplace: ```bash # Add the marketplace claude plugin marketplace add webflow/webflow-skills # Install the plugins claude plugin install webflow-skills@webflow-skills ``` You can also clone and install the repository directly: ```bash # Clone the repository git clone git@github.com:webflow/webflow-skills.git ~/webflow-skills # Install the plugin claude plugin install ~/webflow-skills ``` After installation, restart Claude Code. Skills are automatically invoked when they are relevant to your task. Then, try a skill-related prompt: ``` Audit my Webflow site for common issues ``` If the `site-audit` skill is working, Claude Code automatically invokes it and runs a comprehensive health check. #### Cursor You can install Webflow from the [Cursor Marketplace](https://cursor.com/marketplace) by opening Cursor settings, clicking **Marketplace**, and searching for Webflow. Then, try a skill-related prompt: ``` Audit my Webflow site for common issues ``` If the `site-audit` skill is working, Claude Code automatically invokes it and runs a comprehensive health check. #### Windsurf #### Download the Webflow skills Download and extract the Webflow skills from this link: [https://github.com/webflow/webflow-skills/archive/refs/heads/main.zip](https://github.com/webflow/webflow-skills/archive/refs/heads/main.zip) Or go to [https://github.com/webflow/webflow-skills](https://github.com/webflow/webflow-skills) and download the repository compressed file or individual `SKILL.md` files from there. #### Install the skills Put the skills in the folder `~/.codeium/windsurf/skills/` to make them available to all workspaces or in `.windsurf/skills/` to make them available in a single project. The skills must be in folders nested with the plugin name and skill name, so for example, the Accessibility audit skill is in the location `~/.codeium/windsurf/skills/webflow-skills/skills/accessibility-audit/SKILL.md` if the skill is available to all workspaces. #### Try a skill Skills are automatically invoked when they are relevant to your task. For example, if you added the Accessibility Audit skill, Claude Desktop invokes it automatically when you give it a prompt that relates ot the skill, like this example: ``` Audit my Webflow site for accessibility issues ``` If the `accessibility-audit` skill is working, Claude Code automatically invokes it and runs an accessibility check. ## Updating skills Keep your skills up to date to get the latest features and improvements: #### Claude Desktop To update a skill in Claude Desktop, upload the new version of the skill and replace the old version. #### Claude Code ```bash # Update the marketplace index claude plugin marketplace update # Update the plugin claude plugin update webflow-skills@webflow-skills ``` Or use the interactive plugin manager: ```bash /plugin ``` #### Cursor Keep plugins updated from the Cursor Marketplace. #### Windsurf Update the files in `~/.codeium/windsurf/skills/` or `.windsurf/skills/` manually. ## Available skills #### Content management | Skill | Description | Example prompts | | :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | | **Bulk CMS update** | 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 across many items. | * Add 2 blog posts about Webflow MCP and update the first blog to say "Top" instead of "Best" * Update all product prices by increasing them 10% | | **CMS collection setup** | Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team members, portfolios, or other content types with custom fields. | - Create a team members collection with name, bio, photo, and role fields - Set up a products collection with pricing, categories, and related items | | **CMS best practices** | Expert guidance on Webflow CMS architecture and best practices. Use when planning collections, setting up relationships, optimizing content structure, or troubleshooting CMS issues. | * I'm building a recipe site. How should I structure the CMS? * My collection list is slow with 500+ items. How do I optimize? | #### Site health & optimization | Skill | Description | Example prompts | | :---------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Site audit** | Comprehensive audit of a Webflow site including pages, CMS collections, health scoring, and actionable insights. Use for site analysis, migration planning, or understanding site structure. | * Give me a complete inventory of my site * Audit my site and show me the top issues to fix | | **Asset audit** | 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 improvements. | - Run an asset audit on my site - Find all images without alt text and add descriptive alt text | | **Link checker** | 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 all internal and external links. | * Run a complete link check on my site and fix any issues * Check all links in my blog posts | | **Accessibility audit** | Check the site or individual pages for accessibility problems based on the WCAG 2.1 standard. | - Run an accessibility audit on my homepage - Check my contact page for critical accessibility issues only | | **Site activity log** | Query and summarize site activity logs using natural language. Filter by user, time range, or event type, and export shareable reports. Requires an enterprise plan. | * What happened on my site this week? * What were the high, medium, and low risk changes in the last week? * Give me a dashboard of all activities on the site with filters by user and activity type * Give me a weekly summary I can share with my team | #### Publishing & code | Skill | Description | Example prompts | | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Safe publish** | Publish a Webflow site with a plan-confirm-publish workflow. Shows what changed since last publish, runs pre-publish checks, and requires explicit confirmation before going live. | * Publish my site * Show me what changed and publish if it looks good | | **Custom code management** | 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 JavaScript. | - Add Google Analytics tracking to my site - Review all custom code and remove any unused scripts | | **Flowkit naming** | Apply Flowkit CSS naming conventions in Webflow projects using Webflow Designer tools or audit styles for naming conventions. | * Build a hero section with Flowkit naming * Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle * Refactor my navigation to use FlowKit naming | #### Code Components | Skill | Description | Example prompts | | :----------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | | **Code Components** | Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification. Uses the [Webflow CLI](/cli/reference/webflow-cli). | * I have a React project with some components I want to share to Webflow * Update my Code Components library with new changes | | **Component scaffold** | Generate a new Webflow Code Component with proper file structure, React component, and `.webflow.tsx` definition file. | - Create an accordion component | | **Convert component** | Convert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate `.webflow.tsx` definition file. | * Convert this React component to work with Webflow | | **Code Component deployment guide** | Guide users through deploying their code component library to Webflow. | - Deploy my components to Webflow | | **Code Component development environment** | Set up a Webflow Code Components project from scratch. | * Set up a new project for a Code Component | | **Validate Code Components** | Validate code components before deployment to catch issues early. | - Check if my components are ready to deploy | | **Troubleshoot Code Component deployment** | Debug and fix deployment issues for Webflow Code Components. | * How can I fix the error "Error: Authentication failed. Please check your API token." * My component appears in the Designer but shows nothing | #### Webflow CLI | Skill | Description | Example prompts | | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- | | **Designer extensions** | Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution. | * Create a new Designer Extension called gallery-manager using React * Create a new Designer Extension for managing colors | | **DevLink commands** | Export Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance. | - Export my Webflow components to my Next.js project | | **CLI troubleshooter** | Diagnose and resolve Webflow CLI issues with diagnostic commands and automated fixes. | * Getting "webflow: command not found" * Bundle is failing with webpack errors | | **Webflow Cloud commands** | Initialize new projects from templates, build applications, and deploy to Webflow Cloud with comprehensive validation and deployment verification. | - Create a new Webflow Cloud project with Astro - Deploy my Webflow Cloud app | ## How skills work with MCP Skills are implemented using the [Agent Skills](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) open format. They work as specialized workflows that: 1. **Detect relevant tasks** - Skills activate automatically when your prompt matches their use case 2. **Orchestrate MCP tools** - Each skill combines multiple Webflow MCP tools in specific sequences 3. **Provide guardrails** - Skills include validation, error handling, and confirmation steps 4. **Return structured results** - You get clear summaries, previews, and actionable recommendations The skills layer on top of the MCP server without requiring any changes to your MCP configuration. They simply make common workflows easier by packaging best practices into reusable patterns. ## Resources #### [Skill Migration](/mcp/skills/skill-migration) Update skills built against an earlier Webflow MCP version to the current tool and action names. #### [View on GitHub](https://github.com/webflow/webflow-skills) Explore the source code, contribute improvements, or report issues. #### [Prompt library](/mcp/examples) Browse example prompts that work with skills and the MCP server. #### [Getting started](/mcp/reference/getting-started) Learn how to set up and configure the Webflow MCP server.