skills.rest
monmush
monmushCOMMUNITY
Explore all skills by this author →
GitHub

webflow-development

Automate building and styling Webflow sites via the MCP Bridge and browser automation.

1|Updated Feb 17, 2026
Search Tags:#mcp#design-tokens#browser-automation#webflow#responsive-breakpoints#code-embeds
One-click install
npx skills add https://github.com/monmush/webflow-development --skill webflow-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webflow-development
Source: https://github.com/monmush/webflow-development/tree/main
Command: npx skills add https://github.com/monmush/webflow-development --skill webflow-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about webflow-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I transfer a local React or Next.js project to Webflow automatically?▼

You can automate transferring local React, Next.js, or HTML/CSS projects to Webflow by using the MCP Bridge and browser automation to map local structures into Webflow elements, eliminating manual setup.

Does the Webflow MCP Bridge support custom code embeds for SVGs and CSS?▼

Yes, the Webflow MCP Bridge supports custom code embeds for SVGs, CSS, and complex layouts. It converts JSX SVG attributes to HTML and injects content directly into Webflow's CodeMirror editor.

How do I map mobile-first CSS to Webflow's responsive breakpoints?▼

To map mobile-first CSS to Webflow responsive breakpoints, the automation applies a desktop-first breakpoint system, translating your styles to align with Webflow's responsive layout structure and section container patterns.

What do I need to set up before automating Webflow design with MCP?▼

Before automating Webflow design with MCP, you need the Webflow MCP Bridge installed and Claude running in Chrome. These enable the browser automation required to execute build and style workflows.

Why does my Webflow MCP styling fail with pseudo-elements?▼

Webflow MCP styling fails with pseudo-elements when the pseudo property is not explicitly set to "noPseudo". The Skill documents this and other common gotchas with specific workarounds to ensure successful element styling.

Related Skills

Explore More Design & Creative Skills→
karenrebecagkarenrebecag

webflow-code-component:component-scaffold

Scaffold Webflow Code Components with React and Webflow definition files.

Community
Advanced
karenrebecagkarenrebecag

webflow-mcp:safe-publish

Publish Webflow sites after pre-publish checks and explicit confirmation.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
karenrebecagkarenrebecag

webflow-mcp:designer-tools

Automate Webflow page creation, element manipulation, and style application via MCP tools.

Community
Advanced