webflow-skills
🥈SilverAutomate Webflow site management with Claude Code skills. Manage CMS content, audit site health, optimize assets, and publish changes safely. Ideal for operations teams to streamline workflows and maintain site performance.
9200Updated 2mo ago
Intermediate30min to implementautomation
Saves ~90 min per use
Quick InstallView Source
git clone https://github.com/webflow/webflow-skills.gitWorks with:
Claude
Overview
About This Skill
Webflow Skills is a comprehensive collection of Agent Skills designed for Claude Code, Cursor, and compatible agents to automate Webflow site management. The skills enable teams to manage CMS content at scale with batch operations and validation, conduct comprehensive site audits with health scoring and recommendations, optimize assets and identify broken links, build pages directly in Webflow Designer, create reusable Code Components, and publish changes through a safe preview-confirm workflow. Operations teams benefit from streamlined workflows that reduce manual tasks, improve site performance and accessibility compliance, and maintain data integrity across CMS collections and published sites.
How to Use
Install via Claude Code plugin marketplace, Cursor marketplace, or npx skills CLI. Set up the Webflow MCP server in your agent's MCP configuration and authenticate with your Webflow account. Skills are immediately available for site management, CMS operations, audits, and publishing workflows.
Use Cases
Batch create and update CMS items with validation and preview
Run comprehensive site audits checking health, accessibility, and asset optimization
Scan and fix broken links across pages and CMS content
Create and deploy reusable React Code Components for Webflow Designer
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/webflow/webflow-skillsRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
I need to automate some tasks on my Webflow site. Here are the details: [WEBSITE_URL], [SPECIFIC_TASKS]. Can you generate a Claude Code skill to handle this? Please include error handling and validation.
Example Output
```javascript
// Webflow CMS Content Updater
// Automates updating CMS collections in Webflow
const Webflow = require('webflow-api');
// Initialize Webflow client
const client = new Webflow({ token: process.env.WEBFLOW_API_TOKEN });
// Update CMS items
async function updateCMSItems(collectionId, items) {
try {
for (const item of items) {
await client.collections.updateItem(collectionId, item.id, item.fields);
console.log(`Updated item ${item.id} in collection ${collectionId}`);
}
} catch (error) {
console.error('Error updating CMS items:', error);
}
}
// Example usage
const collectionId = 'YOUR_COLLECTION_ID';
const items = [
{
id: 'ITEM_ID_1',
fields: {
title: 'Updated Title',
description: 'Updated description'
}
},
// Add more items as needed
];
updateCMSItems(collectionId, items);
```Apply to these tools
Browse all toolsClaude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Drata
Automate security compliance and monitor real-time security posture seamlessly.
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan