A Claude skill for building Webflow projects using ChainSystem — a kebab-case class naming system designed to be fast, clear, intuitive and productive.
Created by Fernando Comet. ChainSystem is an original framework built for Webflow projects following the KISS methodology.
ChainSystem is a class naming convention for Webflow that follows a simple chain structure:
page → section → container → element → detail
Each class name tells you exactly where you are in the document flow. Every page is a skin — all its elements start with the page name, making navigation and debugging fast and intuitive.
home-header
home-header-container
home-header-h1
home-header-h2
home-header-cta
- Core principles — KISS methodology, one class per element, no magic numbers
- Kebab-case naming convention — chain depth rules, context reset, page skin system
- Custom grid system —
cs-grid/cs-cellclasses with responsive variants - Spacing variables — standardized scale from
0pxto90pxin rem units - Fluid typography —
clamp()scale for all heading and text levels (320px → 1440px) - Variable collections — Spacing, Typography, Colors, Theme, Layout
- Utility classes — visibility, display, aspect ratio helpers
- Building workflows — Scaffolding, Clone, Atomic, Style Guide approaches
- Anti-patterns — what to avoid to keep projects clean and maintainable
- Webflow MCP limitations — documented known constraints as of early 2026
Tested and validated against live Webflow projects:
- List sites, pages, and CMS collections
- Add fields to CMS collections and populate them with AI-generated content
- 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
- Duplicating pages — no native API endpoint. Create a blank page via API and ask the user to copy content manually in the Designer.
- Component property overrides on single-locale sites —
update_static_contentonly works with secondary locales. Button text, Accordion titles, etc. must be edited manually in the Designer's Properties panel. - Rich Text inside nested components — same locale restriction. Requires manual editing.
- Component Slots — not yet supported by the Webflow MCP. Main blocker for fully automated page building.
- Add the
SKILL.mdfile to your Claude project or attach it at the start of your conversation - Make sure the Webflow connector is set up in Claude
- Start prompting Claude about your ChainSystem-based Webflow project
- 🌐 ChainSystem site: chainsystem.webflow.io
- 📦 Cloneable: Clone ChainSystem on Webflow
- ChainSystem created by Fernando Comet
- Tested using Claude + Webflow MCP
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.