unofficial-webflow-mast-skill

A Claude skill for working with Webflow projects built on the Mast Framework by Corey Moen / 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.

---

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

---

Tested and validated against a live Webflow project. Here is what Claude can reliably do:

• List sites, pages, and CMS collections
• Add fields to CMS collections and populate them with AI-generated content (e.g. SEO metadata following Googl