webflow-mcp:flowkit-naming

What this skill does

# 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 patterns**: Generate class names following FlowKit v2 conventions
10. **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]`
11. **Validate suggestions**: Ensure all suggestions follow FlowKit conventions
12. **Show preview**: Display hierarchical structure with suggested classes

### Phase 4: Application (if user confirms)
13. **Create styles**: Use Webflow MCP's `style_tool` to create new FlowKit-compliant class styles
14. **Update elements**: Use Webflow MCP's `element_tool` to apply classes to elements
15. **Process in batches**: If many elements, process in groups of 10-15
16. **Show progress**: Display which elements are being updated

### Phase 5: Verification & Reporting
17. **Verify application**: Check that classes were applied correctly
18. **Generate report**: Show what was created/updated
19. **Provide documentation**: Explain the FlowKit structure used
20. **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             2x large text (32px)
fk-text-3xl             3x large text (48px)
fk-text-bold            Bold weight (700)
fk-text-semibold        Semibold weight (600)
fk-text-medium          Medium weight (500)
fk-text-light           Light weight (300)
fk-text-center          Center aligned
fk-text-left            Left aligned
fk-text-right           Right aligned
fk-text-uppercase       Uppercase transform
fk-text-lowercase       Lowercase transform
fk-text-capitalize      Capitalize transform
```

### Spacing Utilities

```
fk-space-xs             4px spacing
fk-space-sm             8px spacing
fk-space-md             16px spacing (default)
fk-space-lg             24px spacing
fk-space-xl             32px spacing
fk-space-2xl            48px spacing
fk-space-3xl            64px spacing

Directional Spacing:
fk-py-[size]            Padding vertical (top + bottom)
fk-px-[size]            Padding horizontal (left + right)
fk-pt-[size]            Padding top
fk-pb-[size]            Padding bottom
fk-pl-[size]            Padding left
fk-pr-[size]            Padding right

fk-my-[size]            Margin vertical (top + bottom)
fk-mx-[size]            Margin horizontal (left + right)
fk-mt-[size]            Margin top
fk-mb-[size]            Margin bottom
fk-ml-[size]            Margin left
fk-mr-[size]            Margin right
```

### Color Utilities

```
fk-bg-primary           Primary background color
fk-bg-secondary         Secondary background color
fk-bg-accent            Accent background color
fk-bg-light             Light background
fk-bg-dark              Dark background
fk-text-primary         Primary text color
fk-text-secondary       Secondary text color
fk-text-muted           Muted text color
```

### Border & Visual Utilities

```
fk-rounded              Border radius (default)
fk-rounded-sm           Small border radius
fk-rounded-lg           Large border radius
fk-rounded-full         Fully rounded (pill/circle)
fk-border               Border (1px solid)
fk-border-top           Border top only
fk-border-bottom        Border bottom only
fk-shadow               Box shadow (default)
fk-shadow-sm            Small shadow
fk-shadow-lg            Large shadow
```

### State Modifiers (Combo Classes)

```
is-active               Active state (navigation, tabs)
is-hidden               Hidden visibility
is-visible              Visible visibility
is-disabled             Disabled state
is-loading              Loading state
is-error                Error state
is-success              Success state
is-primary              Primary variant
is-secondary            Secondary variant
is-featured             Featured/highlighted variant
is-horizontal           Horizontal layout variant
is-vertical             Vertical layout variant
```

## Examples

### Example 1: Creating Hero Section

**User prompt:**
```
Build a hero section with FlowKit naming
```

**Step 1: Analysis**
```
🎨 FlowKit Hero Section Structure

I'll create a hero section following FlowKit v2 conventions.

Structure:
fk-section (wrapper with padding)
└── fk-