What is the Flowkit naming system?

Flowkit is Webflow's official utility-first CSS framework that uses a specific 'fk-' prefix and hyphen-separated naming patterns to ensure project scalability and consistency.

How does this skill handle batch updates?

To ensure stability, the skill processes element updates in batches of 10-15 elements, providing a progress report for each group of changes made in the Designer.

Does this skill require a connection to Webflow?

Yes, the user must be connected to the Webflow Designer, as the skill utilizes Webflow MCP tools to interact with live elements and styles in real-time.

Does it support Webflow combo classes?

Yes, it specifically manages state modifiers (e.g., .is-active) and variant modifiers (e.g., .is-primary) using Flowkit's combo class conventions.

Can I use this skill to rename existing classes?

Absolutely. The skill features a discovery and analysis phase that identifies non-compliant classes and generates an audit report with suggested Flowkit-compliant renames.

Flowkit Naming for Webflow

Name: Flowkit Naming for Webflow
Author: webflow

bywebflow

•

设计工具

Automates and enforces Flowkit CSS naming conventions within Webflow projects for consistent, utility-first styling.

The Flowkit Naming skill streamlines Webflow site management by applying Flowkit's official utility-first CSS framework conventions. It empowers developers to audit existing class names for consistency, generate new semantic component structures, and batch-update elements using Webflow MCP tools. By enforcing standardized prefixes and naming patterns, it ensures Webflow projects remain scalable, maintainable, and aligned with professional design system best practices.

主要功能

01Support for semantic component hierarchies and state-based combo classes

02Automated Flowkit class generation for components, layouts, and utilities

03Comprehensive auditing of non-compliant Webflow class names with suggested fixes

04Batch application of styles and element updates via Webflow Designer MCP tools

05Pre-built patterns for layout, typography, spacing, and visual utilities

068 GitHub stars

使用场景

01Refactoring legacy Webflow projects to align with the Flowkit CSS framework

02Building complex, production-ready UI components like hero sections and product cards with standardized naming

03Conducting design system audits to ensure team-wide naming consistency and prefix compliance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add webflow/webflow-skills flowkit-naming

For use in Claude.ai and ChatGPT

Download Skill