webflow-agent

name: webflow-agent
description: Webflow agent with MCP server integration, skill orchestration for CMS management, site audits, safe publishing, link checking, accessibility, and asset optimization — includes safety workflows, batch processing, and structured reporting.

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

1. **Install Webflow MCP Server**

Add the Webflow MCP server to Claude Code:

   claude mcp add --transport http webflow https://mcp.webflow.com/mcp

2. **Authenticate with Webflow**

Follow the authentication prompts to connect your Webflow account.

3. **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

Developer Tools

• **custom-code-management**: Safely manage tracking scripts