Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach.
View on GitHubFebruary 4, 2026
Select agents to install to:
npx add-skill https://github.com/webflow/webflow-skills/blob/main/plugins/webflow-skills/skills/flowkit-naming/SKILL.md -a claude-code --skill flowkit-namingInstallation paths:
.claude/skills/flowkit-naming/# Flowkit Naming System Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools. ## Important Note **ALWAYS use Webflow MCP tools for all operations:** - Use Webflow MCP's `webflow_guide_tool` to get best practices before starting - Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify the target site - Use Webflow MCP's `de_page_tool` to get current page and switch pages - Use Webflow MCP's `element_tool` to select elements and inspect current classes - Use Webflow MCP's `style_tool` to create and update FlowKit-compliant styles - Use Webflow MCP's `de_learn_more_about_styles` to understand supported style properties - DO NOT use any other tools or methods for Webflow operations - All tool calls must include the required `context` parameter (15-25 words, third-person perspective) - **Designer connection required**: User must be connected to Webflow Designer for this skill to work ## Instructions ### Phase 1: Discovery & Setup 1. **Identify the task**: Determine if user is: - Creating new component classes - Auditing existing class names - Building complete page sections - Refactoring non-FlowKit classes to FlowKit 2. **Connect to Designer**: Confirm user has Webflow Designer open and connected 3. **Get current page**: Use Webflow MCP's `de_page_tool` to identify current working page 4. **Ask for scope**: Clarify which elements or sections to work with ### Phase 2: Analysis (if auditing existing) 5. **Get all elements**: Use Webflow MCP's `element_tool` to retrieve current page elements 6. **Extract classes**: Identify all class names currently applied 7. **Categorize issues**: - Missing `fk-` prefix - Incorrect case (uppercase/mixed case) - Wrong separators (underscores instead of hyphens) - Non-semantic naming - Inconsistent component structure 8. **Generate audit report**: Show current vs suggested FlowKit-compliant names ### Phase 3: Suggestion Generation 9. **Apply FlowKit patter