Skills
.Work. You
Rest

webflow-development

Community

Automate Webflow design with MCP-powered tooling.

Design & Creative#mcp#design-tokens#browser-automation#webflow#responsive-breakpoints#code-embeds
Authormonmush
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables designers and developers to automate building and styling Webflow sites using the Webflow MCP Bridge and browser automation, eliminating repetitive manual setup.

Core Features & Use Cases

  • Webflow MCP tool reference (element_tool, style_tool, element_builder, etc.)
  • Desktop-first breakpoint system and mobile-first to desktop-first CSS mapping
  • Code Embed patterns for SVGs, custom CSS, and complex layouts
  • JSX SVG → HTML SVG attribute conversion
  • CodeMirror content injection for Webflow's code editor
  • 8+ documented gotchas with workarounds (e.g., pseudo: "noPseudo" requirement)
  • Section container pattern for consistent responsive layouts
  • Component creation and instance management
  • Workflows: Local → Webflow Transfer, Build from Scratch, Fix & Iterate
  • Publish, QA, and reusable component workflows

Quick Start

Analyze a local project (React, HTML/CSS, Next.js) and initiate a Local → Webflow Transfer to reproduce its structure in Webflow.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: webflow-development
Download link: https://github.com/monmush/webflow-development/archive/main.zip#webflow-development

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.