/flowkit-naming

name: webflow-mcp:flowkit-naming
description: 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. Runs headlessly against a page ID — no Designer connection required, except for the optional live-canvas conveniences (current page, interactive element selection).
mcp-version: 2.0.1

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 `data_pages_tool` with action `list_pages` to find the target page by name or slug — headless, no Designer needed
• Use Webflow MCP's `data_element_tool` to inspect current classes and apply new ones — headless, pass the page's ID directly
• Use Webflow MCP's `data_style_tool` to create and update FlowKit-compliant styles — headless
• Use Webflow MCP's `webflow_guide_tool` to understand supported style properties
• Use Webflow MCP's `designer_tool` only if the user wants to work with whatever page is currently open in Designer, or wants to interactively select an element on the canvas
• 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)
• **No Designer connection is required for the core workflow.** Getting the page, inspecting classes, creating styles, and applying classes all run headlessly against an explicit page ID. Designer is only needed for the optional `designer_tool` conveniences above.

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. **Get target page**: Use Webflow MCP's `data_pages_tool` with action `list_pages` to find the page by name or slug — no Designer connection needed. If the user wants to work with whatever page they currently have open in Designer, use `designer_tool` with action `get_current_page` instead. 3. **Ask for scope**: Clarify which elements or sections to work with

Phase 2: Analysis (if auditing existing)

4. **Get all elements**: Use Webflow MCP's `data_element_tool` to retrieve elements from the target page 5. **Extract classes**: Identify all class names currently applied 6. **Categorize issues**:

• Missing `fk-` prefix
• Incorrect case (uppercase/mixed case)
• Wrong separators (underscores instead of hyphens)
• Non-semantic naming
• Inconsistent component structure

7. **Generate audit report**: Show current vs suggested FlowKit-compliant names

Phase 3: Suggestion Generation

8. **Apply FlowKit patterns**: Generate class names following FlowKit v2 conventions 9. **Structure by type**:

• Component wrappers: `fk-[component]`
• Child elements: `fk-[component]-[element]`
• State modifiers: combo classes with `is-[state]`
• Layout utilities: `fk-flex`, `fk-grid`, `fk-stack`
• Spacing utilities: `fk-space-[size]`, `fk-py-[size]`, `fk-px-[size]`
• Typography utilities: `fk-text-[style]`

10. **Validate suggestions**: Ensure all suggestions follow FlowKit conventions 11. **Show preview**: Display hierarchical structure with suggested classes

Phase 4: Application (if user confirms)

12. **Create styles**: Use Webflow MCP's `data_style_tool` to create new FlowKit-compliant class styles 13. **Update elements**: Use Webflow MCP's `data_element_tool` to apply classes to elements 14. **Process in batches**: If many elements, process in groups of 10-15 15. **Show progress**: Display which elements are being updated

Phase 5: Verification & Reporting

16. **Verify application**: Check that classes were applied correctly 17. **Generate report**: Show what was created/updated 18. **Provide documentation**: Explain the FlowKit structure used 19. **Suggest next steps**: Recommend additional FlowKit patterns to implement

FlowKit Naming Reference

Core Naming Patterns

| Pattern | Purpose | Example | |---------|---------|---------| | `fk-[component]` | Component wrapper (base class) | `fk-card`, `fk-nav`, `fk-hero` | | `fk-[component]-[element]` | Child element within component | `fk-card-title`, `fk-nav-link` | | `fk-[component].[modifier]` | Combo class modifier (state/variant) | `fk-card.is-featured` | | `fk-text-[style]` | Typography utility | `fk-text-xl`, `fk-text-bold` | | `fk-flex` / `fk-grid` | Layout utilities | `fk-flex-center`, `fk-grid-3` | | `fk-space-[size]` | Spacing utilities | `fk-space-md`, `fk-py-lg` | | `is-[state]` | State modifiers (combo) | `is-active`, `is-hidden`, `is-disabled` |

Layout Utilities

fk-section              Section wrapper with padding
fk-container            Max-width container (centered)
fk-flex                 Flexbox container
fk-flex-center          Centered flex (both axes)
fk-flex-between         Space-between flex
fk-flex-around          Space-around flex
fk-flex-col             Flex column direction
fk-grid                 Grid container (base)
fk-grid-2               2-column grid
fk-grid-3               3-column grid
fk-grid-4               4-column grid
fk-grid-6               6-column grid
fk-stack                Vertical stack (gap between items)
fk-row                  Horizontal row
fk-wrap                 Flex wrap enabled

Typography Utilities

fk-text-xs              Extra small text (12px)
fk-text-sm              Small text (14px)
fk-text-md              Medium text (16px - default)
fk-text-lg              Large text (18px)
fk-text-xl              Extra large text (24px)
fk-text-2xl