unofficial-webflow-mast-skill

# Unofficial Webflow Mast Skill for Claude A Claude skill for working with Webflow projects built on the [Mast Framework](https://www.nocodesupply.co/mast) by [Corey Moen](https://www.linkedin.com/in/coreymoen/) / No-Code Supply Co. This skill enables Claude to assist with Webflow projects structured around Mast's component system, class naming conventions, grid system, and design tokens — using Webflow's official MCP server. > **Disclaimer:** This is an unofficial, community-built skill. It is not affiliated with, endorsed by, or officially connected to No-Code Supply Co. or Anthropic. Corey Moen was contacted prior to publication and is aware of this project. --- ## What this skill covers The skill gives Claude deep knowledge of the Mast framework, including: - **Core principles** — the 80/20 rule, DRY approach, base/utility/combo class system - **Class naming conventions** — BEM-inspired naming with `_` and `-` separators, prefix system (`u-`, `cc-`) - **Grid system** — 12-column flexbox grid, responsive breakpoints (`-lg-`, `-md-`, `-sm-`, `-xs-`), row and column modifiers - **Utility classes** — margin, padding, text, display, size, aspect ratio, color, and helper classes - **Typography** — fluid type scale with `clamp()`, heading classes, paragraph sizes - **Variables** — Theme, Typography, Components, Layout, and Color collections - **Core components** — Button, Section, Card, Nav, Footer, Accordion, Form, and more - **Interactions** — `data-animate` attribute, GSAP/IX3 integration, best practices - **Custom code** — Canvas CSS, embeds, page vs. project settings, JS best practices - **Anti-patterns** — what to avoid to keep projects clean and maintainable --- ## What works with the Webflow MCP Tested and validated against a live Webflow project. Here is what Claude can reliably do: ### ✅ Works well - List sites, pages, and CMS collections - Add fields to CMS collections and populate them with AI-generated content (e.g. SEO metadata following Google guidelines) - List all components and inspect their properties and property IDs - Create new pages and update their title, slug, and SEO metadata - Edit text directly on canvas elements — headings, paragraphs, and string nodes - Hide elements via inline style attributes - Update page-level settings programmatically ### ⚠️ Known API limitations These limitations are not specific to this skill — they reflect current constraints in the Webflow MCP as of early 2026, confirmed independently by Corey Moen himself: 1. **Duplicating pages** — The Webflow API has no native page duplication endpoint. Workaround: create a blank page via API and ask the user to copy content manually in the Designer. 2. **Component property overrides on single-locale sites** — The `update_static_content` API only works with secondary locales. This means component property overrides (e.g. Button text, Accordion titles) cannot be written programmatically on sites with only a primary locale. These must be edited manually in the Designer's Properties panel. 3. **Rich Text content inside nested components** — Same locale restriction applies. Content inside Rich Text component instances nested within other components requires manual editing. 4. **Component Slots** — Not yet supported by the Webflow MCP. This is the main blocker for fully automated page building with Mast. Expected to be resolved in future MCP updates. --- ## Demo Landing page built during skill testing: 👉 [https://mast---skill-trial.webflow.io/landing-page](https://mast---skill-trial.webflow.io/landing-page) --- ## How to use 1. Add the `SKILL.md` file to your Claude project or attach it at the start of your conversation 2. Make sure the [Webflow connector](https://webflow.com/blog/webflow-claude-connector) is set up in Claude 3. Start prompting Claude about your Mast-based Webflow project --- ## Credits - **Mast Framework** created by [Corey Moen](https://www.linkedin.com/in/coreymoen/) / [No-Code Supply Co.](https://www.nocodesupply.co) - Skill built and tested by [Fernando Comet](https://fernandocomet.com) - Tested using [Claude](https://claude.ai) + [Webflow MCP](https://developers.webflow.com/mcp/v1.0.0/reference/overview) --- ## Contributing Found something that works (or doesn't)? PRs and issues welcome. As the Webflow MCP evolves and adds support for Component Slots and primary locale updates, this skill will become significantly more powerful.