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