Webflow Skills
You have access to specialized skills for working with Webflow sites through the Webflow MCP server.
Prerequisites
⚠️ IMPORTANT: Webflow MCP Server Required
These skills require the Webflow MCP (Model Context Protocol) server to be installed and configured. Without Webflow MCP, these skills will not function.
Installation Steps
-
Install Webflow MCP Server
Add the Webflow MCP server to Claude Code:
claude mcp add --transport http webflow https://mcp.webflow.com/mcp
-
Authenticate with Webflow
Follow the authentication prompts to connect your Webflow account.
-
Verify Installation
Test the connection by calling data_sites_tool with action list_sites to confirm access to Webflow sites.
What Webflow MCP Provides
The Webflow MCP server enables:
- ✅ Access to all Webflow sites in your account
- ✅ CMS operations (collections, items, fields)
- ✅ Page operations (content, metadata, settings)
- ✅ Designer integration (when Designer is open)
- ✅ Asset management
- ✅ Publishing capabilities
- ✅ Custom code management
Without Webflow MCP installed, you cannot:
- ❌ List or access Webflow sites
- ❌ Read or modify CMS content
- ❌ Update pages or publish changes
- ❌ Use any of the Webflow skills
Troubleshooting Installation
Issue: "Webflow MCP server not found"
Problem: MCP server not installed or not running
Solution:
1. Follow installation guide at https://developers.webflow.com/mcp
2. Restart Claude Code after installation
3. Verify MCP server is running
4. Check MCP server logs for errors
Issue: "Authentication failed"
Problem: Invalid or missing Webflow API token
Solution:
1. Generate API token in Webflow account settings
2. Configure MCP server with token
3. Verify token has required permissions
4. Restart MCP server
Issue: "No sites returned"
Problem: API token doesn't have access to sites
Solution:
1. Verify token permissions in Webflow
2. Check that you have sites in your account
3. Ensure token is for correct workspace
4. Try regenerating API token
Available Skills
Content Operations
-
bulk-cms-update: Create or update multiple CMS items with validation and preview
- Use when: Batch creating/updating blog posts, products, team members
- Requires: Collection name, item data
- Safety: Preview + confirmation required
-
cms-collection-setup: Create new CMS collections with custom fields and relationships
- Use when: Setting up new content types (blog posts, products, team members, portfolios)
- Supports: 16 field types (static, option, reference/multi-reference), relationship management, multi-collection setup
- Features: Validates schemas, checks plan limits, handles dependencies, creates fields in correct order
- Safety: Complete preview with validation, explicit confirmation required
-
cms-best-practices: Expert guidance on CMS architecture, relationships, and optimization
- Use when: Planning CMS structure, optimizing performance, troubleshooting relationships
- Type: Consultative (read-only, provides recommendations)
- Output: Architecture recommendations, performance optimization, field selection guidance
Publishing
- safe-publish: Plan → Confirm → Publish workflow with verification
- Use when: Publishing site changes to production
- Process: Shows what changed → Requires "publish" confirmation → Verifies deployment
- Safety: Explicit confirmation required (must type "publish")
Site Management & Auditing
-
site-audit: Comprehensive site audit with health scoring and actionable insights
- Use when: Assessing overall site health, preparing for launch, identifying issues
- Analyzes: SEO metadata, CMS content quality, page structure, site configuration
- Output: Health score (0-100), prioritized issues, recommendations, optional export
-
asset-audit: Analyze assets for optimization opportunities
- Use when: Site performance issues, preparing for launch, reducing load times
- Analyzes: Image sizes, file formats, compression opportunities
- Output: Optimization suggestions, potential file size savings, recommendations
-
link-checker: Find and fix broken or insecure links across entire site
- Use when: SEO audit, site maintenance, after content migration
- Analyzes: All links in static pages and CMS content
- Detects: Broken links (4xx/5xx), insecure HTTP links, redirects
- Output: Link health score, automatic fixes (HTTP→HTTPS), manual review items
- Safety: Preview + granular approval for fixes
-
accessibility-audit: Comprehensive WCAG 2.1 accessibility audit for pages
- Use when: Preparing for launch, ensuring accessibility compliance, improving user experience
- Analyzes: Buttons, forms, links, focus states, headings, keyboard navigation, ARIA attributes
- Detects: Missing labels, non-semantic elements, focus issues, heading hierarchy problems, touch target sizes
- Output: Accessibility score (0-100), categorized issues (critical/serious/moderate), specific fixes
- Requires: Webflow Designer connection
- Safety: Preview + granular approval for fixes
- Note: Excludes image alt text (covered by asset-audit skill)
Design & Naming Systems
- flowkit-naming: Apply Webflow's official FlowKit CSS naming system
- Use when: Building components with FlowKit conventions, auditing class names
- Requires: Webflow Designer connection
- Patterns:
fk- prefix, is- state modifiers, responsive combo classes
- Safety: Preview + confirmation for class creation/updates
- custom-code-management: Safely manage tracking scripts and custom code
- Use when: Adding analytics, tracking pixels, third-party integrations
- Manages: Site-level custom code, inline scripts (max 2000 chars)
- Safety: Preview + confirmation before adding/removing scripts
When working with Webflow skills, these MCP tools are available:
Core Site Operations
webflow_guide_tool - Always call first to get best practicesdata_sites_tool - Consolidated tool for site operations with actions:
list_sites - List all accessible sitesget_site - Get detailed site informationpublish_site - Publish site to specified domains
CMS Operations
data_cms_tool - Consolidated tool for CMS operations with actions:
- Collections:
get_collection_list, get_collection_details, create_collection
- Fields:
create_collection_static_field, create_collection_option_field, create_collection_reference_field, update_collection_field
- Items:
list_collection_items, create_collection_items, update_collection_items, publish_collection_items, delete_collection_items
Page Operations
data_pages_tool - Consolidated tool for page operations with actions:
list_pages - List all pages in siteget_page_metadata - Get page SEO settingsupdate_page_settings - Update page metadata, SEO, slugget_page_content - Get page content structureupdate_static_content - Update page content (requires Designer)
Component Operations
data_components_tool - Consolidated tool for component operations with actions:
list_components - List all componentsget_component_content - Get component structureupdate_component_content - Update component contentget_component_properties - Get component propertiesupdate_component_properties - Update component properties
Scripts & Custom Code
data_scripts_tool - Consolidated tool for script operations with actions:
list_registered_scripts - List registered scriptslist_applied_scripts - Get applied scriptsadd_inline_site_script - Add inline scripts (max 10,000 chars)delete_all_site_scripts - Remove all custom scriptsget_page_script - Get scripts on specific pageupsert_page_script - Add/update page scriptsdelete_all_page_scripts - Remove all page scripts
These tools remain action-based and unchanged:
element_tool - Get/select elements, update attributes, styles, linkselement_builder - Create elements (max 3 levels deep)de_component_tool - Manage components and instancesde_page_tool - Create pages/folders, switch pagesstyle_tool - Create and update stylesvariable_tool - Manage design variablesasset_tool - Manage assets and foldersde_learn_more_about_styles - Reference for supported styles
These tools remain standalone:
ask_webflow_ai - Ask questions about Webflow APIget_image_preview - Preview images from URLs
Skill Invocation Patterns
Pattern 1: User Explicitly Requests Skill
User: "Run a site audit on my Webflow site"
→ Invoke: site-audit skill
Pattern 2: Task Matches Skill Description
User: "I need to add 20 blog posts to my site"
→ Invoke: bulk-cms-update skill
User: "Check if my site has broken links"
→ Invoke: link-checker skill
User: "Help me structure my CMS for a recipe site"
→ Invoke: cms-best-practices skill
Pattern 3: User References Skill by Name
User: "Use the safe-publish skill to publish my site"
→ Invoke: safe-publish skill
When NOT to Invoke Skills
- Simple one-off operations (use MCP tools directly)
- User asks general questions about Webflow (answer directly)
- Task requires different approach than available skills
Important Usage Guidelines
1. Site ID Requirements
- Never assume site IDs - Always use
data_sites_tool with action list_sites to fetch available sites
- Ask user to select - If multiple sites, let user choose by name or number
- Confirm site name - Verify you're working on the correct site
2. Context Parameter (Required)
All Webflow MCP tools require a context parameter:
- Length: 15-25 words (count carefully)
- Perspective: Third-person (not "I", "we", or "you")
- Content: Explain what action is being performed and why
- Example: "Retrieving all CMS collections from the site to analyze content structure and identify optimization opportunities for improved performance."
3. Designer Connection
Some operations require Webflow Designer:
- Static page content updates
- Element creation and styling
- Component management
- Variable management
If Designer required but not connected:
⚠️ Designer Connection Required
This operation needs Webflow Designer to be open and connected.
Steps:
1. Open Webflow Designer
2. Open your site
3. Ensure Designer is connected
4. Retry operation
Note: CMS operations can proceed without Designer.
4. Batch Processing
For large operations:
- CMS items: Process in batches of 50
- Pages: Process in batches of 10-20
- Links: Validate in batches of 100
- Always show progress for batches
5. Draft vs Live Operations
Choose the right endpoint:
- Draft operations:
*_items, *_item (requires manual publish)
- Live operations:
*_items_live, *_item_live (publishes immediately)
- Publishing: Use
publish_items to publish drafts
Safety Rules
Mandatory Preview + Confirmation
Always follow this pattern for write operations:
1. Discovery Phase:
🔍 [Operation Name]
Analyzing current state...
[Show what will be affected]
2. Preview Phase:
📋 Preview: [Operation Name]
[Show detailed changes]
[Include validation warnings]
⚠️ Type "[confirm]" to proceed.
3. Execution Phase:
🔄 Applying changes...
Progress: ████████████████████ 100% (X/Y items)
[Show real-time progress]
4. Confirmation Phase:
✅ [Operation] Complete
Summary:
- Items processed: X
- Successful: Y
- Failed: Z
[Detailed results]
Preview Requirements
Before ANY write operation, show:
- What will change - Specific items and fields
- Validation warnings - Any issues detected
- Impact assessment - How many items affected
- Confirmation prompt - Clear action required
Granular Approval
For bulk operations, allow selective approval:
Which items would you like to update?
- Type "all" to proceed with all
- Type numbers to skip (e.g., "2,4,7")
- Type "none" to cancel
Example: Typing "2,4" will update all except items 2 and 4
Error Handling
When errors occur:
- Explain clearly - What went wrong and why
- Suggest recovery - Actionable steps to resolve
- Report partial success - Separate successes from failures
- Offer retry - For failed operations
Example:
❌ 3 Items Failed
Failed items:
- Item 5: Slug already exists
- Item 8: Required field missing
- Item 12: Reference points to deleted item
✅ 17 items updated successfully
Would you like to:
1. Fix the 3 failed items and retry
2. Continue without failed items
3. Cancel and review all items
Read Operations (Audits, Analysis, Inventory)
📊 [Report Title]: [Site Name]
## Summary
[High-level overview with key metrics]
## [Category 1]
[Detailed findings organized by category]
├── Item 1
│ └── Details
├── Item 2
└── Item 3
## [Category 2]
[More findings]
---
💡 Recommendations:
1. [Priority action]
2. [Next steps]
3. [Best practices]
Write Operations (Updates, Creates, Fixes)
📋 Preview: [Operation Name]
## Changes to Apply (X items)
[1] ✓ Item Name
Current: [value]
New: [value]
✅ Validation passed
[2] ⚠️ Item Name
Current: [value]
New: [value]
⚠️ Warning: [issue]
---
Which items would you like to proceed with?
- Type "all" for all items
- Type numbers to skip (e.g., "2")
- Type "none" to cancel
Success Confirmation
✅ [Operation] Complete
Summary:
- Total processed: X
- Successful: Y ✅
- Failed: Z ❌
- Skipped: W ⏭️
[Detailed breakdown]
---
💡 Next Steps:
[Relevant follow-up actions]
Icons
Use consistently:
- 🔍 Discovery/Search
- 📋 Preview/Planning
- 🔄 Processing/In Progress
- ✅ Success/Working
- ❌ Error/Broken
- ⚠️ Warning/Caution
- 💡 Recommendation/Tip
- 📊 Report/Analysis
- 🎉 Celebration/Complete
- 📥 Export/Download
- 🔴 Critical Issue
- 🟡 Medium Priority
- 🟢 Low Priority/Good
Progress Indicators
For long operations:
🔄 Processing...
Progress: ████████████████████ 100% (X/Y items)
Elapsed: 3.2 seconds
Tree Structure
For hierarchical data:
Collection Name (count)
├── Item 1
│ ├── Field: value
│ └── Field: value
├── Item 2
│ └── Field: value
└── Item 3
Tables
For structured data:
| # | Name | Status | Details |
|---|------|--------|---------|
| 1 | Item | ✅ | Success |
| 2 | Item | ⚠️ | Warning |
| 3 | Item | ❌ | Failed |
Best Practices
Before using any Webflow MCP tool:
1. Call webflow_guide_tool first
2. Review the guidance
3. Then proceed with specific tools
2. Validate Before Modifying
For any write operation:
1. Read current state
2. Validate proposed changes
3. Check for conflicts/issues
4. Show preview with warnings
5. Get user confirmation
6. Apply changes
7. Verify success
3. Handle Large Operations
If >50 items to process:
1. Inform user of batch processing
2. Process in chunks of 50
3. Show progress after each batch
4. Report batch successes/failures
5. Continue or pause based on errors
4. Provide Context
Good context examples:
✅ "Retrieving collection schema to validate field types before bulk update operation"
✅ "Publishing site changes to production domain after user confirmation of preview"
✅ "Scanning all pages and CMS items to identify broken links for repair"
❌ "Getting data" (too vague)
❌ "I need to fetch collections" (first person)
❌ "User wants to update items" (references user directly)
5. Report Thoroughly
After any operation, report:
- What was done
- How many items affected
- Any errors or warnings
- What changed (before/after)
- Next recommended steps
Examples
Example 1: Running Site Audit
User: "Audit my Webflow site"
1. Call webflow_guide_tool
2. Call data_sites_tool with action list_sites
3. Ask user to select site
4. Invoke site-audit skill
5. Skill handles full workflow
6. Report results to user
Example 2: Bulk CMS Update
User: "Add these 5 blog posts: [data]"
1. Call webflow_guide_tool
2. Call data_sites_tool with action list_sites → get site
3. Call data_cms_tool with action get_collection_list → find "Blog Posts" collection
4. Invoke bulk-cms-update skill with:
- Site ID
- Collection name
- Items data
5. Skill handles validation + preview + execution
6. Report results
Example 3: Link Checking
User: "Check for broken links"
1. Call webflow_guide_tool
2. Call data_sites_tool with action list_sites → get site
3. Invoke link-checker skill
4. Skill extracts + validates all links
5. Shows health report
6. Offers to fix issues
7. If user approves, applies fixes
8. Reports results
Example 4: CMS Architecture Guidance
User: "How should I structure my CMS for a recipe site?"
1. Invoke cms-best-practices skill
2. Skill asks clarifying questions:
- Content volume
- Recipe attributes needed
- Organization requirements
- Author setup
3. Skill provides comprehensive recommendations:
- Collection structure
- Field definitions
- Relationships
- Page architecture
- Implementation roadmap
4. User can then use cms-collection-setup to implement
Troubleshooting
Issue: "Cannot find site"
Problem: Site ID incorrect or site not accessible
Solution:
1. Use data_sites_tool with action list_sites to see available sites
2. Verify user has access to site
3. Confirm site name with user
Issue: "Designer not connected"
Problem: Operation requires Designer but it's not connected
Solution:
1. Inform user Designer connection is required
2. Provide connection steps
3. Offer to proceed with CMS operations only
4. Retry after connection established
Issue: "Rate limit exceeded"
Problem: Too many API calls in short time
Solution:
1. Pause for 60 seconds
2. Resume automatically
3. Show progress message
4. Consider larger batch sizes
Issue: "Validation failed"
Problem: Data doesn't meet requirements
Solution:
1. Show specific validation errors
2. Explain what's wrong and why
3. Suggest corrections
4. Offer to fix automatically if possible
5. Let user edit and retry
Quick Reference
Always call first: webflow_guide_tool
Get site: data_sites_tool with action list_sites → user selects → use siteId
Context parameter: 15-25 words, third-person, explain action
Preview changes: Always show before write operations
Require confirmation: User must explicitly approve
Report results: Successes, failures, next steps
Handle errors: Explain, suggest recovery, report partial success