[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-mcpflowkit-naming":3,"mdc-eq78ll-key":37,"related-org-webflow-webflow-mcpflowkit-naming":3823,"related-repo-webflow-webflow-mcpflowkit-naming":4012},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":32,"sourceUrl":35,"mdContent":36},"webflow-mcpflowkit-naming","webflow-mcp:flowkit-naming","apply Flowkit CSS naming in Webflow","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).",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,18,21],{"name":14,"slug":15,"type":16},"CSS","css","tag",{"name":10,"slug":9,"type":16},{"name":19,"slug":20,"type":16},"Design System","design-system",{"name":22,"slug":23,"type":16},"Frontend","frontend",107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-07-21T05:37:27.64071",null,17,[30,31],"agent","skills",{"repoUrl":25,"stars":24,"forks":28,"topics":33,"description":34},[30,31],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fflowkit-naming","---\nname: webflow-mcp:flowkit-naming\ndescription: 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).\nmcp-version: 2.0.1\n---\n\n# Flowkit Naming System\n\nApply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.\n\n## Important Note\n\n**ALWAYS use Webflow MCP tools for all operations:**\n- Use Webflow MCP's `webflow_guide_tool` to get best practices before starting\n- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify the target site\n- Use Webflow MCP's `data_pages_tool` with action `list_pages` to find the target page by name or slug — headless, no Designer needed\n- Use Webflow MCP's `data_element_tool` to inspect current classes and apply new ones — headless, pass the page's ID directly\n- Use Webflow MCP's `data_style_tool` to create and update FlowKit-compliant styles — headless\n- Use Webflow MCP's `webflow_guide_tool` to understand supported style properties\n- 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\n- DO NOT use any other tools or methods for Webflow operations\n- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)\n- **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.\n\n## Instructions\n\n### Phase 1: Discovery & Setup\n1. **Identify the task**: Determine if user is:\n   - Creating new component classes\n   - Auditing existing class names\n   - Building complete page sections\n   - Refactoring non-FlowKit classes to FlowKit\n2. **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.\n3. **Ask for scope**: Clarify which elements or sections to work with\n\n### Phase 2: Analysis (if auditing existing)\n4. **Get all elements**: Use Webflow MCP's `data_element_tool` to retrieve elements from the target page\n5. **Extract classes**: Identify all class names currently applied\n6. **Categorize issues**:\n   - Missing `fk-` prefix\n   - Incorrect case (uppercase\u002Fmixed case)\n   - Wrong separators (underscores instead of hyphens)\n   - Non-semantic naming\n   - Inconsistent component structure\n7. **Generate audit report**: Show current vs suggested FlowKit-compliant names\n\n### Phase 3: Suggestion Generation\n8. **Apply FlowKit patterns**: Generate class names following FlowKit v2 conventions\n9. **Structure by type**:\n    - Component wrappers: `fk-[component]`\n    - Child elements: `fk-[component]-[element]`\n    - State modifiers: combo classes with `is-[state]`\n    - Layout utilities: `fk-flex`, `fk-grid`, `fk-stack`\n    - Spacing utilities: `fk-space-[size]`, `fk-py-[size]`, `fk-px-[size]`\n    - Typography utilities: `fk-text-[style]`\n10. **Validate suggestions**: Ensure all suggestions follow FlowKit conventions\n11. **Show preview**: Display hierarchical structure with suggested classes\n\n### Phase 4: Application (if user confirms)\n12. **Create styles**: Use Webflow MCP's `data_style_tool` to create new FlowKit-compliant class styles\n13. **Update elements**: Use Webflow MCP's `data_element_tool` to apply classes to elements\n14. **Process in batches**: If many elements, process in groups of 10-15\n15. **Show progress**: Display which elements are being updated\n\n### Phase 5: Verification & Reporting\n16. **Verify application**: Check that classes were applied correctly\n17. **Generate report**: Show what was created\u002Fupdated\n18. **Provide documentation**: Explain the FlowKit structure used\n19. **Suggest next steps**: Recommend additional FlowKit patterns to implement\n\n## FlowKit Naming Reference\n\n### Core Naming Patterns\n\n| Pattern | Purpose | Example |\n|---------|---------|---------|\n| `fk-[component]` | Component wrapper (base class) | `fk-card`, `fk-nav`, `fk-hero` |\n| `fk-[component]-[element]` | Child element within component | `fk-card-title`, `fk-nav-link` |\n| `fk-[component].[modifier]` | Combo class modifier (state\u002Fvariant) | `fk-card.is-featured` |\n| `fk-text-[style]` | Typography utility | `fk-text-xl`, `fk-text-bold` |\n| `fk-flex` \u002F `fk-grid` | Layout utilities | `fk-flex-center`, `fk-grid-3` |\n| `fk-space-[size]` | Spacing utilities | `fk-space-md`, `fk-py-lg` |\n| `is-[state]` | State modifiers (combo) | `is-active`, `is-hidden`, `is-disabled` |\n\n### Layout Utilities\n\n```\nfk-section              Section wrapper with padding\nfk-container            Max-width container (centered)\nfk-flex                 Flexbox container\nfk-flex-center          Centered flex (both axes)\nfk-flex-between         Space-between flex\nfk-flex-around          Space-around flex\nfk-flex-col             Flex column direction\nfk-grid                 Grid container (base)\nfk-grid-2               2-column grid\nfk-grid-3               3-column grid\nfk-grid-4               4-column grid\nfk-grid-6               6-column grid\nfk-stack                Vertical stack (gap between items)\nfk-row                  Horizontal row\nfk-wrap                 Flex wrap enabled\n```\n\n### Typography Utilities\n\n```\nfk-text-xs              Extra small text (12px)\nfk-text-sm              Small text (14px)\nfk-text-md              Medium text (16px - default)\nfk-text-lg              Large text (18px)\nfk-text-xl              Extra large text (24px)\nfk-text-2xl             2x large text (32px)\nfk-text-3xl             3x large text (48px)\nfk-text-bold            Bold weight (700)\nfk-text-semibold        Semibold weight (600)\nfk-text-medium          Medium weight (500)\nfk-text-light           Light weight (300)\nfk-text-center          Center aligned\nfk-text-left            Left aligned\nfk-text-right           Right aligned\nfk-text-uppercase       Uppercase transform\nfk-text-lowercase       Lowercase transform\nfk-text-capitalize      Capitalize transform\n```\n\n### Spacing Utilities\n\n```\nfk-space-xs             4px spacing\nfk-space-sm             8px spacing\nfk-space-md             16px spacing (default)\nfk-space-lg             24px spacing\nfk-space-xl             32px spacing\nfk-space-2xl            48px spacing\nfk-space-3xl            64px spacing\n\nDirectional Spacing:\nfk-py-[size]            Padding vertical (top + bottom)\nfk-px-[size]            Padding horizontal (left + right)\nfk-pt-[size]            Padding top\nfk-pb-[size]            Padding bottom\nfk-pl-[size]            Padding left\nfk-pr-[size]            Padding right\n\nfk-my-[size]            Margin vertical (top + bottom)\nfk-mx-[size]            Margin horizontal (left + right)\nfk-mt-[size]            Margin top\nfk-mb-[size]            Margin bottom\nfk-ml-[size]            Margin left\nfk-mr-[size]            Margin right\n```\n\n### Color Utilities\n\n```\nfk-bg-primary           Primary background color\nfk-bg-secondary         Secondary background color\nfk-bg-accent            Accent background color\nfk-bg-light             Light background\nfk-bg-dark              Dark background\nfk-text-primary         Primary text color\nfk-text-secondary       Secondary text color\nfk-text-muted           Muted text color\n```\n\n### Border & Visual Utilities\n\n```\nfk-rounded              Border radius (default)\nfk-rounded-sm           Small border radius\nfk-rounded-lg           Large border radius\nfk-rounded-full         Fully rounded (pill\u002Fcircle)\nfk-border               Border (1px solid)\nfk-border-top           Border top only\nfk-border-bottom        Border bottom only\nfk-shadow               Box shadow (default)\nfk-shadow-sm            Small shadow\nfk-shadow-lg            Large shadow\n```\n\n### State Modifiers (Combo Classes)\n\n```\nis-active               Active state (navigation, tabs)\nis-hidden               Hidden visibility\nis-visible              Visible visibility\nis-disabled             Disabled state\nis-loading              Loading state\nis-error                Error state\nis-success              Success state\nis-primary              Primary variant\nis-secondary            Secondary variant\nis-featured             Featured\u002Fhighlighted variant\nis-horizontal           Horizontal layout variant\nis-vertical             Vertical layout variant\n```\n\n## Examples\n\n### Example 1: Creating Hero Section\n\n**User prompt:**\n```\nBuild a hero section with FlowKit naming\n```\n\n**Step 1: Analysis**\n```\n🎨 FlowKit Hero Section Structure\n\nI'll create a hero section following FlowKit v2 conventions.\n\nStructure:\nfk-section (wrapper with padding)\n└── fk-container (max-width container)\n    └── fk-hero (component wrapper)\n        ├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center\n        │   ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm\n        │   ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md\n        │   ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg\n        │   └── fk-hero-actions + fk-flex + fk-space-md\n        │       ├── fk-button.is-primary\n        │       └── fk-button.is-secondary\n        └── fk-hero-image + fk-rounded-lg\n\nTotal classes to create: 12 base classes + 2 combo classes\nReady to create these in Webflow Designer? (yes\u002Fno)\n```\n\n**Step 2: After user confirms**\n```\n🔄 Creating FlowKit Hero Classes...\n\nProgress: ████████████████████ 100% (14\u002F14 classes)\n\n✅ Classes Created:\n\n**Layout Classes:**\n- ✅ fk-section - Section wrapper with padding\n- ✅ fk-container - Max-width container\n- ✅ fk-hero - Hero component wrapper\n\n**Element Classes:**\n- ✅ fk-hero-content - Hero content container\n- ✅ fk-hero-eyebrow - Small label above title\n- ✅ fk-hero-title - Main hero heading\n- ✅ fk-hero-subtitle - Supporting text\n- ✅ fk-hero-actions - Button container\n- ✅ fk-hero-image - Hero image wrapper\n\n**Utility Classes:**\n- ✅ fk-flex, fk-flex-col, fk-flex-center\n- ✅ fk-text-sm, fk-text-lg, fk-text-3xl\n- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted\n- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg\n- ✅ fk-space-md, fk-rounded-lg\n\n**Component Classes:**\n- ✅ fk-button (with combo classes: is-primary, is-secondary)\n\n---\n\n📋 Usage Guide:\n\n1. Create a Section element → Apply `fk-section`\n2. Add Container inside → Apply `fk-container`\n3. Add Div inside → Apply `fk-hero`\n4. Build content structure following the hierarchy above\n5. Use combo classes for button variants: `fk-button.is-primary`\n\n🎉 Your FlowKit hero section structure is ready!\n```\n\n### Example 2: Auditing Existing Classes\n\n**User prompt:**\n```\nCheck these classes: feature-card, FK-Button, fk_hero_title, cardTitle\n```\n\n**Response:**\n```\n📋 FlowKit Audit Report\n\nChecking 4 classes against FlowKit v2 conventions...\n\n---\n\n## Issues Found: 4\n\n### 1. `feature-card` ⚠️\n**Issue:** Missing FlowKit prefix\n**Reason:** All FlowKit classes must start with `fk-`\n**Suggested:** `fk-feature-card` or `fk-card.is-feature`\n**Fix:** Rename class to include `fk-` prefix\n\n### 2. `FK-Button` ❌\n**Issue:** Incorrect case (uppercase)\n**Reason:** FlowKit uses lowercase only\n**Suggested:** `fk-button`\n**Fix:** Convert to lowercase: `fk-button`\n\n### 3. `fk_hero_title` ❌\n**Issue:** Wrong separator (underscore)\n**Reason:** FlowKit uses hyphens, not underscores\n**Suggested:** `fk-hero-title`\n**Fix:** Replace underscores with hyphens\n\n### 4. `cardTitle` ❌\n**Issue:** Multiple violations\n  - Missing `fk-` prefix\n  - CamelCase instead of kebab-case\n**Reason:** FlowKit requires `fk-` prefix and hyphen separation\n**Suggested:** `fk-card-title`\n**Fix:** Add prefix and convert to kebab-case\n\n---\n\n## FlowKit Naming Rules:\n\n✅ **Correct patterns:**\n- `fk-card` (component)\n- `fk-card-title` (element)\n- `fk-button.is-primary` (with modifier)\n- `fk-text-xl` (utility)\n\n❌ **Incorrect patterns:**\n- `card` (no prefix)\n- `FK-Card` (wrong case)\n- `fk_card` (wrong separator)\n- `cardTitle` (camelCase)\n\nWould you like me to rename these classes in Webflow Designer? (yes\u002Fno)\n```\n\n### Example 3: Building Card Component\n\n**User prompt:**\n```\nCreate a product card component with FlowKit classes\n```\n\n**Response:**\n```\n🎨 FlowKit Product Card Component\n\nStructure:\nfk-card (base component)\n├── fk-card-image-wrapper\n│   └── fk-card-image + fk-rounded-lg\n├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent\n├── fk-card-content + fk-space-md\n│   ├── fk-card-category + fk-text-sm + fk-text-muted\n│   ├── fk-card-title + fk-text-lg + fk-text-bold\n│   ├── fk-card-description + fk-text-md\n│   └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary\n└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top\n    ├── fk-card-rating + fk-flex + fk-space-xs\n    └── fk-button.is-primary + fk-text-sm\n\n---\n\n## Variants (Combo Classes):\n\n### Featured Card\n`fk-card.is-featured`\n- Highlighted border\u002Fshadow\n- Accent background\n- Use for promoted products\n\n### Horizontal Layout\n`fk-card.is-horizontal`\n- Side-by-side image\u002Fcontent\n- Better for list views\n- Image on left, content on right\n\n### Compact Size\n`fk-card.is-compact`\n- Reduced padding\n- Smaller text sizes\n- Use in tight layouts\n\n---\n\n## Responsive Modifiers:\n\nDesktop (default):\n- `fk-grid-3` (3 cards per row)\n\nTablet:\n- Add combo: `fk-grid-3.tablet-2`\n\nMobile:\n- Add combo: `fk-grid-3.tablet-2.mobile-1`\n\n---\n\nReady to create these classes? (yes\u002Fno)\n```\n\n### Example 4: Refactoring to FlowKit\n\n**User prompt:**\n```\nRefactor my navigation to use FlowKit naming\n```\n\n**Step 1: Current Analysis**\n```\n🔍 Analyzing Current Navigation Classes...\n\nFound 8 elements with non-FlowKit classes:\n├── navbar → fk-nav\n├── navbar-container → fk-nav-container\n├── logo-wrapper → fk-nav-logo\n├── menu → fk-nav-menu\n├── menu-item → fk-nav-link\n├── menu-item active → fk-nav-link.is-active\n├── button-group → fk-nav-actions\n└── btn-primary → fk-button.is-primary\n\n---\n\n## Migration Plan:\n\n**Phase 1: Create FlowKit Classes** (8 classes)\n- Create all `fk-nav-*` classes\n- Create utility classes: `fk-flex`, `fk-flex-between`, `fk-flex-center`\n- Create `fk-button` with `is-primary` modifier\n\n**Phase 2: Update Elements** (8 elements)\n- Replace old classes with new FlowKit classes\n- Apply combo classes where needed\n- Preserve existing styles\n\n**Phase 3: Cleanup** (optional)\n- Old classes can be removed after verification\n- Keep for now to maintain backwards compatibility\n\n---\n\nProceed with migration? (yes\u002Fno)\n```\n\n**Step 2: After Migration**\n```\n✅ Navigation Refactored to FlowKit\n\n**Classes Created:** 8\n**Elements Updated:** 8\n**Time elapsed:** ~3 seconds\n\n---\n\n## Updated Structure:\n\nfk-nav\n├── fk-nav-container + fk-flex + fk-flex-between\n│   ├── fk-nav-logo\n│   ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md\n│   │   ├── fk-nav-link (x5)\n│   │   └── fk-nav-link.is-active (current page)\n│   └── fk-nav-actions + fk-flex + fk-space-sm\n│       ├── fk-button.is-secondary\n│       └── fk-button.is-primary\n\n---\n\n## Before → After:\n\n| Old Class | New FlowKit Class |\n|-----------|-------------------|\n| navbar | fk-nav ✅ |\n| navbar-container | fk-nav-container ✅ |\n| logo-wrapper | fk-nav-logo ✅ |\n| menu | fk-nav-menu ✅ |\n| menu-item | fk-nav-link ✅ |\n| menu-item active | fk-nav-link.is-active ✅ |\n| button-group | fk-nav-actions ✅ |\n| btn-primary | fk-button.is-primary ✅ |\n\n---\n\n🎉 Navigation is now FlowKit compliant!\n\n**Next steps:**\n- Test navigation on all breakpoints\n- Verify active states work correctly\n- Consider adding `fk-nav.is-transparent` for transparent header variant\n- Consider adding `fk-nav.is-sticky` for sticky navigation\n```\n\n## Guidelines\n\n### Phase 1: Critical Requirements\n\n**FlowKit Prefix Rule:**\n- ALL component and element classes MUST start with `fk-`\n- Exception: State modifiers use `is-` prefix (as combo classes)\n- Exception: Utility classes for third-party integrations may omit prefix\n\n**Case Sensitivity:**\n- All class names are lowercase only\n- No uppercase letters anywhere\n- No camelCase or PascalCase\n\n**Separator Rule:**\n- Use hyphens (`-`) to separate words\n- Never use underscores (`_`)\n- Never use spaces or special characters\n\n**Naming Structure:**\n```\nComponent:        fk-[component]\nElement:          fk-[component]-[element]\nSub-element:      fk-[component]-[element]-[detail]\nUtility:          fk-[property]-[value]\nState modifier:   is-[state] (combo class only)\nResponsive:       .[breakpoint]-[value] (combo class)\n```\n\n### Phase 2: Component Naming Rules\n\n**Component Names:**\n- Keep concise and semantic\n- Use common web component terms: `card`, `nav`, `hero`, `footer`\n- Avoid overly specific names: prefer `fk-card` over `fk-product-feature-card`\n- Use modifiers for variants: `fk-card.is-featured` not `fk-card-featured`\n\n**Element Hierarchy:**\n- Parent component: `fk-card`\n- Direct children: `fk-card-[element]` (e.g., `fk-card-title`)\n- Deep nesting: Avoid more than 3 levels\n- Bad: `fk-card-content-section-text-wrapper`\n- Good: `fk-card-content`, `fk-card-text`\n\n**Common Component Patterns:**\n\n**Cards:**\n```\nfk-card\n├── fk-card-image\n├── fk-card-content\n│   ├── fk-card-title\n│   └── fk-card-text\n└── fk-card-footer\n```\n\n**Navigation:**\n```\nfk-nav\n├── fk-nav-logo\n├── fk-nav-menu\n│   └── fk-nav-link\n└── fk-nav-actions\n```\n\n**Hero:**\n```\nfk-hero\n├── fk-hero-content\n│   ├── fk-hero-title\n│   ├── fk-hero-subtitle\n│   └── fk-hero-actions\n└── fk-hero-media\n```\n\n**Forms:**\n```\nfk-form\n├── fk-form-group\n│   ├── fk-form-label\n│   └── fk-form-input\n└── fk-form-actions\n```\n\n### Phase 3: Utility Classes\n\n**Utility Naming:**\n- Format: `fk-[property]-[value]`\n- Examples: `fk-text-lg`, `fk-space-md`, `fk-grid-3`\n\n**Spacing Utilities:**\n- Use t-shirt sizing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`\n- Directional: `py` (vertical), `px` (horizontal), `pt` (top), `pr` (right), `pb` (bottom), `pl` (left)\n- Same for margins: `my`, `mx`, `mt`, `mr`, `mb`, `ml`\n\n**Typography Utilities:**\n- Size: `fk-text-[xs|sm|md|lg|xl|2xl|3xl]`\n- Weight: `fk-text-[light|medium|semibold|bold]`\n- Alignment: `fk-text-[left|center|right]`\n- Transform: `fk-text-[uppercase|lowercase|capitalize]`\n\n**Layout Utilities:**\n- Flexbox: `fk-flex`, `fk-flex-col`, `fk-flex-center`, `fk-flex-between`\n- Grid: `fk-grid`, `fk-grid-2`, `fk-grid-3`, `fk-grid-4`, `fk-grid-6`\n- Container: `fk-container`, `fk-section`\n\n### Phase 4: State Modifiers (Combo Classes)\n\n**State Modifier Rules:**\n- Always use as combo classes with `is-` prefix\n- Applied in addition to base class\n- Example: `\u003Cdiv class=\"fk-button is-primary\">...\u003C\u002Fdiv>`\n\n**Common States:**\n```\nis-active           Currently active\u002Fselected\nis-disabled         Disabled interaction\nis-hidden           Hidden visibility\nis-visible          Visible (override hidden)\nis-loading          Loading state\nis-error            Error state\nis-success          Success state\nis-primary          Primary variant\nis-secondary        Secondary variant\nis-tertiary         Tertiary variant\nis-featured         Featured\u002Fhighlighted\nis-horizontal       Horizontal layout\nis-vertical         Vertical layout\nis-expanded         Expanded state (accordions, dropdowns)\nis-collapsed        Collapsed state\n```\n\n**Applying Combo Classes in Webflow:**\n1. Select element\n2. Add base class: `fk-button`\n3. Add combo class: `is-primary`\n4. Element has both classes: `fk-button is-primary`\n5. Style the combo: `.fk-button.is-primary { ... }`\n\n### Phase 5: Responsive Design\n\n**Responsive Modifiers:**\n- FlowKit uses combo classes for responsive behavior\n- Format: `.[breakpoint]-[value]`\n- Example: `fk-grid-4.tablet-2.mobile-1`\n\n**Breakpoints:**\n```\nDesktop (default):   No modifier needed\nTablet:              .tablet-[value]\nMobile:              .mobile-[value]\n```\n\n**Responsive Grid Example:**\n```\nBase: fk-grid-4 (4 columns on desktop)\n+ Combo: .tablet-2 (2 columns on tablet)\n+ Combo: .mobile-1 (1 column on mobile)\n\nResult: \u003Cdiv class=\"fk-grid-4 tablet-2 mobile-1\">\n```\n\n**Responsive Text Example:**\n```\nBase: fk-text-3xl (48px on desktop)\n+ Combo: .tablet-2xl (32px on tablet)\n+ Combo: .mobile-xl (24px on mobile)\n\nResult: \u003Cdiv class=\"fk-text-3xl tablet-2xl mobile-xl\">\n```\n\n### Phase 6: Best Practices\n\n**Always:**\n- ✅ Use `fk-` prefix for all components and elements\n- ✅ Use hyphens to separate words\n- ✅ Use lowercase only\n- ✅ Keep component names semantic and concise\n- ✅ Use combo classes for modifiers and states\n- ✅ Combine utilities freely (`fk-flex fk-flex-center fk-space-md`)\n- ✅ Follow component-element hierarchy\n- ✅ Use responsive combo classes for breakpoints\n\n**Never:**\n- ❌ Omit `fk-` prefix from components\n- ❌ Use underscores or spaces\n- ❌ Use uppercase or camelCase\n- ❌ Create overly specific class names\n- ❌ Nest elements more than 3 levels deep\n- ❌ Mix FlowKit with other naming systems\n- ❌ Create standalone modifier classes (use combo classes)\n\n**Component vs Utility:**\n\nUse **components** when:\n- Building reusable UI patterns (cards, buttons, navigation)\n- Need semantic meaning\n- Multiple instances across site\n- Example: `fk-card`, `fk-nav`, `fk-hero`\n\nUse **utilities** when:\n- Applying single-purpose styling (spacing, typography, layout)\n- Quick adjustments without new classes\n- Consistent spacing\u002Fsizing across site\n- Example: `fk-text-lg`, `fk-space-md`, `fk-flex-center`\n\n**Utility Stacking:**\nUtilities can be freely combined:\n```html\n\u003Cdiv class=\"fk-flex fk-flex-center fk-space-md fk-py-lg\">\n  Content\n\u003C\u002Fdiv>\n```\n\n**Component + Utility Combo:**\n```html\n\u003Cdiv class=\"fk-card fk-shadow-lg fk-rounded-lg\">\n  \u003Cdiv class=\"fk-card-content fk-space-lg\">\n    \u003Ch3 class=\"fk-card-title fk-text-xl fk-text-bold\">Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Phase 7: Common Mistakes & Fixes\n\n**Mistake 1: Missing Prefix**\n```\n❌ card, button, nav\n✅ fk-card, fk-button, fk-nav\n```\n\n**Mistake 2: Wrong Case**\n```\n❌ FK-Card, fk-Button, Fk-nav\n✅ fk-card, fk-button, fk-nav\n```\n\n**Mistake 3: Wrong Separator**\n```\n❌ fk_card_title, fk.card.title\n✅ fk-card-title\n```\n\n**Mistake 4: camelCase\u002FPascalCase**\n```\n❌ fkCardTitle, FkCardTitle\n✅ fk-card-title\n```\n\n**Mistake 5: Modifier as Standalone Class**\n```\n❌ \u003Cdiv class=\"fk-button-primary\">\n✅ \u003Cdiv class=\"fk-button is-primary\">\n```\n\n**Mistake 6: Too Much Nesting**\n```\n❌ fk-hero-content-wrapper-section-title-text\n✅ fk-hero-content, fk-hero-title\n```\n\n**Mistake 7: Overly Specific Names**\n```\n❌ fk-product-feature-card-with-image-and-price\n✅ fk-card (use combo: is-product)\n```\n\n**Mistake 8: Wrong Responsive Pattern**\n```\n❌ fk-grid-3-tablet-2 (single class)\n✅ fk-grid-3 tablet-2 (two classes)\n```\n\n### Phase 8: FlowKit Version Notes\n\n**FlowKit v2 (Current):**\n- New naming conventions (documented here)\n- Enhanced grid system with responsive combos\n- Expanded utility collection\n- Improved component library\n- Better variable system\n\n**Key v2 Changes:**\n- Standardized `fk-` prefix across all components\n- Introduced `is-` prefix for state modifiers (combo classes)\n- Added responsive combo classes (`.tablet-`, `.mobile-`)\n- Expanded spacing scale (xs to 3xl)\n- More semantic utility names\n\n**Migration from v1:**\nIf user has v1 FlowKit classes:\n1. Add `fk-` prefix where missing\n2. Convert modifiers to `is-` combo classes\n3. Update responsive classes to combo format\n4. Check spacing utilities for new scale\n\n### Phase 9: Performance Optimization\n\n**Class Creation:**\n- Create base component classes first\n- Then create element classes\n- Finally create utility classes\n- Use `data_style_tool` in batches of 10-15 classes\n\n**Element Updates:**\n- Process elements in groups of 10-15\n- Show progress for large batches\n- If >50 elements, ask user to confirm batch size\n\n**Designer Connection (only if using the optional `designer_tool` convenience):**\n- Class inspection, style creation, and element updates (`data_element_tool`, `data_style_tool`) never need Designer — this only applies if the user asked to work with the page currently open in Designer, or to interactively select elements\n- If connection lost mid-batch, pause and ask user to reconnect before the next `designer_tool` action\n- Save progress between batches\n\n### Phase 10: Error Handling\n\n**Common Errors:**\n\n**1. Designer Not Connected (only relevant when using `designer_tool`):**\n```\n❌ Error: Cannot get current page or select elements - Designer not connected\n\nSolution:\n1. Open Webflow Designer\n2. Open the target site\n3. Connect to Designer in Claude Code\n4. Retry operation\n\n(Not needed for the default headless workflow — use `data_pages_tool` with `list_pages` instead.)\n```\n\n**2. Class Already Exists:**\n```\n⚠️ Warning: Class 'fk-button' already exists\n\nOptions:\n1. Skip creation (use existing)\n2. Update existing class\n3. Create with different name\n```\n\n**3. Invalid Class Name:**\n```\n❌ Error: Class name 'fk-My Button' is invalid\n\nIssues:\n- Contains spaces\n- Contains uppercase\n\nSuggested: 'fk-my-button'\n```\n\n**4. Style Property Not Supported:**\n```\n⚠️ Warning: Property 'custom-property' not supported\n\nThis may be:\n- Custom CSS property\n- Webflow doesn't support via Designer API\n- Typo in property name\n\nRecommendation: Apply manually in Designer\n```\n\n## Edge Cases\n\n**Case 1: Third-Party Integration Classes**\nIf integrating with third-party libraries (e.g., animations, sliders):\n- Keep third-party classes separate\n- Add FlowKit wrapper: `\u003Cdiv class=\"fk-slider\">\u003Cdiv class=\"swiper\">...\u003C\u002Fdiv>\u003C\u002Fdiv>`\n- Don't force FlowKit naming on third-party classes\n\n**Case 2: Legacy Code Migration**\nWhen migrating large existing site:\n- Create FlowKit classes first\n- Apply to new sections\n- Gradually refactor old sections\n- Keep both systems temporarily for backwards compatibility\n\n**Case 3: Custom Naming Requirements**\nIf client has existing naming system:\n- Discuss FlowKit benefits\n- Show side-by-side comparison\n- Offer hybrid approach: FlowKit for new components, keep old for existing\n- Or fully refactor (more time, better long-term)\n\n**Case 4: Component Library Conflicts**\nIf site uses another framework (Bootstrap, Tailwind):\n- FlowKit can coexist but not recommended\n- Choose one primary system\n- Use FlowKit for custom components\n- Use other framework for pre-built components\n\n**Case 5: Utility Class Explosion**\nIf too many utility classes on single element:\n- Consider creating component class instead\n- Example: Instead of `fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow`\n- Create: `fk-panel` with those properties built-in\n\n## Production Checklist\n\nBefore considering FlowKit implementation complete:\n\n**Setup:**\n- [ ] Target site identified\n- [ ] Target page found (via `data_pages_tool` list_pages, or `designer_tool` if using the current open page)\n- [ ] Scope defined with user\n\n**Component Structure:**\n- [ ] All components use `fk-` prefix\n- [ ] Component hierarchy is logical (max 3 levels)\n- [ ] Element names are semantic\n- [ ] Modifiers use combo classes with `is-` prefix\n\n**Utilities:**\n- [ ] Spacing utilities use t-shirt sizing (xs-3xl)\n- [ ] Typography utilities cover all text styles\n- [ ] Layout utilities handle flex\u002Fgrid needs\n- [ ] Color utilities align with brand\n\n**Responsive:**\n- [ ] Responsive combo classes defined for key components\n- [ ] Breakpoint modifiers tested (tablet, mobile)\n- [ ] Grid systems adapt properly\n\n**States:**\n- [ ] State modifiers defined (is-active, is-disabled, etc.)\n- [ ] Hover\u002Ffocus states work correctly\n- [ ] Active states styled properly\n\n**Documentation:**\n- [ ] Component structure documented\n- [ ] Utility classes listed\n- [ ] Responsive behavior explained\n- [ ] State modifiers documented\n\n**Validation:**\n- [ ] All classes follow naming conventions\n- [ ] No uppercase letters\n- [ ] No underscores\n- [ ] All have proper prefixes\n\n**Performance:**\n- [ ] Classes created in batches\n- [ ] Progress shown for large operations\n- [ ] No duplicate classes created\n\n**User Experience:**\n- [ ] Clear feedback provided\n- [ ] Progress indicators shown\n- [ ] Success confirmation given\n- [ ] Next steps recommended\n",{"data":38,"body":40},{"name":5,"description":7,"mcp-version":39},"2.0.1",{"type":41,"children":42},"root",[43,52,58,65,74,214,220,227,311,317,403,409,550,556,612,618,662,668,674,946,952,964,970,979,985,994,1000,1009,1015,1024,1030,1039,1045,1051,1059,1068,1076,1085,1093,1102,1108,1115,1124,1132,1141,1147,1154,1163,1170,1179,1185,1192,1201,1209,1218,1226,1235,1241,1247,1255,1286,1294,1312,1320,1354,1362,1371,1377,1385,1461,1469,1535,1543,1551,1560,1568,1577,1585,1594,1602,1611,1617,1625,1662,1670,1825,1833,1880,1888,1976,1982,1990,2020,2028,2037,2045,2097,2103,2111,2139,2147,2156,2164,2173,2181,2190,2196,2204,2261,2269,2314,2322,2334,2373,2383,2422,2432,2517,2525,2692,2698,2706,2715,2723,2732,2740,2749,2757,2766,2774,2783,2791,2800,2808,2817,2825,2834,2840,2848,2876,2884,2940,2950,2987,2993,3001,3030,3038,3056,3071,3109,3115,3123,3138,3147,3155,3164,3172,3181,3189,3198,3204,3214,3238,3248,3271,3281,3304,3314,3337,3347,3379,3385,3390,3398,3448,3456,3508,3516,3556,3564,3595,3603,3634,3642,3682,3690,3730,3738,3769,3777,3817],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"flowkit-naming-system",[49],{"type":50,"value":51},"text","Flowkit Naming System",{"type":44,"tag":53,"props":54,"children":55},"p",{},[56],{"type":50,"value":57},"Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.",{"type":44,"tag":59,"props":60,"children":62},"h2",{"id":61},"important-note",[63],{"type":50,"value":64},"Important Note",{"type":44,"tag":53,"props":66,"children":67},{},[68],{"type":44,"tag":69,"props":70,"children":71},"strong",{},[72],{"type":50,"value":73},"ALWAYS use Webflow MCP tools for all operations:",{"type":44,"tag":75,"props":76,"children":77},"ul",{},[78,93,113,132,144,156,167,179,184,197],{"type":44,"tag":79,"props":80,"children":81},"li",{},[82,84,91],{"type":50,"value":83},"Use Webflow MCP's ",{"type":44,"tag":85,"props":86,"children":88},"code",{"className":87},[],[89],{"type":50,"value":90},"webflow_guide_tool",{"type":50,"value":92}," to get best practices before starting",{"type":44,"tag":79,"props":94,"children":95},{},[96,97,103,105,111],{"type":50,"value":83},{"type":44,"tag":85,"props":98,"children":100},{"className":99},[],[101],{"type":50,"value":102},"data_sites_tool",{"type":50,"value":104}," with action ",{"type":44,"tag":85,"props":106,"children":108},{"className":107},[],[109],{"type":50,"value":110},"list_sites",{"type":50,"value":112}," to identify the target site",{"type":44,"tag":79,"props":114,"children":115},{},[116,117,123,124,130],{"type":50,"value":83},{"type":44,"tag":85,"props":118,"children":120},{"className":119},[],[121],{"type":50,"value":122},"data_pages_tool",{"type":50,"value":104},{"type":44,"tag":85,"props":125,"children":127},{"className":126},[],[128],{"type":50,"value":129},"list_pages",{"type":50,"value":131}," to find the target page by name or slug — headless, no Designer needed",{"type":44,"tag":79,"props":133,"children":134},{},[135,136,142],{"type":50,"value":83},{"type":44,"tag":85,"props":137,"children":139},{"className":138},[],[140],{"type":50,"value":141},"data_element_tool",{"type":50,"value":143}," to inspect current classes and apply new ones — headless, pass the page's ID directly",{"type":44,"tag":79,"props":145,"children":146},{},[147,148,154],{"type":50,"value":83},{"type":44,"tag":85,"props":149,"children":151},{"className":150},[],[152],{"type":50,"value":153},"data_style_tool",{"type":50,"value":155}," to create and update FlowKit-compliant styles — headless",{"type":44,"tag":79,"props":157,"children":158},{},[159,160,165],{"type":50,"value":83},{"type":44,"tag":85,"props":161,"children":163},{"className":162},[],[164],{"type":50,"value":90},{"type":50,"value":166}," to understand supported style properties",{"type":44,"tag":79,"props":168,"children":169},{},[170,171,177],{"type":50,"value":83},{"type":44,"tag":85,"props":172,"children":174},{"className":173},[],[175],{"type":50,"value":176},"designer_tool",{"type":50,"value":178}," 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",{"type":44,"tag":79,"props":180,"children":181},{},[182],{"type":50,"value":183},"DO NOT use any other tools or methods for Webflow operations",{"type":44,"tag":79,"props":185,"children":186},{},[187,189,195],{"type":50,"value":188},"All tool calls must include the required ",{"type":44,"tag":85,"props":190,"children":192},{"className":191},[],[193],{"type":50,"value":194},"context",{"type":50,"value":196}," parameter (15-25 words, third-person perspective)",{"type":44,"tag":79,"props":198,"children":199},{},[200,205,207,212],{"type":44,"tag":69,"props":201,"children":202},{},[203],{"type":50,"value":204},"No Designer connection is required for the core workflow.",{"type":50,"value":206}," 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 ",{"type":44,"tag":85,"props":208,"children":210},{"className":209},[],[211],{"type":50,"value":176},{"type":50,"value":213}," conveniences above.",{"type":44,"tag":59,"props":215,"children":217},{"id":216},"instructions",[218],{"type":50,"value":219},"Instructions",{"type":44,"tag":221,"props":222,"children":224},"h3",{"id":223},"phase-1-discovery-setup",[225],{"type":50,"value":226},"Phase 1: Discovery & Setup",{"type":44,"tag":228,"props":229,"children":230},"ol",{},[231,264,301],{"type":44,"tag":79,"props":232,"children":233},{},[234,239,241],{"type":44,"tag":69,"props":235,"children":236},{},[237],{"type":50,"value":238},"Identify the task",{"type":50,"value":240},": Determine if user is:\n",{"type":44,"tag":75,"props":242,"children":243},{},[244,249,254,259],{"type":44,"tag":79,"props":245,"children":246},{},[247],{"type":50,"value":248},"Creating new component classes",{"type":44,"tag":79,"props":250,"children":251},{},[252],{"type":50,"value":253},"Auditing existing class names",{"type":44,"tag":79,"props":255,"children":256},{},[257],{"type":50,"value":258},"Building complete page sections",{"type":44,"tag":79,"props":260,"children":261},{},[262],{"type":50,"value":263},"Refactoring non-FlowKit classes to FlowKit",{"type":44,"tag":79,"props":265,"children":266},{},[267,272,274,279,280,285,287,292,293,299],{"type":44,"tag":69,"props":268,"children":269},{},[270],{"type":50,"value":271},"Get target page",{"type":50,"value":273},": Use Webflow MCP's ",{"type":44,"tag":85,"props":275,"children":277},{"className":276},[],[278],{"type":50,"value":122},{"type":50,"value":104},{"type":44,"tag":85,"props":281,"children":283},{"className":282},[],[284],{"type":50,"value":129},{"type":50,"value":286}," 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 ",{"type":44,"tag":85,"props":288,"children":290},{"className":289},[],[291],{"type":50,"value":176},{"type":50,"value":104},{"type":44,"tag":85,"props":294,"children":296},{"className":295},[],[297],{"type":50,"value":298},"get_current_page",{"type":50,"value":300}," instead.",{"type":44,"tag":79,"props":302,"children":303},{},[304,309],{"type":44,"tag":69,"props":305,"children":306},{},[307],{"type":50,"value":308},"Ask for scope",{"type":50,"value":310},": Clarify which elements or sections to work with",{"type":44,"tag":221,"props":312,"children":314},{"id":313},"phase-2-analysis-if-auditing-existing",[315],{"type":50,"value":316},"Phase 2: Analysis (if auditing existing)",{"type":44,"tag":228,"props":318,"children":320},{"start":319},4,[321,337,347,393],{"type":44,"tag":79,"props":322,"children":323},{},[324,329,330,335],{"type":44,"tag":69,"props":325,"children":326},{},[327],{"type":50,"value":328},"Get all elements",{"type":50,"value":273},{"type":44,"tag":85,"props":331,"children":333},{"className":332},[],[334],{"type":50,"value":141},{"type":50,"value":336}," to retrieve elements from the target page",{"type":44,"tag":79,"props":338,"children":339},{},[340,345],{"type":44,"tag":69,"props":341,"children":342},{},[343],{"type":50,"value":344},"Extract classes",{"type":50,"value":346},": Identify all class names currently applied",{"type":44,"tag":79,"props":348,"children":349},{},[350,355,357],{"type":44,"tag":69,"props":351,"children":352},{},[353],{"type":50,"value":354},"Categorize issues",{"type":50,"value":356},":\n",{"type":44,"tag":75,"props":358,"children":359},{},[360,373,378,383,388],{"type":44,"tag":79,"props":361,"children":362},{},[363,365,371],{"type":50,"value":364},"Missing ",{"type":44,"tag":85,"props":366,"children":368},{"className":367},[],[369],{"type":50,"value":370},"fk-",{"type":50,"value":372}," prefix",{"type":44,"tag":79,"props":374,"children":375},{},[376],{"type":50,"value":377},"Incorrect case (uppercase\u002Fmixed case)",{"type":44,"tag":79,"props":379,"children":380},{},[381],{"type":50,"value":382},"Wrong separators (underscores instead of hyphens)",{"type":44,"tag":79,"props":384,"children":385},{},[386],{"type":50,"value":387},"Non-semantic naming",{"type":44,"tag":79,"props":389,"children":390},{},[391],{"type":50,"value":392},"Inconsistent component structure",{"type":44,"tag":79,"props":394,"children":395},{},[396,401],{"type":44,"tag":69,"props":397,"children":398},{},[399],{"type":50,"value":400},"Generate audit report",{"type":50,"value":402},": Show current vs suggested FlowKit-compliant names",{"type":44,"tag":221,"props":404,"children":406},{"id":405},"phase-3-suggestion-generation",[407],{"type":50,"value":408},"Phase 3: Suggestion Generation",{"type":44,"tag":228,"props":410,"children":412},{"start":411},8,[413,423,530,540],{"type":44,"tag":79,"props":414,"children":415},{},[416,421],{"type":44,"tag":69,"props":417,"children":418},{},[419],{"type":50,"value":420},"Apply FlowKit patterns",{"type":50,"value":422},": Generate class names following FlowKit v2 conventions",{"type":44,"tag":79,"props":424,"children":425},{},[426,431,432],{"type":44,"tag":69,"props":427,"children":428},{},[429],{"type":50,"value":430},"Structure by type",{"type":50,"value":356},{"type":44,"tag":75,"props":433,"children":434},{},[435,446,457,468,494,519],{"type":44,"tag":79,"props":436,"children":437},{},[438,440],{"type":50,"value":439},"Component wrappers: ",{"type":44,"tag":85,"props":441,"children":443},{"className":442},[],[444],{"type":50,"value":445},"fk-[component]",{"type":44,"tag":79,"props":447,"children":448},{},[449,451],{"type":50,"value":450},"Child elements: ",{"type":44,"tag":85,"props":452,"children":454},{"className":453},[],[455],{"type":50,"value":456},"fk-[component]-[element]",{"type":44,"tag":79,"props":458,"children":459},{},[460,462],{"type":50,"value":461},"State modifiers: combo classes with ",{"type":44,"tag":85,"props":463,"children":465},{"className":464},[],[466],{"type":50,"value":467},"is-[state]",{"type":44,"tag":79,"props":469,"children":470},{},[471,473,479,481,487,488],{"type":50,"value":472},"Layout utilities: ",{"type":44,"tag":85,"props":474,"children":476},{"className":475},[],[477],{"type":50,"value":478},"fk-flex",{"type":50,"value":480},", ",{"type":44,"tag":85,"props":482,"children":484},{"className":483},[],[485],{"type":50,"value":486},"fk-grid",{"type":50,"value":480},{"type":44,"tag":85,"props":489,"children":491},{"className":490},[],[492],{"type":50,"value":493},"fk-stack",{"type":44,"tag":79,"props":495,"children":496},{},[497,499,505,506,512,513],{"type":50,"value":498},"Spacing utilities: ",{"type":44,"tag":85,"props":500,"children":502},{"className":501},[],[503],{"type":50,"value":504},"fk-space-[size]",{"type":50,"value":480},{"type":44,"tag":85,"props":507,"children":509},{"className":508},[],[510],{"type":50,"value":511},"fk-py-[size]",{"type":50,"value":480},{"type":44,"tag":85,"props":514,"children":516},{"className":515},[],[517],{"type":50,"value":518},"fk-px-[size]",{"type":44,"tag":79,"props":520,"children":521},{},[522,524],{"type":50,"value":523},"Typography utilities: ",{"type":44,"tag":85,"props":525,"children":527},{"className":526},[],[528],{"type":50,"value":529},"fk-text-[style]",{"type":44,"tag":79,"props":531,"children":532},{},[533,538],{"type":44,"tag":69,"props":534,"children":535},{},[536],{"type":50,"value":537},"Validate suggestions",{"type":50,"value":539},": Ensure all suggestions follow FlowKit conventions",{"type":44,"tag":79,"props":541,"children":542},{},[543,548],{"type":44,"tag":69,"props":544,"children":545},{},[546],{"type":50,"value":547},"Show preview",{"type":50,"value":549},": Display hierarchical structure with suggested classes",{"type":44,"tag":221,"props":551,"children":553},{"id":552},"phase-4-application-if-user-confirms",[554],{"type":50,"value":555},"Phase 4: Application (if user confirms)",{"type":44,"tag":228,"props":557,"children":559},{"start":558},12,[560,576,592,602],{"type":44,"tag":79,"props":561,"children":562},{},[563,568,569,574],{"type":44,"tag":69,"props":564,"children":565},{},[566],{"type":50,"value":567},"Create styles",{"type":50,"value":273},{"type":44,"tag":85,"props":570,"children":572},{"className":571},[],[573],{"type":50,"value":153},{"type":50,"value":575}," to create new FlowKit-compliant class styles",{"type":44,"tag":79,"props":577,"children":578},{},[579,584,585,590],{"type":44,"tag":69,"props":580,"children":581},{},[582],{"type":50,"value":583},"Update elements",{"type":50,"value":273},{"type":44,"tag":85,"props":586,"children":588},{"className":587},[],[589],{"type":50,"value":141},{"type":50,"value":591}," to apply classes to elements",{"type":44,"tag":79,"props":593,"children":594},{},[595,600],{"type":44,"tag":69,"props":596,"children":597},{},[598],{"type":50,"value":599},"Process in batches",{"type":50,"value":601},": If many elements, process in groups of 10-15",{"type":44,"tag":79,"props":603,"children":604},{},[605,610],{"type":44,"tag":69,"props":606,"children":607},{},[608],{"type":50,"value":609},"Show progress",{"type":50,"value":611},": Display which elements are being updated",{"type":44,"tag":221,"props":613,"children":615},{"id":614},"phase-5-verification-reporting",[616],{"type":50,"value":617},"Phase 5: Verification & Reporting",{"type":44,"tag":228,"props":619,"children":621},{"start":620},16,[622,632,642,652],{"type":44,"tag":79,"props":623,"children":624},{},[625,630],{"type":44,"tag":69,"props":626,"children":627},{},[628],{"type":50,"value":629},"Verify application",{"type":50,"value":631},": Check that classes were applied correctly",{"type":44,"tag":79,"props":633,"children":634},{},[635,640],{"type":44,"tag":69,"props":636,"children":637},{},[638],{"type":50,"value":639},"Generate report",{"type":50,"value":641},": Show what was created\u002Fupdated",{"type":44,"tag":79,"props":643,"children":644},{},[645,650],{"type":44,"tag":69,"props":646,"children":647},{},[648],{"type":50,"value":649},"Provide documentation",{"type":50,"value":651},": Explain the FlowKit structure used",{"type":44,"tag":79,"props":653,"children":654},{},[655,660],{"type":44,"tag":69,"props":656,"children":657},{},[658],{"type":50,"value":659},"Suggest next steps",{"type":50,"value":661},": Recommend additional FlowKit patterns to implement",{"type":44,"tag":59,"props":663,"children":665},{"id":664},"flowkit-naming-reference",[666],{"type":50,"value":667},"FlowKit Naming Reference",{"type":44,"tag":221,"props":669,"children":671},{"id":670},"core-naming-patterns",[672],{"type":50,"value":673},"Core Naming Patterns",{"type":44,"tag":675,"props":676,"children":677},"table",{},[678,702],{"type":44,"tag":679,"props":680,"children":681},"thead",{},[682],{"type":44,"tag":683,"props":684,"children":685},"tr",{},[686,692,697],{"type":44,"tag":687,"props":688,"children":689},"th",{},[690],{"type":50,"value":691},"Pattern",{"type":44,"tag":687,"props":693,"children":694},{},[695],{"type":50,"value":696},"Purpose",{"type":44,"tag":687,"props":698,"children":699},{},[700],{"type":50,"value":701},"Example",{"type":44,"tag":703,"props":704,"children":705},"tbody",{},[706,746,778,804,836,875,907],{"type":44,"tag":683,"props":707,"children":708},{},[709,718,723],{"type":44,"tag":710,"props":711,"children":712},"td",{},[713],{"type":44,"tag":85,"props":714,"children":716},{"className":715},[],[717],{"type":50,"value":445},{"type":44,"tag":710,"props":719,"children":720},{},[721],{"type":50,"value":722},"Component wrapper (base class)",{"type":44,"tag":710,"props":724,"children":725},{},[726,732,733,739,740],{"type":44,"tag":85,"props":727,"children":729},{"className":728},[],[730],{"type":50,"value":731},"fk-card",{"type":50,"value":480},{"type":44,"tag":85,"props":734,"children":736},{"className":735},[],[737],{"type":50,"value":738},"fk-nav",{"type":50,"value":480},{"type":44,"tag":85,"props":741,"children":743},{"className":742},[],[744],{"type":50,"value":745},"fk-hero",{"type":44,"tag":683,"props":747,"children":748},{},[749,757,762],{"type":44,"tag":710,"props":750,"children":751},{},[752],{"type":44,"tag":85,"props":753,"children":755},{"className":754},[],[756],{"type":50,"value":456},{"type":44,"tag":710,"props":758,"children":759},{},[760],{"type":50,"value":761},"Child element within component",{"type":44,"tag":710,"props":763,"children":764},{},[765,771,772],{"type":44,"tag":85,"props":766,"children":768},{"className":767},[],[769],{"type":50,"value":770},"fk-card-title",{"type":50,"value":480},{"type":44,"tag":85,"props":773,"children":775},{"className":774},[],[776],{"type":50,"value":777},"fk-nav-link",{"type":44,"tag":683,"props":779,"children":780},{},[781,790,795],{"type":44,"tag":710,"props":782,"children":783},{},[784],{"type":44,"tag":85,"props":785,"children":787},{"className":786},[],[788],{"type":50,"value":789},"fk-[component].[modifier]",{"type":44,"tag":710,"props":791,"children":792},{},[793],{"type":50,"value":794},"Combo class modifier (state\u002Fvariant)",{"type":44,"tag":710,"props":796,"children":797},{},[798],{"type":44,"tag":85,"props":799,"children":801},{"className":800},[],[802],{"type":50,"value":803},"fk-card.is-featured",{"type":44,"tag":683,"props":805,"children":806},{},[807,815,820],{"type":44,"tag":710,"props":808,"children":809},{},[810],{"type":44,"tag":85,"props":811,"children":813},{"className":812},[],[814],{"type":50,"value":529},{"type":44,"tag":710,"props":816,"children":817},{},[818],{"type":50,"value":819},"Typography utility",{"type":44,"tag":710,"props":821,"children":822},{},[823,829,830],{"type":44,"tag":85,"props":824,"children":826},{"className":825},[],[827],{"type":50,"value":828},"fk-text-xl",{"type":50,"value":480},{"type":44,"tag":85,"props":831,"children":833},{"className":832},[],[834],{"type":50,"value":835},"fk-text-bold",{"type":44,"tag":683,"props":837,"children":838},{},[839,854,859],{"type":44,"tag":710,"props":840,"children":841},{},[842,847,849],{"type":44,"tag":85,"props":843,"children":845},{"className":844},[],[846],{"type":50,"value":478},{"type":50,"value":848}," \u002F ",{"type":44,"tag":85,"props":850,"children":852},{"className":851},[],[853],{"type":50,"value":486},{"type":44,"tag":710,"props":855,"children":856},{},[857],{"type":50,"value":858},"Layout utilities",{"type":44,"tag":710,"props":860,"children":861},{},[862,868,869],{"type":44,"tag":85,"props":863,"children":865},{"className":864},[],[866],{"type":50,"value":867},"fk-flex-center",{"type":50,"value":480},{"type":44,"tag":85,"props":870,"children":872},{"className":871},[],[873],{"type":50,"value":874},"fk-grid-3",{"type":44,"tag":683,"props":876,"children":877},{},[878,886,891],{"type":44,"tag":710,"props":879,"children":880},{},[881],{"type":44,"tag":85,"props":882,"children":884},{"className":883},[],[885],{"type":50,"value":504},{"type":44,"tag":710,"props":887,"children":888},{},[889],{"type":50,"value":890},"Spacing utilities",{"type":44,"tag":710,"props":892,"children":893},{},[894,900,901],{"type":44,"tag":85,"props":895,"children":897},{"className":896},[],[898],{"type":50,"value":899},"fk-space-md",{"type":50,"value":480},{"type":44,"tag":85,"props":902,"children":904},{"className":903},[],[905],{"type":50,"value":906},"fk-py-lg",{"type":44,"tag":683,"props":908,"children":909},{},[910,918,923],{"type":44,"tag":710,"props":911,"children":912},{},[913],{"type":44,"tag":85,"props":914,"children":916},{"className":915},[],[917],{"type":50,"value":467},{"type":44,"tag":710,"props":919,"children":920},{},[921],{"type":50,"value":922},"State modifiers (combo)",{"type":44,"tag":710,"props":924,"children":925},{},[926,932,933,939,940],{"type":44,"tag":85,"props":927,"children":929},{"className":928},[],[930],{"type":50,"value":931},"is-active",{"type":50,"value":480},{"type":44,"tag":85,"props":934,"children":936},{"className":935},[],[937],{"type":50,"value":938},"is-hidden",{"type":50,"value":480},{"type":44,"tag":85,"props":941,"children":943},{"className":942},[],[944],{"type":50,"value":945},"is-disabled",{"type":44,"tag":221,"props":947,"children":949},{"id":948},"layout-utilities",[950],{"type":50,"value":951},"Layout Utilities",{"type":44,"tag":953,"props":954,"children":958},"pre",{"className":955,"code":957,"language":50},[956],"language-text","fk-section              Section wrapper with padding\nfk-container            Max-width container (centered)\nfk-flex                 Flexbox container\nfk-flex-center          Centered flex (both axes)\nfk-flex-between         Space-between flex\nfk-flex-around          Space-around flex\nfk-flex-col             Flex column direction\nfk-grid                 Grid container (base)\nfk-grid-2               2-column grid\nfk-grid-3               3-column grid\nfk-grid-4               4-column grid\nfk-grid-6               6-column grid\nfk-stack                Vertical stack (gap between items)\nfk-row                  Horizontal row\nfk-wrap                 Flex wrap enabled\n",[959],{"type":44,"tag":85,"props":960,"children":962},{"__ignoreMap":961},"",[963],{"type":50,"value":957},{"type":44,"tag":221,"props":965,"children":967},{"id":966},"typography-utilities",[968],{"type":50,"value":969},"Typography Utilities",{"type":44,"tag":953,"props":971,"children":974},{"className":972,"code":973,"language":50},[956],"fk-text-xs              Extra small text (12px)\nfk-text-sm              Small text (14px)\nfk-text-md              Medium text (16px - default)\nfk-text-lg              Large text (18px)\nfk-text-xl              Extra large text (24px)\nfk-text-2xl             2x large text (32px)\nfk-text-3xl             3x large text (48px)\nfk-text-bold            Bold weight (700)\nfk-text-semibold        Semibold weight (600)\nfk-text-medium          Medium weight (500)\nfk-text-light           Light weight (300)\nfk-text-center          Center aligned\nfk-text-left            Left aligned\nfk-text-right           Right aligned\nfk-text-uppercase       Uppercase transform\nfk-text-lowercase       Lowercase transform\nfk-text-capitalize      Capitalize transform\n",[975],{"type":44,"tag":85,"props":976,"children":977},{"__ignoreMap":961},[978],{"type":50,"value":973},{"type":44,"tag":221,"props":980,"children":982},{"id":981},"spacing-utilities",[983],{"type":50,"value":984},"Spacing Utilities",{"type":44,"tag":953,"props":986,"children":989},{"className":987,"code":988,"language":50},[956],"fk-space-xs             4px spacing\nfk-space-sm             8px spacing\nfk-space-md             16px spacing (default)\nfk-space-lg             24px spacing\nfk-space-xl             32px spacing\nfk-space-2xl            48px spacing\nfk-space-3xl            64px spacing\n\nDirectional Spacing:\nfk-py-[size]            Padding vertical (top + bottom)\nfk-px-[size]            Padding horizontal (left + right)\nfk-pt-[size]            Padding top\nfk-pb-[size]            Padding bottom\nfk-pl-[size]            Padding left\nfk-pr-[size]            Padding right\n\nfk-my-[size]            Margin vertical (top + bottom)\nfk-mx-[size]            Margin horizontal (left + right)\nfk-mt-[size]            Margin top\nfk-mb-[size]            Margin bottom\nfk-ml-[size]            Margin left\nfk-mr-[size]            Margin right\n",[990],{"type":44,"tag":85,"props":991,"children":992},{"__ignoreMap":961},[993],{"type":50,"value":988},{"type":44,"tag":221,"props":995,"children":997},{"id":996},"color-utilities",[998],{"type":50,"value":999},"Color Utilities",{"type":44,"tag":953,"props":1001,"children":1004},{"className":1002,"code":1003,"language":50},[956],"fk-bg-primary           Primary background color\nfk-bg-secondary         Secondary background color\nfk-bg-accent            Accent background color\nfk-bg-light             Light background\nfk-bg-dark              Dark background\nfk-text-primary         Primary text color\nfk-text-secondary       Secondary text color\nfk-text-muted           Muted text color\n",[1005],{"type":44,"tag":85,"props":1006,"children":1007},{"__ignoreMap":961},[1008],{"type":50,"value":1003},{"type":44,"tag":221,"props":1010,"children":1012},{"id":1011},"border-visual-utilities",[1013],{"type":50,"value":1014},"Border & Visual Utilities",{"type":44,"tag":953,"props":1016,"children":1019},{"className":1017,"code":1018,"language":50},[956],"fk-rounded              Border radius (default)\nfk-rounded-sm           Small border radius\nfk-rounded-lg           Large border radius\nfk-rounded-full         Fully rounded (pill\u002Fcircle)\nfk-border               Border (1px solid)\nfk-border-top           Border top only\nfk-border-bottom        Border bottom only\nfk-shadow               Box shadow (default)\nfk-shadow-sm            Small shadow\nfk-shadow-lg            Large shadow\n",[1020],{"type":44,"tag":85,"props":1021,"children":1022},{"__ignoreMap":961},[1023],{"type":50,"value":1018},{"type":44,"tag":221,"props":1025,"children":1027},{"id":1026},"state-modifiers-combo-classes",[1028],{"type":50,"value":1029},"State Modifiers (Combo Classes)",{"type":44,"tag":953,"props":1031,"children":1034},{"className":1032,"code":1033,"language":50},[956],"is-active               Active state (navigation, tabs)\nis-hidden               Hidden visibility\nis-visible              Visible visibility\nis-disabled             Disabled state\nis-loading              Loading state\nis-error                Error state\nis-success              Success state\nis-primary              Primary variant\nis-secondary            Secondary variant\nis-featured             Featured\u002Fhighlighted variant\nis-horizontal           Horizontal layout variant\nis-vertical             Vertical layout variant\n",[1035],{"type":44,"tag":85,"props":1036,"children":1037},{"__ignoreMap":961},[1038],{"type":50,"value":1033},{"type":44,"tag":59,"props":1040,"children":1042},{"id":1041},"examples",[1043],{"type":50,"value":1044},"Examples",{"type":44,"tag":221,"props":1046,"children":1048},{"id":1047},"example-1-creating-hero-section",[1049],{"type":50,"value":1050},"Example 1: Creating Hero Section",{"type":44,"tag":53,"props":1052,"children":1053},{},[1054],{"type":44,"tag":69,"props":1055,"children":1056},{},[1057],{"type":50,"value":1058},"User prompt:",{"type":44,"tag":953,"props":1060,"children":1063},{"className":1061,"code":1062,"language":50},[956],"Build a hero section with FlowKit naming\n",[1064],{"type":44,"tag":85,"props":1065,"children":1066},{"__ignoreMap":961},[1067],{"type":50,"value":1062},{"type":44,"tag":53,"props":1069,"children":1070},{},[1071],{"type":44,"tag":69,"props":1072,"children":1073},{},[1074],{"type":50,"value":1075},"Step 1: Analysis",{"type":44,"tag":953,"props":1077,"children":1080},{"className":1078,"code":1079,"language":50},[956],"🎨 FlowKit Hero Section Structure\n\nI'll create a hero section following FlowKit v2 conventions.\n\nStructure:\nfk-section (wrapper with padding)\n└── fk-container (max-width container)\n    └── fk-hero (component wrapper)\n        ├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center\n        │   ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm\n        │   ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md\n        │   ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg\n        │   └── fk-hero-actions + fk-flex + fk-space-md\n        │       ├── fk-button.is-primary\n        │       └── fk-button.is-secondary\n        └── fk-hero-image + fk-rounded-lg\n\nTotal classes to create: 12 base classes + 2 combo classes\nReady to create these in Webflow Designer? (yes\u002Fno)\n",[1081],{"type":44,"tag":85,"props":1082,"children":1083},{"__ignoreMap":961},[1084],{"type":50,"value":1079},{"type":44,"tag":53,"props":1086,"children":1087},{},[1088],{"type":44,"tag":69,"props":1089,"children":1090},{},[1091],{"type":50,"value":1092},"Step 2: After user confirms",{"type":44,"tag":953,"props":1094,"children":1097},{"className":1095,"code":1096,"language":50},[956],"🔄 Creating FlowKit Hero Classes...\n\nProgress: ████████████████████ 100% (14\u002F14 classes)\n\n✅ Classes Created:\n\n**Layout Classes:**\n- ✅ fk-section - Section wrapper with padding\n- ✅ fk-container - Max-width container\n- ✅ fk-hero - Hero component wrapper\n\n**Element Classes:**\n- ✅ fk-hero-content - Hero content container\n- ✅ fk-hero-eyebrow - Small label above title\n- ✅ fk-hero-title - Main hero heading\n- ✅ fk-hero-subtitle - Supporting text\n- ✅ fk-hero-actions - Button container\n- ✅ fk-hero-image - Hero image wrapper\n\n**Utility Classes:**\n- ✅ fk-flex, fk-flex-col, fk-flex-center\n- ✅ fk-text-sm, fk-text-lg, fk-text-3xl\n- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted\n- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg\n- ✅ fk-space-md, fk-rounded-lg\n\n**Component Classes:**\n- ✅ fk-button (with combo classes: is-primary, is-secondary)\n\n---\n\n📋 Usage Guide:\n\n1. Create a Section element → Apply `fk-section`\n2. Add Container inside → Apply `fk-container`\n3. Add Div inside → Apply `fk-hero`\n4. Build content structure following the hierarchy above\n5. Use combo classes for button variants: `fk-button.is-primary`\n\n🎉 Your FlowKit hero section structure is ready!\n",[1098],{"type":44,"tag":85,"props":1099,"children":1100},{"__ignoreMap":961},[1101],{"type":50,"value":1096},{"type":44,"tag":221,"props":1103,"children":1105},{"id":1104},"example-2-auditing-existing-classes",[1106],{"type":50,"value":1107},"Example 2: Auditing Existing Classes",{"type":44,"tag":53,"props":1109,"children":1110},{},[1111],{"type":44,"tag":69,"props":1112,"children":1113},{},[1114],{"type":50,"value":1058},{"type":44,"tag":953,"props":1116,"children":1119},{"className":1117,"code":1118,"language":50},[956],"Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle\n",[1120],{"type":44,"tag":85,"props":1121,"children":1122},{"__ignoreMap":961},[1123],{"type":50,"value":1118},{"type":44,"tag":53,"props":1125,"children":1126},{},[1127],{"type":44,"tag":69,"props":1128,"children":1129},{},[1130],{"type":50,"value":1131},"Response:",{"type":44,"tag":953,"props":1133,"children":1136},{"className":1134,"code":1135,"language":50},[956],"📋 FlowKit Audit Report\n\nChecking 4 classes against FlowKit v2 conventions...\n\n---\n\n## Issues Found: 4\n\n### 1. `feature-card` ⚠️\n**Issue:** Missing FlowKit prefix\n**Reason:** All FlowKit classes must start with `fk-`\n**Suggested:** `fk-feature-card` or `fk-card.is-feature`\n**Fix:** Rename class to include `fk-` prefix\n\n### 2. `FK-Button` ❌\n**Issue:** Incorrect case (uppercase)\n**Reason:** FlowKit uses lowercase only\n**Suggested:** `fk-button`\n**Fix:** Convert to lowercase: `fk-button`\n\n### 3. `fk_hero_title` ❌\n**Issue:** Wrong separator (underscore)\n**Reason:** FlowKit uses hyphens, not underscores\n**Suggested:** `fk-hero-title`\n**Fix:** Replace underscores with hyphens\n\n### 4. `cardTitle` ❌\n**Issue:** Multiple violations\n  - Missing `fk-` prefix\n  - CamelCase instead of kebab-case\n**Reason:** FlowKit requires `fk-` prefix and hyphen separation\n**Suggested:** `fk-card-title`\n**Fix:** Add prefix and convert to kebab-case\n\n---\n\n## FlowKit Naming Rules:\n\n✅ **Correct patterns:**\n- `fk-card` (component)\n- `fk-card-title` (element)\n- `fk-button.is-primary` (with modifier)\n- `fk-text-xl` (utility)\n\n❌ **Incorrect patterns:**\n- `card` (no prefix)\n- `FK-Card` (wrong case)\n- `fk_card` (wrong separator)\n- `cardTitle` (camelCase)\n\nWould you like me to rename these classes in Webflow Designer? (yes\u002Fno)\n",[1137],{"type":44,"tag":85,"props":1138,"children":1139},{"__ignoreMap":961},[1140],{"type":50,"value":1135},{"type":44,"tag":221,"props":1142,"children":1144},{"id":1143},"example-3-building-card-component",[1145],{"type":50,"value":1146},"Example 3: Building Card Component",{"type":44,"tag":53,"props":1148,"children":1149},{},[1150],{"type":44,"tag":69,"props":1151,"children":1152},{},[1153],{"type":50,"value":1058},{"type":44,"tag":953,"props":1155,"children":1158},{"className":1156,"code":1157,"language":50},[956],"Create a product card component with FlowKit classes\n",[1159],{"type":44,"tag":85,"props":1160,"children":1161},{"__ignoreMap":961},[1162],{"type":50,"value":1157},{"type":44,"tag":53,"props":1164,"children":1165},{},[1166],{"type":44,"tag":69,"props":1167,"children":1168},{},[1169],{"type":50,"value":1131},{"type":44,"tag":953,"props":1171,"children":1174},{"className":1172,"code":1173,"language":50},[956],"🎨 FlowKit Product Card Component\n\nStructure:\nfk-card (base component)\n├── fk-card-image-wrapper\n│   └── fk-card-image + fk-rounded-lg\n├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent\n├── fk-card-content + fk-space-md\n│   ├── fk-card-category + fk-text-sm + fk-text-muted\n│   ├── fk-card-title + fk-text-lg + fk-text-bold\n│   ├── fk-card-description + fk-text-md\n│   └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary\n└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top\n    ├── fk-card-rating + fk-flex + fk-space-xs\n    └── fk-button.is-primary + fk-text-sm\n\n---\n\n## Variants (Combo Classes):\n\n### Featured Card\n`fk-card.is-featured`\n- Highlighted border\u002Fshadow\n- Accent background\n- Use for promoted products\n\n### Horizontal Layout\n`fk-card.is-horizontal`\n- Side-by-side image\u002Fcontent\n- Better for list views\n- Image on left, content on right\n\n### Compact Size\n`fk-card.is-compact`\n- Reduced padding\n- Smaller text sizes\n- Use in tight layouts\n\n---\n\n## Responsive Modifiers:\n\nDesktop (default):\n- `fk-grid-3` (3 cards per row)\n\nTablet:\n- Add combo: `fk-grid-3.tablet-2`\n\nMobile:\n- Add combo: `fk-grid-3.tablet-2.mobile-1`\n\n---\n\nReady to create these classes? (yes\u002Fno)\n",[1175],{"type":44,"tag":85,"props":1176,"children":1177},{"__ignoreMap":961},[1178],{"type":50,"value":1173},{"type":44,"tag":221,"props":1180,"children":1182},{"id":1181},"example-4-refactoring-to-flowkit",[1183],{"type":50,"value":1184},"Example 4: Refactoring to FlowKit",{"type":44,"tag":53,"props":1186,"children":1187},{},[1188],{"type":44,"tag":69,"props":1189,"children":1190},{},[1191],{"type":50,"value":1058},{"type":44,"tag":953,"props":1193,"children":1196},{"className":1194,"code":1195,"language":50},[956],"Refactor my navigation to use FlowKit naming\n",[1197],{"type":44,"tag":85,"props":1198,"children":1199},{"__ignoreMap":961},[1200],{"type":50,"value":1195},{"type":44,"tag":53,"props":1202,"children":1203},{},[1204],{"type":44,"tag":69,"props":1205,"children":1206},{},[1207],{"type":50,"value":1208},"Step 1: Current Analysis",{"type":44,"tag":953,"props":1210,"children":1213},{"className":1211,"code":1212,"language":50},[956],"🔍 Analyzing Current Navigation Classes...\n\nFound 8 elements with non-FlowKit classes:\n├── navbar → fk-nav\n├── navbar-container → fk-nav-container\n├── logo-wrapper → fk-nav-logo\n├── menu → fk-nav-menu\n├── menu-item → fk-nav-link\n├── menu-item active → fk-nav-link.is-active\n├── button-group → fk-nav-actions\n└── btn-primary → fk-button.is-primary\n\n---\n\n## Migration Plan:\n\n**Phase 1: Create FlowKit Classes** (8 classes)\n- Create all `fk-nav-*` classes\n- Create utility classes: `fk-flex`, `fk-flex-between`, `fk-flex-center`\n- Create `fk-button` with `is-primary` modifier\n\n**Phase 2: Update Elements** (8 elements)\n- Replace old classes with new FlowKit classes\n- Apply combo classes where needed\n- Preserve existing styles\n\n**Phase 3: Cleanup** (optional)\n- Old classes can be removed after verification\n- Keep for now to maintain backwards compatibility\n\n---\n\nProceed with migration? (yes\u002Fno)\n",[1214],{"type":44,"tag":85,"props":1215,"children":1216},{"__ignoreMap":961},[1217],{"type":50,"value":1212},{"type":44,"tag":53,"props":1219,"children":1220},{},[1221],{"type":44,"tag":69,"props":1222,"children":1223},{},[1224],{"type":50,"value":1225},"Step 2: After Migration",{"type":44,"tag":953,"props":1227,"children":1230},{"className":1228,"code":1229,"language":50},[956],"✅ Navigation Refactored to FlowKit\n\n**Classes Created:** 8\n**Elements Updated:** 8\n**Time elapsed:** ~3 seconds\n\n---\n\n## Updated Structure:\n\nfk-nav\n├── fk-nav-container + fk-flex + fk-flex-between\n│   ├── fk-nav-logo\n│   ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md\n│   │   ├── fk-nav-link (x5)\n│   │   └── fk-nav-link.is-active (current page)\n│   └── fk-nav-actions + fk-flex + fk-space-sm\n│       ├── fk-button.is-secondary\n│       └── fk-button.is-primary\n\n---\n\n## Before → After:\n\n| Old Class | New FlowKit Class |\n|-----------|-------------------|\n| navbar | fk-nav ✅ |\n| navbar-container | fk-nav-container ✅ |\n| logo-wrapper | fk-nav-logo ✅ |\n| menu | fk-nav-menu ✅ |\n| menu-item | fk-nav-link ✅ |\n| menu-item active | fk-nav-link.is-active ✅ |\n| button-group | fk-nav-actions ✅ |\n| btn-primary | fk-button.is-primary ✅ |\n\n---\n\n🎉 Navigation is now FlowKit compliant!\n\n**Next steps:**\n- Test navigation on all breakpoints\n- Verify active states work correctly\n- Consider adding `fk-nav.is-transparent` for transparent header variant\n- Consider adding `fk-nav.is-sticky` for sticky navigation\n",[1231],{"type":44,"tag":85,"props":1232,"children":1233},{"__ignoreMap":961},[1234],{"type":50,"value":1229},{"type":44,"tag":59,"props":1236,"children":1238},{"id":1237},"guidelines",[1239],{"type":50,"value":1240},"Guidelines",{"type":44,"tag":221,"props":1242,"children":1244},{"id":1243},"phase-1-critical-requirements",[1245],{"type":50,"value":1246},"Phase 1: Critical Requirements",{"type":44,"tag":53,"props":1248,"children":1249},{},[1250],{"type":44,"tag":69,"props":1251,"children":1252},{},[1253],{"type":50,"value":1254},"FlowKit Prefix Rule:",{"type":44,"tag":75,"props":1256,"children":1257},{},[1258,1268,1281],{"type":44,"tag":79,"props":1259,"children":1260},{},[1261,1263],{"type":50,"value":1262},"ALL component and element classes MUST start with ",{"type":44,"tag":85,"props":1264,"children":1266},{"className":1265},[],[1267],{"type":50,"value":370},{"type":44,"tag":79,"props":1269,"children":1270},{},[1271,1273,1279],{"type":50,"value":1272},"Exception: State modifiers use ",{"type":44,"tag":85,"props":1274,"children":1276},{"className":1275},[],[1277],{"type":50,"value":1278},"is-",{"type":50,"value":1280}," prefix (as combo classes)",{"type":44,"tag":79,"props":1282,"children":1283},{},[1284],{"type":50,"value":1285},"Exception: Utility classes for third-party integrations may omit prefix",{"type":44,"tag":53,"props":1287,"children":1288},{},[1289],{"type":44,"tag":69,"props":1290,"children":1291},{},[1292],{"type":50,"value":1293},"Case Sensitivity:",{"type":44,"tag":75,"props":1295,"children":1296},{},[1297,1302,1307],{"type":44,"tag":79,"props":1298,"children":1299},{},[1300],{"type":50,"value":1301},"All class names are lowercase only",{"type":44,"tag":79,"props":1303,"children":1304},{},[1305],{"type":50,"value":1306},"No uppercase letters anywhere",{"type":44,"tag":79,"props":1308,"children":1309},{},[1310],{"type":50,"value":1311},"No camelCase or PascalCase",{"type":44,"tag":53,"props":1313,"children":1314},{},[1315],{"type":44,"tag":69,"props":1316,"children":1317},{},[1318],{"type":50,"value":1319},"Separator Rule:",{"type":44,"tag":75,"props":1321,"children":1322},{},[1323,1336,1349],{"type":44,"tag":79,"props":1324,"children":1325},{},[1326,1328,1334],{"type":50,"value":1327},"Use hyphens (",{"type":44,"tag":85,"props":1329,"children":1331},{"className":1330},[],[1332],{"type":50,"value":1333},"-",{"type":50,"value":1335},") to separate words",{"type":44,"tag":79,"props":1337,"children":1338},{},[1339,1341,1347],{"type":50,"value":1340},"Never use underscores (",{"type":44,"tag":85,"props":1342,"children":1344},{"className":1343},[],[1345],{"type":50,"value":1346},"_",{"type":50,"value":1348},")",{"type":44,"tag":79,"props":1350,"children":1351},{},[1352],{"type":50,"value":1353},"Never use spaces or special characters",{"type":44,"tag":53,"props":1355,"children":1356},{},[1357],{"type":44,"tag":69,"props":1358,"children":1359},{},[1360],{"type":50,"value":1361},"Naming Structure:",{"type":44,"tag":953,"props":1363,"children":1366},{"className":1364,"code":1365,"language":50},[956],"Component:        fk-[component]\nElement:          fk-[component]-[element]\nSub-element:      fk-[component]-[element]-[detail]\nUtility:          fk-[property]-[value]\nState modifier:   is-[state] (combo class only)\nResponsive:       .[breakpoint]-[value] (combo class)\n",[1367],{"type":44,"tag":85,"props":1368,"children":1369},{"__ignoreMap":961},[1370],{"type":50,"value":1365},{"type":44,"tag":221,"props":1372,"children":1374},{"id":1373},"phase-2-component-naming-rules",[1375],{"type":50,"value":1376},"Phase 2: Component Naming Rules",{"type":44,"tag":53,"props":1378,"children":1379},{},[1380],{"type":44,"tag":69,"props":1381,"children":1382},{},[1383],{"type":50,"value":1384},"Component Names:",{"type":44,"tag":75,"props":1386,"children":1387},{},[1388,1393,1425,1443],{"type":44,"tag":79,"props":1389,"children":1390},{},[1391],{"type":50,"value":1392},"Keep concise and semantic",{"type":44,"tag":79,"props":1394,"children":1395},{},[1396,1398,1404,1405,1411,1412,1418,1419],{"type":50,"value":1397},"Use common web component terms: ",{"type":44,"tag":85,"props":1399,"children":1401},{"className":1400},[],[1402],{"type":50,"value":1403},"card",{"type":50,"value":480},{"type":44,"tag":85,"props":1406,"children":1408},{"className":1407},[],[1409],{"type":50,"value":1410},"nav",{"type":50,"value":480},{"type":44,"tag":85,"props":1413,"children":1415},{"className":1414},[],[1416],{"type":50,"value":1417},"hero",{"type":50,"value":480},{"type":44,"tag":85,"props":1420,"children":1422},{"className":1421},[],[1423],{"type":50,"value":1424},"footer",{"type":44,"tag":79,"props":1426,"children":1427},{},[1428,1430,1435,1437],{"type":50,"value":1429},"Avoid overly specific names: prefer ",{"type":44,"tag":85,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":50,"value":731},{"type":50,"value":1436}," over ",{"type":44,"tag":85,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":50,"value":1442},"fk-product-feature-card",{"type":44,"tag":79,"props":1444,"children":1445},{},[1446,1448,1453,1455],{"type":50,"value":1447},"Use modifiers for variants: ",{"type":44,"tag":85,"props":1449,"children":1451},{"className":1450},[],[1452],{"type":50,"value":803},{"type":50,"value":1454}," not ",{"type":44,"tag":85,"props":1456,"children":1458},{"className":1457},[],[1459],{"type":50,"value":1460},"fk-card-featured",{"type":44,"tag":53,"props":1462,"children":1463},{},[1464],{"type":44,"tag":69,"props":1465,"children":1466},{},[1467],{"type":50,"value":1468},"Element Hierarchy:",{"type":44,"tag":75,"props":1470,"children":1471},{},[1472,1482,1501,1506,1517],{"type":44,"tag":79,"props":1473,"children":1474},{},[1475,1477],{"type":50,"value":1476},"Parent component: ",{"type":44,"tag":85,"props":1478,"children":1480},{"className":1479},[],[1481],{"type":50,"value":731},{"type":44,"tag":79,"props":1483,"children":1484},{},[1485,1487,1493,1495,1500],{"type":50,"value":1486},"Direct children: ",{"type":44,"tag":85,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":50,"value":1492},"fk-card-[element]",{"type":50,"value":1494}," (e.g., ",{"type":44,"tag":85,"props":1496,"children":1498},{"className":1497},[],[1499],{"type":50,"value":770},{"type":50,"value":1348},{"type":44,"tag":79,"props":1502,"children":1503},{},[1504],{"type":50,"value":1505},"Deep nesting: Avoid more than 3 levels",{"type":44,"tag":79,"props":1507,"children":1508},{},[1509,1511],{"type":50,"value":1510},"Bad: ",{"type":44,"tag":85,"props":1512,"children":1514},{"className":1513},[],[1515],{"type":50,"value":1516},"fk-card-content-section-text-wrapper",{"type":44,"tag":79,"props":1518,"children":1519},{},[1520,1522,1528,1529],{"type":50,"value":1521},"Good: ",{"type":44,"tag":85,"props":1523,"children":1525},{"className":1524},[],[1526],{"type":50,"value":1527},"fk-card-content",{"type":50,"value":480},{"type":44,"tag":85,"props":1530,"children":1532},{"className":1531},[],[1533],{"type":50,"value":1534},"fk-card-text",{"type":44,"tag":53,"props":1536,"children":1537},{},[1538],{"type":44,"tag":69,"props":1539,"children":1540},{},[1541],{"type":50,"value":1542},"Common Component Patterns:",{"type":44,"tag":53,"props":1544,"children":1545},{},[1546],{"type":44,"tag":69,"props":1547,"children":1548},{},[1549],{"type":50,"value":1550},"Cards:",{"type":44,"tag":953,"props":1552,"children":1555},{"className":1553,"code":1554,"language":50},[956],"fk-card\n├── fk-card-image\n├── fk-card-content\n│   ├── fk-card-title\n│   └── fk-card-text\n└── fk-card-footer\n",[1556],{"type":44,"tag":85,"props":1557,"children":1558},{"__ignoreMap":961},[1559],{"type":50,"value":1554},{"type":44,"tag":53,"props":1561,"children":1562},{},[1563],{"type":44,"tag":69,"props":1564,"children":1565},{},[1566],{"type":50,"value":1567},"Navigation:",{"type":44,"tag":953,"props":1569,"children":1572},{"className":1570,"code":1571,"language":50},[956],"fk-nav\n├── fk-nav-logo\n├── fk-nav-menu\n│   └── fk-nav-link\n└── fk-nav-actions\n",[1573],{"type":44,"tag":85,"props":1574,"children":1575},{"__ignoreMap":961},[1576],{"type":50,"value":1571},{"type":44,"tag":53,"props":1578,"children":1579},{},[1580],{"type":44,"tag":69,"props":1581,"children":1582},{},[1583],{"type":50,"value":1584},"Hero:",{"type":44,"tag":953,"props":1586,"children":1589},{"className":1587,"code":1588,"language":50},[956],"fk-hero\n├── fk-hero-content\n│   ├── fk-hero-title\n│   ├── fk-hero-subtitle\n│   └── fk-hero-actions\n└── fk-hero-media\n",[1590],{"type":44,"tag":85,"props":1591,"children":1592},{"__ignoreMap":961},[1593],{"type":50,"value":1588},{"type":44,"tag":53,"props":1595,"children":1596},{},[1597],{"type":44,"tag":69,"props":1598,"children":1599},{},[1600],{"type":50,"value":1601},"Forms:",{"type":44,"tag":953,"props":1603,"children":1606},{"className":1604,"code":1605,"language":50},[956],"fk-form\n├── fk-form-group\n│   ├── fk-form-label\n│   └── fk-form-input\n└── fk-form-actions\n",[1607],{"type":44,"tag":85,"props":1608,"children":1609},{"__ignoreMap":961},[1610],{"type":50,"value":1605},{"type":44,"tag":221,"props":1612,"children":1614},{"id":1613},"phase-3-utility-classes",[1615],{"type":50,"value":1616},"Phase 3: Utility Classes",{"type":44,"tag":53,"props":1618,"children":1619},{},[1620],{"type":44,"tag":69,"props":1621,"children":1622},{},[1623],{"type":50,"value":1624},"Utility Naming:",{"type":44,"tag":75,"props":1626,"children":1627},{},[1628,1639],{"type":44,"tag":79,"props":1629,"children":1630},{},[1631,1633],{"type":50,"value":1632},"Format: ",{"type":44,"tag":85,"props":1634,"children":1636},{"className":1635},[],[1637],{"type":50,"value":1638},"fk-[property]-[value]",{"type":44,"tag":79,"props":1640,"children":1641},{},[1642,1644,1650,1651,1656,1657],{"type":50,"value":1643},"Examples: ",{"type":44,"tag":85,"props":1645,"children":1647},{"className":1646},[],[1648],{"type":50,"value":1649},"fk-text-lg",{"type":50,"value":480},{"type":44,"tag":85,"props":1652,"children":1654},{"className":1653},[],[1655],{"type":50,"value":899},{"type":50,"value":480},{"type":44,"tag":85,"props":1658,"children":1660},{"className":1659},[],[1661],{"type":50,"value":874},{"type":44,"tag":53,"props":1663,"children":1664},{},[1665],{"type":44,"tag":69,"props":1666,"children":1667},{},[1668],{"type":50,"value":1669},"Spacing Utilities:",{"type":44,"tag":75,"props":1671,"children":1672},{},[1673,1726,1779],{"type":44,"tag":79,"props":1674,"children":1675},{},[1676,1678,1684,1685,1691,1692,1698,1699,1705,1706,1712,1713,1719,1720],{"type":50,"value":1677},"Use t-shirt sizing: ",{"type":44,"tag":85,"props":1679,"children":1681},{"className":1680},[],[1682],{"type":50,"value":1683},"xs",{"type":50,"value":480},{"type":44,"tag":85,"props":1686,"children":1688},{"className":1687},[],[1689],{"type":50,"value":1690},"sm",{"type":50,"value":480},{"type":44,"tag":85,"props":1693,"children":1695},{"className":1694},[],[1696],{"type":50,"value":1697},"md",{"type":50,"value":480},{"type":44,"tag":85,"props":1700,"children":1702},{"className":1701},[],[1703],{"type":50,"value":1704},"lg",{"type":50,"value":480},{"type":44,"tag":85,"props":1707,"children":1709},{"className":1708},[],[1710],{"type":50,"value":1711},"xl",{"type":50,"value":480},{"type":44,"tag":85,"props":1714,"children":1716},{"className":1715},[],[1717],{"type":50,"value":1718},"2xl",{"type":50,"value":480},{"type":44,"tag":85,"props":1721,"children":1723},{"className":1722},[],[1724],{"type":50,"value":1725},"3xl",{"type":44,"tag":79,"props":1727,"children":1728},{},[1729,1731,1737,1739,1745,1747,1753,1755,1761,1763,1769,1771,1777],{"type":50,"value":1730},"Directional: ",{"type":44,"tag":85,"props":1732,"children":1734},{"className":1733},[],[1735],{"type":50,"value":1736},"py",{"type":50,"value":1738}," (vertical), ",{"type":44,"tag":85,"props":1740,"children":1742},{"className":1741},[],[1743],{"type":50,"value":1744},"px",{"type":50,"value":1746}," (horizontal), ",{"type":44,"tag":85,"props":1748,"children":1750},{"className":1749},[],[1751],{"type":50,"value":1752},"pt",{"type":50,"value":1754}," (top), ",{"type":44,"tag":85,"props":1756,"children":1758},{"className":1757},[],[1759],{"type":50,"value":1760},"pr",{"type":50,"value":1762}," (right), ",{"type":44,"tag":85,"props":1764,"children":1766},{"className":1765},[],[1767],{"type":50,"value":1768},"pb",{"type":50,"value":1770}," (bottom), ",{"type":44,"tag":85,"props":1772,"children":1774},{"className":1773},[],[1775],{"type":50,"value":1776},"pl",{"type":50,"value":1778}," (left)",{"type":44,"tag":79,"props":1780,"children":1781},{},[1782,1784,1790,1791,1797,1798,1804,1805,1811,1812,1818,1819],{"type":50,"value":1783},"Same for margins: ",{"type":44,"tag":85,"props":1785,"children":1787},{"className":1786},[],[1788],{"type":50,"value":1789},"my",{"type":50,"value":480},{"type":44,"tag":85,"props":1792,"children":1794},{"className":1793},[],[1795],{"type":50,"value":1796},"mx",{"type":50,"value":480},{"type":44,"tag":85,"props":1799,"children":1801},{"className":1800},[],[1802],{"type":50,"value":1803},"mt",{"type":50,"value":480},{"type":44,"tag":85,"props":1806,"children":1808},{"className":1807},[],[1809],{"type":50,"value":1810},"mr",{"type":50,"value":480},{"type":44,"tag":85,"props":1813,"children":1815},{"className":1814},[],[1816],{"type":50,"value":1817},"mb",{"type":50,"value":480},{"type":44,"tag":85,"props":1820,"children":1822},{"className":1821},[],[1823],{"type":50,"value":1824},"ml",{"type":44,"tag":53,"props":1826,"children":1827},{},[1828],{"type":44,"tag":69,"props":1829,"children":1830},{},[1831],{"type":50,"value":1832},"Typography Utilities:",{"type":44,"tag":75,"props":1834,"children":1835},{},[1836,1847,1858,1869],{"type":44,"tag":79,"props":1837,"children":1838},{},[1839,1841],{"type":50,"value":1840},"Size: ",{"type":44,"tag":85,"props":1842,"children":1844},{"className":1843},[],[1845],{"type":50,"value":1846},"fk-text-[xs|sm|md|lg|xl|2xl|3xl]",{"type":44,"tag":79,"props":1848,"children":1849},{},[1850,1852],{"type":50,"value":1851},"Weight: ",{"type":44,"tag":85,"props":1853,"children":1855},{"className":1854},[],[1856],{"type":50,"value":1857},"fk-text-[light|medium|semibold|bold]",{"type":44,"tag":79,"props":1859,"children":1860},{},[1861,1863],{"type":50,"value":1862},"Alignment: ",{"type":44,"tag":85,"props":1864,"children":1866},{"className":1865},[],[1867],{"type":50,"value":1868},"fk-text-[left|center|right]",{"type":44,"tag":79,"props":1870,"children":1871},{},[1872,1874],{"type":50,"value":1873},"Transform: ",{"type":44,"tag":85,"props":1875,"children":1877},{"className":1876},[],[1878],{"type":50,"value":1879},"fk-text-[uppercase|lowercase|capitalize]",{"type":44,"tag":53,"props":1881,"children":1882},{},[1883],{"type":44,"tag":69,"props":1884,"children":1885},{},[1886],{"type":50,"value":1887},"Layout Utilities:",{"type":44,"tag":75,"props":1889,"children":1890},{},[1891,1921,1958],{"type":44,"tag":79,"props":1892,"children":1893},{},[1894,1896,1901,1902,1908,1909,1914,1915],{"type":50,"value":1895},"Flexbox: ",{"type":44,"tag":85,"props":1897,"children":1899},{"className":1898},[],[1900],{"type":50,"value":478},{"type":50,"value":480},{"type":44,"tag":85,"props":1903,"children":1905},{"className":1904},[],[1906],{"type":50,"value":1907},"fk-flex-col",{"type":50,"value":480},{"type":44,"tag":85,"props":1910,"children":1912},{"className":1911},[],[1913],{"type":50,"value":867},{"type":50,"value":480},{"type":44,"tag":85,"props":1916,"children":1918},{"className":1917},[],[1919],{"type":50,"value":1920},"fk-flex-between",{"type":44,"tag":79,"props":1922,"children":1923},{},[1924,1926,1931,1932,1938,1939,1944,1945,1951,1952],{"type":50,"value":1925},"Grid: ",{"type":44,"tag":85,"props":1927,"children":1929},{"className":1928},[],[1930],{"type":50,"value":486},{"type":50,"value":480},{"type":44,"tag":85,"props":1933,"children":1935},{"className":1934},[],[1936],{"type":50,"value":1937},"fk-grid-2",{"type":50,"value":480},{"type":44,"tag":85,"props":1940,"children":1942},{"className":1941},[],[1943],{"type":50,"value":874},{"type":50,"value":480},{"type":44,"tag":85,"props":1946,"children":1948},{"className":1947},[],[1949],{"type":50,"value":1950},"fk-grid-4",{"type":50,"value":480},{"type":44,"tag":85,"props":1953,"children":1955},{"className":1954},[],[1956],{"type":50,"value":1957},"fk-grid-6",{"type":44,"tag":79,"props":1959,"children":1960},{},[1961,1963,1969,1970],{"type":50,"value":1962},"Container: ",{"type":44,"tag":85,"props":1964,"children":1966},{"className":1965},[],[1967],{"type":50,"value":1968},"fk-container",{"type":50,"value":480},{"type":44,"tag":85,"props":1971,"children":1973},{"className":1972},[],[1974],{"type":50,"value":1975},"fk-section",{"type":44,"tag":221,"props":1977,"children":1979},{"id":1978},"phase-4-state-modifiers-combo-classes",[1980],{"type":50,"value":1981},"Phase 4: State Modifiers (Combo Classes)",{"type":44,"tag":53,"props":1983,"children":1984},{},[1985],{"type":44,"tag":69,"props":1986,"children":1987},{},[1988],{"type":50,"value":1989},"State Modifier Rules:",{"type":44,"tag":75,"props":1991,"children":1992},{},[1993,2004,2009],{"type":44,"tag":79,"props":1994,"children":1995},{},[1996,1998,2003],{"type":50,"value":1997},"Always use as combo classes with ",{"type":44,"tag":85,"props":1999,"children":2001},{"className":2000},[],[2002],{"type":50,"value":1278},{"type":50,"value":372},{"type":44,"tag":79,"props":2005,"children":2006},{},[2007],{"type":50,"value":2008},"Applied in addition to base class",{"type":44,"tag":79,"props":2010,"children":2011},{},[2012,2014],{"type":50,"value":2013},"Example: ",{"type":44,"tag":85,"props":2015,"children":2017},{"className":2016},[],[2018],{"type":50,"value":2019},"\u003Cdiv class=\"fk-button is-primary\">...\u003C\u002Fdiv>",{"type":44,"tag":53,"props":2021,"children":2022},{},[2023],{"type":44,"tag":69,"props":2024,"children":2025},{},[2026],{"type":50,"value":2027},"Common States:",{"type":44,"tag":953,"props":2029,"children":2032},{"className":2030,"code":2031,"language":50},[956],"is-active           Currently active\u002Fselected\nis-disabled         Disabled interaction\nis-hidden           Hidden visibility\nis-visible          Visible (override hidden)\nis-loading          Loading state\nis-error            Error state\nis-success          Success state\nis-primary          Primary variant\nis-secondary        Secondary variant\nis-tertiary         Tertiary variant\nis-featured         Featured\u002Fhighlighted\nis-horizontal       Horizontal layout\nis-vertical         Vertical layout\nis-expanded         Expanded state (accordions, dropdowns)\nis-collapsed        Collapsed state\n",[2033],{"type":44,"tag":85,"props":2034,"children":2035},{"__ignoreMap":961},[2036],{"type":50,"value":2031},{"type":44,"tag":53,"props":2038,"children":2039},{},[2040],{"type":44,"tag":69,"props":2041,"children":2042},{},[2043],{"type":50,"value":2044},"Applying Combo Classes in Webflow:",{"type":44,"tag":228,"props":2046,"children":2047},{},[2048,2053,2064,2075,2086],{"type":44,"tag":79,"props":2049,"children":2050},{},[2051],{"type":50,"value":2052},"Select element",{"type":44,"tag":79,"props":2054,"children":2055},{},[2056,2058],{"type":50,"value":2057},"Add base class: ",{"type":44,"tag":85,"props":2059,"children":2061},{"className":2060},[],[2062],{"type":50,"value":2063},"fk-button",{"type":44,"tag":79,"props":2065,"children":2066},{},[2067,2069],{"type":50,"value":2068},"Add combo class: ",{"type":44,"tag":85,"props":2070,"children":2072},{"className":2071},[],[2073],{"type":50,"value":2074},"is-primary",{"type":44,"tag":79,"props":2076,"children":2077},{},[2078,2080],{"type":50,"value":2079},"Element has both classes: ",{"type":44,"tag":85,"props":2081,"children":2083},{"className":2082},[],[2084],{"type":50,"value":2085},"fk-button is-primary",{"type":44,"tag":79,"props":2087,"children":2088},{},[2089,2091],{"type":50,"value":2090},"Style the combo: ",{"type":44,"tag":85,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":50,"value":2096},".fk-button.is-primary { ... }",{"type":44,"tag":221,"props":2098,"children":2100},{"id":2099},"phase-5-responsive-design",[2101],{"type":50,"value":2102},"Phase 5: Responsive Design",{"type":44,"tag":53,"props":2104,"children":2105},{},[2106],{"type":44,"tag":69,"props":2107,"children":2108},{},[2109],{"type":50,"value":2110},"Responsive Modifiers:",{"type":44,"tag":75,"props":2112,"children":2113},{},[2114,2119,2129],{"type":44,"tag":79,"props":2115,"children":2116},{},[2117],{"type":50,"value":2118},"FlowKit uses combo classes for responsive behavior",{"type":44,"tag":79,"props":2120,"children":2121},{},[2122,2123],{"type":50,"value":1632},{"type":44,"tag":85,"props":2124,"children":2126},{"className":2125},[],[2127],{"type":50,"value":2128},".[breakpoint]-[value]",{"type":44,"tag":79,"props":2130,"children":2131},{},[2132,2133],{"type":50,"value":2013},{"type":44,"tag":85,"props":2134,"children":2136},{"className":2135},[],[2137],{"type":50,"value":2138},"fk-grid-4.tablet-2.mobile-1",{"type":44,"tag":53,"props":2140,"children":2141},{},[2142],{"type":44,"tag":69,"props":2143,"children":2144},{},[2145],{"type":50,"value":2146},"Breakpoints:",{"type":44,"tag":953,"props":2148,"children":2151},{"className":2149,"code":2150,"language":50},[956],"Desktop (default):   No modifier needed\nTablet:              .tablet-[value]\nMobile:              .mobile-[value]\n",[2152],{"type":44,"tag":85,"props":2153,"children":2154},{"__ignoreMap":961},[2155],{"type":50,"value":2150},{"type":44,"tag":53,"props":2157,"children":2158},{},[2159],{"type":44,"tag":69,"props":2160,"children":2161},{},[2162],{"type":50,"value":2163},"Responsive Grid Example:",{"type":44,"tag":953,"props":2165,"children":2168},{"className":2166,"code":2167,"language":50},[956],"Base: fk-grid-4 (4 columns on desktop)\n+ Combo: .tablet-2 (2 columns on tablet)\n+ Combo: .mobile-1 (1 column on mobile)\n\nResult: \u003Cdiv class=\"fk-grid-4 tablet-2 mobile-1\">\n",[2169],{"type":44,"tag":85,"props":2170,"children":2171},{"__ignoreMap":961},[2172],{"type":50,"value":2167},{"type":44,"tag":53,"props":2174,"children":2175},{},[2176],{"type":44,"tag":69,"props":2177,"children":2178},{},[2179],{"type":50,"value":2180},"Responsive Text Example:",{"type":44,"tag":953,"props":2182,"children":2185},{"className":2183,"code":2184,"language":50},[956],"Base: fk-text-3xl (48px on desktop)\n+ Combo: .tablet-2xl (32px on tablet)\n+ Combo: .mobile-xl (24px on mobile)\n\nResult: \u003Cdiv class=\"fk-text-3xl tablet-2xl mobile-xl\">\n",[2186],{"type":44,"tag":85,"props":2187,"children":2188},{"__ignoreMap":961},[2189],{"type":50,"value":2184},{"type":44,"tag":221,"props":2191,"children":2193},{"id":2192},"phase-6-best-practices",[2194],{"type":50,"value":2195},"Phase 6: Best Practices",{"type":44,"tag":53,"props":2197,"children":2198},{},[2199],{"type":44,"tag":69,"props":2200,"children":2201},{},[2202],{"type":50,"value":2203},"Always:",{"type":44,"tag":75,"props":2205,"children":2206},{},[2207,2219,2224,2229,2234,2239,2251,2256],{"type":44,"tag":79,"props":2208,"children":2209},{},[2210,2212,2217],{"type":50,"value":2211},"✅ Use ",{"type":44,"tag":85,"props":2213,"children":2215},{"className":2214},[],[2216],{"type":50,"value":370},{"type":50,"value":2218}," prefix for all components and elements",{"type":44,"tag":79,"props":2220,"children":2221},{},[2222],{"type":50,"value":2223},"✅ Use hyphens to separate words",{"type":44,"tag":79,"props":2225,"children":2226},{},[2227],{"type":50,"value":2228},"✅ Use lowercase only",{"type":44,"tag":79,"props":2230,"children":2231},{},[2232],{"type":50,"value":2233},"✅ Keep component names semantic and concise",{"type":44,"tag":79,"props":2235,"children":2236},{},[2237],{"type":50,"value":2238},"✅ Use combo classes for modifiers and states",{"type":44,"tag":79,"props":2240,"children":2241},{},[2242,2244,2250],{"type":50,"value":2243},"✅ Combine utilities freely (",{"type":44,"tag":85,"props":2245,"children":2247},{"className":2246},[],[2248],{"type":50,"value":2249},"fk-flex fk-flex-center fk-space-md",{"type":50,"value":1348},{"type":44,"tag":79,"props":2252,"children":2253},{},[2254],{"type":50,"value":2255},"✅ Follow component-element hierarchy",{"type":44,"tag":79,"props":2257,"children":2258},{},[2259],{"type":50,"value":2260},"✅ Use responsive combo classes for breakpoints",{"type":44,"tag":53,"props":2262,"children":2263},{},[2264],{"type":44,"tag":69,"props":2265,"children":2266},{},[2267],{"type":50,"value":2268},"Never:",{"type":44,"tag":75,"props":2270,"children":2271},{},[2272,2284,2289,2294,2299,2304,2309],{"type":44,"tag":79,"props":2273,"children":2274},{},[2275,2277,2282],{"type":50,"value":2276},"❌ Omit ",{"type":44,"tag":85,"props":2278,"children":2280},{"className":2279},[],[2281],{"type":50,"value":370},{"type":50,"value":2283}," prefix from components",{"type":44,"tag":79,"props":2285,"children":2286},{},[2287],{"type":50,"value":2288},"❌ Use underscores or spaces",{"type":44,"tag":79,"props":2290,"children":2291},{},[2292],{"type":50,"value":2293},"❌ Use uppercase or camelCase",{"type":44,"tag":79,"props":2295,"children":2296},{},[2297],{"type":50,"value":2298},"❌ Create overly specific class names",{"type":44,"tag":79,"props":2300,"children":2301},{},[2302],{"type":50,"value":2303},"❌ Nest elements more than 3 levels deep",{"type":44,"tag":79,"props":2305,"children":2306},{},[2307],{"type":50,"value":2308},"❌ Mix FlowKit with other naming systems",{"type":44,"tag":79,"props":2310,"children":2311},{},[2312],{"type":50,"value":2313},"❌ Create standalone modifier classes (use combo classes)",{"type":44,"tag":53,"props":2315,"children":2316},{},[2317],{"type":44,"tag":69,"props":2318,"children":2319},{},[2320],{"type":50,"value":2321},"Component vs Utility:",{"type":44,"tag":53,"props":2323,"children":2324},{},[2325,2327,2332],{"type":50,"value":2326},"Use ",{"type":44,"tag":69,"props":2328,"children":2329},{},[2330],{"type":50,"value":2331},"components",{"type":50,"value":2333}," when:",{"type":44,"tag":75,"props":2335,"children":2336},{},[2337,2342,2347,2352],{"type":44,"tag":79,"props":2338,"children":2339},{},[2340],{"type":50,"value":2341},"Building reusable UI patterns (cards, buttons, navigation)",{"type":44,"tag":79,"props":2343,"children":2344},{},[2345],{"type":50,"value":2346},"Need semantic meaning",{"type":44,"tag":79,"props":2348,"children":2349},{},[2350],{"type":50,"value":2351},"Multiple instances across site",{"type":44,"tag":79,"props":2353,"children":2354},{},[2355,2356,2361,2362,2367,2368],{"type":50,"value":2013},{"type":44,"tag":85,"props":2357,"children":2359},{"className":2358},[],[2360],{"type":50,"value":731},{"type":50,"value":480},{"type":44,"tag":85,"props":2363,"children":2365},{"className":2364},[],[2366],{"type":50,"value":738},{"type":50,"value":480},{"type":44,"tag":85,"props":2369,"children":2371},{"className":2370},[],[2372],{"type":50,"value":745},{"type":44,"tag":53,"props":2374,"children":2375},{},[2376,2377,2382],{"type":50,"value":2326},{"type":44,"tag":69,"props":2378,"children":2379},{},[2380],{"type":50,"value":2381},"utilities",{"type":50,"value":2333},{"type":44,"tag":75,"props":2384,"children":2385},{},[2386,2391,2396,2401],{"type":44,"tag":79,"props":2387,"children":2388},{},[2389],{"type":50,"value":2390},"Applying single-purpose styling (spacing, typography, layout)",{"type":44,"tag":79,"props":2392,"children":2393},{},[2394],{"type":50,"value":2395},"Quick adjustments without new classes",{"type":44,"tag":79,"props":2397,"children":2398},{},[2399],{"type":50,"value":2400},"Consistent spacing\u002Fsizing across site",{"type":44,"tag":79,"props":2402,"children":2403},{},[2404,2405,2410,2411,2416,2417],{"type":50,"value":2013},{"type":44,"tag":85,"props":2406,"children":2408},{"className":2407},[],[2409],{"type":50,"value":1649},{"type":50,"value":480},{"type":44,"tag":85,"props":2412,"children":2414},{"className":2413},[],[2415],{"type":50,"value":899},{"type":50,"value":480},{"type":44,"tag":85,"props":2418,"children":2420},{"className":2419},[],[2421],{"type":50,"value":867},{"type":44,"tag":53,"props":2423,"children":2424},{},[2425,2430],{"type":44,"tag":69,"props":2426,"children":2427},{},[2428],{"type":50,"value":2429},"Utility Stacking:",{"type":50,"value":2431},"\nUtilities can be freely combined:",{"type":44,"tag":953,"props":2433,"children":2437},{"className":2434,"code":2435,"language":2436,"meta":961,"style":961},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"fk-flex fk-flex-center fk-space-md fk-py-lg\">\n  Content\n\u003C\u002Fdiv>\n","html",[2438],{"type":44,"tag":85,"props":2439,"children":2440},{"__ignoreMap":961},[2441,2490,2500],{"type":44,"tag":2442,"props":2443,"children":2446},"span",{"class":2444,"line":2445},"line",1,[2447,2453,2459,2465,2470,2475,2481,2485],{"type":44,"tag":2442,"props":2448,"children":2450},{"style":2449},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[2451],{"type":50,"value":2452},"\u003C",{"type":44,"tag":2442,"props":2454,"children":2456},{"style":2455},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2457],{"type":50,"value":2458},"div",{"type":44,"tag":2442,"props":2460,"children":2462},{"style":2461},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[2463],{"type":50,"value":2464}," class",{"type":44,"tag":2442,"props":2466,"children":2467},{"style":2449},[2468],{"type":50,"value":2469},"=",{"type":44,"tag":2442,"props":2471,"children":2472},{"style":2449},[2473],{"type":50,"value":2474},"\"",{"type":44,"tag":2442,"props":2476,"children":2478},{"style":2477},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[2479],{"type":50,"value":2480},"fk-flex fk-flex-center fk-space-md fk-py-lg",{"type":44,"tag":2442,"props":2482,"children":2483},{"style":2449},[2484],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2486,"children":2487},{"style":2449},[2488],{"type":50,"value":2489},">\n",{"type":44,"tag":2442,"props":2491,"children":2493},{"class":2444,"line":2492},2,[2494],{"type":44,"tag":2442,"props":2495,"children":2497},{"style":2496},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[2498],{"type":50,"value":2499},"  Content\n",{"type":44,"tag":2442,"props":2501,"children":2503},{"class":2444,"line":2502},3,[2504,2509,2513],{"type":44,"tag":2442,"props":2505,"children":2506},{"style":2449},[2507],{"type":50,"value":2508},"\u003C\u002F",{"type":44,"tag":2442,"props":2510,"children":2511},{"style":2455},[2512],{"type":50,"value":2458},{"type":44,"tag":2442,"props":2514,"children":2515},{"style":2449},[2516],{"type":50,"value":2489},{"type":44,"tag":53,"props":2518,"children":2519},{},[2520],{"type":44,"tag":69,"props":2521,"children":2522},{},[2523],{"type":50,"value":2524},"Component + Utility Combo:",{"type":44,"tag":953,"props":2526,"children":2528},{"className":2434,"code":2527,"language":2436,"meta":961,"style":961},"\u003Cdiv class=\"fk-card fk-shadow-lg fk-rounded-lg\">\n  \u003Cdiv class=\"fk-card-content fk-space-lg\">\n    \u003Ch3 class=\"fk-card-title fk-text-xl fk-text-bold\">Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[2529],{"type":44,"tag":85,"props":2530,"children":2531},{"__ignoreMap":961},[2532,2568,2605,2660,2676],{"type":44,"tag":2442,"props":2533,"children":2534},{"class":2444,"line":2445},[2535,2539,2543,2547,2551,2555,2560,2564],{"type":44,"tag":2442,"props":2536,"children":2537},{"style":2449},[2538],{"type":50,"value":2452},{"type":44,"tag":2442,"props":2540,"children":2541},{"style":2455},[2542],{"type":50,"value":2458},{"type":44,"tag":2442,"props":2544,"children":2545},{"style":2461},[2546],{"type":50,"value":2464},{"type":44,"tag":2442,"props":2548,"children":2549},{"style":2449},[2550],{"type":50,"value":2469},{"type":44,"tag":2442,"props":2552,"children":2553},{"style":2449},[2554],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2556,"children":2557},{"style":2477},[2558],{"type":50,"value":2559},"fk-card fk-shadow-lg fk-rounded-lg",{"type":44,"tag":2442,"props":2561,"children":2562},{"style":2449},[2563],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2565,"children":2566},{"style":2449},[2567],{"type":50,"value":2489},{"type":44,"tag":2442,"props":2569,"children":2570},{"class":2444,"line":2492},[2571,2576,2580,2584,2588,2592,2597,2601],{"type":44,"tag":2442,"props":2572,"children":2573},{"style":2449},[2574],{"type":50,"value":2575},"  \u003C",{"type":44,"tag":2442,"props":2577,"children":2578},{"style":2455},[2579],{"type":50,"value":2458},{"type":44,"tag":2442,"props":2581,"children":2582},{"style":2461},[2583],{"type":50,"value":2464},{"type":44,"tag":2442,"props":2585,"children":2586},{"style":2449},[2587],{"type":50,"value":2469},{"type":44,"tag":2442,"props":2589,"children":2590},{"style":2449},[2591],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2593,"children":2594},{"style":2477},[2595],{"type":50,"value":2596},"fk-card-content fk-space-lg",{"type":44,"tag":2442,"props":2598,"children":2599},{"style":2449},[2600],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2602,"children":2603},{"style":2449},[2604],{"type":50,"value":2489},{"type":44,"tag":2442,"props":2606,"children":2607},{"class":2444,"line":2502},[2608,2613,2617,2621,2625,2629,2634,2638,2643,2648,2652,2656],{"type":44,"tag":2442,"props":2609,"children":2610},{"style":2449},[2611],{"type":50,"value":2612},"    \u003C",{"type":44,"tag":2442,"props":2614,"children":2615},{"style":2455},[2616],{"type":50,"value":221},{"type":44,"tag":2442,"props":2618,"children":2619},{"style":2461},[2620],{"type":50,"value":2464},{"type":44,"tag":2442,"props":2622,"children":2623},{"style":2449},[2624],{"type":50,"value":2469},{"type":44,"tag":2442,"props":2626,"children":2627},{"style":2449},[2628],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2630,"children":2631},{"style":2477},[2632],{"type":50,"value":2633},"fk-card-title fk-text-xl fk-text-bold",{"type":44,"tag":2442,"props":2635,"children":2636},{"style":2449},[2637],{"type":50,"value":2474},{"type":44,"tag":2442,"props":2639,"children":2640},{"style":2449},[2641],{"type":50,"value":2642},">",{"type":44,"tag":2442,"props":2644,"children":2645},{"style":2496},[2646],{"type":50,"value":2647},"Title",{"type":44,"tag":2442,"props":2649,"children":2650},{"style":2449},[2651],{"type":50,"value":2508},{"type":44,"tag":2442,"props":2653,"children":2654},{"style":2455},[2655],{"type":50,"value":221},{"type":44,"tag":2442,"props":2657,"children":2658},{"style":2449},[2659],{"type":50,"value":2489},{"type":44,"tag":2442,"props":2661,"children":2662},{"class":2444,"line":319},[2663,2668,2672],{"type":44,"tag":2442,"props":2664,"children":2665},{"style":2449},[2666],{"type":50,"value":2667},"  \u003C\u002F",{"type":44,"tag":2442,"props":2669,"children":2670},{"style":2455},[2671],{"type":50,"value":2458},{"type":44,"tag":2442,"props":2673,"children":2674},{"style":2449},[2675],{"type":50,"value":2489},{"type":44,"tag":2442,"props":2677,"children":2679},{"class":2444,"line":2678},5,[2680,2684,2688],{"type":44,"tag":2442,"props":2681,"children":2682},{"style":2449},[2683],{"type":50,"value":2508},{"type":44,"tag":2442,"props":2685,"children":2686},{"style":2455},[2687],{"type":50,"value":2458},{"type":44,"tag":2442,"props":2689,"children":2690},{"style":2449},[2691],{"type":50,"value":2489},{"type":44,"tag":221,"props":2693,"children":2695},{"id":2694},"phase-7-common-mistakes-fixes",[2696],{"type":50,"value":2697},"Phase 7: Common Mistakes & Fixes",{"type":44,"tag":53,"props":2699,"children":2700},{},[2701],{"type":44,"tag":69,"props":2702,"children":2703},{},[2704],{"type":50,"value":2705},"Mistake 1: Missing Prefix",{"type":44,"tag":953,"props":2707,"children":2710},{"className":2708,"code":2709,"language":50},[956],"❌ card, button, nav\n✅ fk-card, fk-button, fk-nav\n",[2711],{"type":44,"tag":85,"props":2712,"children":2713},{"__ignoreMap":961},[2714],{"type":50,"value":2709},{"type":44,"tag":53,"props":2716,"children":2717},{},[2718],{"type":44,"tag":69,"props":2719,"children":2720},{},[2721],{"type":50,"value":2722},"Mistake 2: Wrong Case",{"type":44,"tag":953,"props":2724,"children":2727},{"className":2725,"code":2726,"language":50},[956],"❌ FK-Card, fk-Button, Fk-nav\n✅ fk-card, fk-button, fk-nav\n",[2728],{"type":44,"tag":85,"props":2729,"children":2730},{"__ignoreMap":961},[2731],{"type":50,"value":2726},{"type":44,"tag":53,"props":2733,"children":2734},{},[2735],{"type":44,"tag":69,"props":2736,"children":2737},{},[2738],{"type":50,"value":2739},"Mistake 3: Wrong Separator",{"type":44,"tag":953,"props":2741,"children":2744},{"className":2742,"code":2743,"language":50},[956],"❌ fk_card_title, fk.card.title\n✅ fk-card-title\n",[2745],{"type":44,"tag":85,"props":2746,"children":2747},{"__ignoreMap":961},[2748],{"type":50,"value":2743},{"type":44,"tag":53,"props":2750,"children":2751},{},[2752],{"type":44,"tag":69,"props":2753,"children":2754},{},[2755],{"type":50,"value":2756},"Mistake 4: camelCase\u002FPascalCase",{"type":44,"tag":953,"props":2758,"children":2761},{"className":2759,"code":2760,"language":50},[956],"❌ fkCardTitle, FkCardTitle\n✅ fk-card-title\n",[2762],{"type":44,"tag":85,"props":2763,"children":2764},{"__ignoreMap":961},[2765],{"type":50,"value":2760},{"type":44,"tag":53,"props":2767,"children":2768},{},[2769],{"type":44,"tag":69,"props":2770,"children":2771},{},[2772],{"type":50,"value":2773},"Mistake 5: Modifier as Standalone Class",{"type":44,"tag":953,"props":2775,"children":2778},{"className":2776,"code":2777,"language":50},[956],"❌ \u003Cdiv class=\"fk-button-primary\">\n✅ \u003Cdiv class=\"fk-button is-primary\">\n",[2779],{"type":44,"tag":85,"props":2780,"children":2781},{"__ignoreMap":961},[2782],{"type":50,"value":2777},{"type":44,"tag":53,"props":2784,"children":2785},{},[2786],{"type":44,"tag":69,"props":2787,"children":2788},{},[2789],{"type":50,"value":2790},"Mistake 6: Too Much Nesting",{"type":44,"tag":953,"props":2792,"children":2795},{"className":2793,"code":2794,"language":50},[956],"❌ fk-hero-content-wrapper-section-title-text\n✅ fk-hero-content, fk-hero-title\n",[2796],{"type":44,"tag":85,"props":2797,"children":2798},{"__ignoreMap":961},[2799],{"type":50,"value":2794},{"type":44,"tag":53,"props":2801,"children":2802},{},[2803],{"type":44,"tag":69,"props":2804,"children":2805},{},[2806],{"type":50,"value":2807},"Mistake 7: Overly Specific Names",{"type":44,"tag":953,"props":2809,"children":2812},{"className":2810,"code":2811,"language":50},[956],"❌ fk-product-feature-card-with-image-and-price\n✅ fk-card (use combo: is-product)\n",[2813],{"type":44,"tag":85,"props":2814,"children":2815},{"__ignoreMap":961},[2816],{"type":50,"value":2811},{"type":44,"tag":53,"props":2818,"children":2819},{},[2820],{"type":44,"tag":69,"props":2821,"children":2822},{},[2823],{"type":50,"value":2824},"Mistake 8: Wrong Responsive Pattern",{"type":44,"tag":953,"props":2826,"children":2829},{"className":2827,"code":2828,"language":50},[956],"❌ fk-grid-3-tablet-2 (single class)\n✅ fk-grid-3 tablet-2 (two classes)\n",[2830],{"type":44,"tag":85,"props":2831,"children":2832},{"__ignoreMap":961},[2833],{"type":50,"value":2828},{"type":44,"tag":221,"props":2835,"children":2837},{"id":2836},"phase-8-flowkit-version-notes",[2838],{"type":50,"value":2839},"Phase 8: FlowKit Version Notes",{"type":44,"tag":53,"props":2841,"children":2842},{},[2843],{"type":44,"tag":69,"props":2844,"children":2845},{},[2846],{"type":50,"value":2847},"FlowKit v2 (Current):",{"type":44,"tag":75,"props":2849,"children":2850},{},[2851,2856,2861,2866,2871],{"type":44,"tag":79,"props":2852,"children":2853},{},[2854],{"type":50,"value":2855},"New naming conventions (documented here)",{"type":44,"tag":79,"props":2857,"children":2858},{},[2859],{"type":50,"value":2860},"Enhanced grid system with responsive combos",{"type":44,"tag":79,"props":2862,"children":2863},{},[2864],{"type":50,"value":2865},"Expanded utility collection",{"type":44,"tag":79,"props":2867,"children":2868},{},[2869],{"type":50,"value":2870},"Improved component library",{"type":44,"tag":79,"props":2872,"children":2873},{},[2874],{"type":50,"value":2875},"Better variable system",{"type":44,"tag":53,"props":2877,"children":2878},{},[2879],{"type":44,"tag":69,"props":2880,"children":2881},{},[2882],{"type":50,"value":2883},"Key v2 Changes:",{"type":44,"tag":75,"props":2885,"children":2886},{},[2887,2899,2911,2930,2935],{"type":44,"tag":79,"props":2888,"children":2889},{},[2890,2892,2897],{"type":50,"value":2891},"Standardized ",{"type":44,"tag":85,"props":2893,"children":2895},{"className":2894},[],[2896],{"type":50,"value":370},{"type":50,"value":2898}," prefix across all components",{"type":44,"tag":79,"props":2900,"children":2901},{},[2902,2904,2909],{"type":50,"value":2903},"Introduced ",{"type":44,"tag":85,"props":2905,"children":2907},{"className":2906},[],[2908],{"type":50,"value":1278},{"type":50,"value":2910}," prefix for state modifiers (combo classes)",{"type":44,"tag":79,"props":2912,"children":2913},{},[2914,2916,2922,2923,2929],{"type":50,"value":2915},"Added responsive combo classes (",{"type":44,"tag":85,"props":2917,"children":2919},{"className":2918},[],[2920],{"type":50,"value":2921},".tablet-",{"type":50,"value":480},{"type":44,"tag":85,"props":2924,"children":2926},{"className":2925},[],[2927],{"type":50,"value":2928},".mobile-",{"type":50,"value":1348},{"type":44,"tag":79,"props":2931,"children":2932},{},[2933],{"type":50,"value":2934},"Expanded spacing scale (xs to 3xl)",{"type":44,"tag":79,"props":2936,"children":2937},{},[2938],{"type":50,"value":2939},"More semantic utility names",{"type":44,"tag":53,"props":2941,"children":2942},{},[2943,2948],{"type":44,"tag":69,"props":2944,"children":2945},{},[2946],{"type":50,"value":2947},"Migration from v1:",{"type":50,"value":2949},"\nIf user has v1 FlowKit classes:",{"type":44,"tag":228,"props":2951,"children":2952},{},[2953,2965,2977,2982],{"type":44,"tag":79,"props":2954,"children":2955},{},[2956,2958,2963],{"type":50,"value":2957},"Add ",{"type":44,"tag":85,"props":2959,"children":2961},{"className":2960},[],[2962],{"type":50,"value":370},{"type":50,"value":2964}," prefix where missing",{"type":44,"tag":79,"props":2966,"children":2967},{},[2968,2970,2975],{"type":50,"value":2969},"Convert modifiers to ",{"type":44,"tag":85,"props":2971,"children":2973},{"className":2972},[],[2974],{"type":50,"value":1278},{"type":50,"value":2976}," combo classes",{"type":44,"tag":79,"props":2978,"children":2979},{},[2980],{"type":50,"value":2981},"Update responsive classes to combo format",{"type":44,"tag":79,"props":2983,"children":2984},{},[2985],{"type":50,"value":2986},"Check spacing utilities for new scale",{"type":44,"tag":221,"props":2988,"children":2990},{"id":2989},"phase-9-performance-optimization",[2991],{"type":50,"value":2992},"Phase 9: Performance Optimization",{"type":44,"tag":53,"props":2994,"children":2995},{},[2996],{"type":44,"tag":69,"props":2997,"children":2998},{},[2999],{"type":50,"value":3000},"Class Creation:",{"type":44,"tag":75,"props":3002,"children":3003},{},[3004,3009,3014,3019],{"type":44,"tag":79,"props":3005,"children":3006},{},[3007],{"type":50,"value":3008},"Create base component classes first",{"type":44,"tag":79,"props":3010,"children":3011},{},[3012],{"type":50,"value":3013},"Then create element classes",{"type":44,"tag":79,"props":3015,"children":3016},{},[3017],{"type":50,"value":3018},"Finally create utility classes",{"type":44,"tag":79,"props":3020,"children":3021},{},[3022,3023,3028],{"type":50,"value":2326},{"type":44,"tag":85,"props":3024,"children":3026},{"className":3025},[],[3027],{"type":50,"value":153},{"type":50,"value":3029}," in batches of 10-15 classes",{"type":44,"tag":53,"props":3031,"children":3032},{},[3033],{"type":44,"tag":69,"props":3034,"children":3035},{},[3036],{"type":50,"value":3037},"Element Updates:",{"type":44,"tag":75,"props":3039,"children":3040},{},[3041,3046,3051],{"type":44,"tag":79,"props":3042,"children":3043},{},[3044],{"type":50,"value":3045},"Process elements in groups of 10-15",{"type":44,"tag":79,"props":3047,"children":3048},{},[3049],{"type":50,"value":3050},"Show progress for large batches",{"type":44,"tag":79,"props":3052,"children":3053},{},[3054],{"type":50,"value":3055},"If >50 elements, ask user to confirm batch size",{"type":44,"tag":53,"props":3057,"children":3058},{},[3059],{"type":44,"tag":69,"props":3060,"children":3061},{},[3062,3064,3069],{"type":50,"value":3063},"Designer Connection (only if using the optional ",{"type":44,"tag":85,"props":3065,"children":3067},{"className":3066},[],[3068],{"type":50,"value":176},{"type":50,"value":3070}," convenience):",{"type":44,"tag":75,"props":3072,"children":3073},{},[3074,3092,3104],{"type":44,"tag":79,"props":3075,"children":3076},{},[3077,3079,3084,3085,3090],{"type":50,"value":3078},"Class inspection, style creation, and element updates (",{"type":44,"tag":85,"props":3080,"children":3082},{"className":3081},[],[3083],{"type":50,"value":141},{"type":50,"value":480},{"type":44,"tag":85,"props":3086,"children":3088},{"className":3087},[],[3089],{"type":50,"value":153},{"type":50,"value":3091},") never need Designer — this only applies if the user asked to work with the page currently open in Designer, or to interactively select elements",{"type":44,"tag":79,"props":3093,"children":3094},{},[3095,3097,3102],{"type":50,"value":3096},"If connection lost mid-batch, pause and ask user to reconnect before the next ",{"type":44,"tag":85,"props":3098,"children":3100},{"className":3099},[],[3101],{"type":50,"value":176},{"type":50,"value":3103}," action",{"type":44,"tag":79,"props":3105,"children":3106},{},[3107],{"type":50,"value":3108},"Save progress between batches",{"type":44,"tag":221,"props":3110,"children":3112},{"id":3111},"phase-10-error-handling",[3113],{"type":50,"value":3114},"Phase 10: Error Handling",{"type":44,"tag":53,"props":3116,"children":3117},{},[3118],{"type":44,"tag":69,"props":3119,"children":3120},{},[3121],{"type":50,"value":3122},"Common Errors:",{"type":44,"tag":53,"props":3124,"children":3125},{},[3126],{"type":44,"tag":69,"props":3127,"children":3128},{},[3129,3131,3136],{"type":50,"value":3130},"1. Designer Not Connected (only relevant when using ",{"type":44,"tag":85,"props":3132,"children":3134},{"className":3133},[],[3135],{"type":50,"value":176},{"type":50,"value":3137},"):",{"type":44,"tag":953,"props":3139,"children":3142},{"className":3140,"code":3141,"language":50},[956],"❌ Error: Cannot get current page or select elements - Designer not connected\n\nSolution:\n1. Open Webflow Designer\n2. Open the target site\n3. Connect to Designer in Claude Code\n4. Retry operation\n\n(Not needed for the default headless workflow — use `data_pages_tool` with `list_pages` instead.)\n",[3143],{"type":44,"tag":85,"props":3144,"children":3145},{"__ignoreMap":961},[3146],{"type":50,"value":3141},{"type":44,"tag":53,"props":3148,"children":3149},{},[3150],{"type":44,"tag":69,"props":3151,"children":3152},{},[3153],{"type":50,"value":3154},"2. Class Already Exists:",{"type":44,"tag":953,"props":3156,"children":3159},{"className":3157,"code":3158,"language":50},[956],"⚠️ Warning: Class 'fk-button' already exists\n\nOptions:\n1. Skip creation (use existing)\n2. Update existing class\n3. Create with different name\n",[3160],{"type":44,"tag":85,"props":3161,"children":3162},{"__ignoreMap":961},[3163],{"type":50,"value":3158},{"type":44,"tag":53,"props":3165,"children":3166},{},[3167],{"type":44,"tag":69,"props":3168,"children":3169},{},[3170],{"type":50,"value":3171},"3. Invalid Class Name:",{"type":44,"tag":953,"props":3173,"children":3176},{"className":3174,"code":3175,"language":50},[956],"❌ Error: Class name 'fk-My Button' is invalid\n\nIssues:\n- Contains spaces\n- Contains uppercase\n\nSuggested: 'fk-my-button'\n",[3177],{"type":44,"tag":85,"props":3178,"children":3179},{"__ignoreMap":961},[3180],{"type":50,"value":3175},{"type":44,"tag":53,"props":3182,"children":3183},{},[3184],{"type":44,"tag":69,"props":3185,"children":3186},{},[3187],{"type":50,"value":3188},"4. Style Property Not Supported:",{"type":44,"tag":953,"props":3190,"children":3193},{"className":3191,"code":3192,"language":50},[956],"⚠️ Warning: Property 'custom-property' not supported\n\nThis may be:\n- Custom CSS property\n- Webflow doesn't support via Designer API\n- Typo in property name\n\nRecommendation: Apply manually in Designer\n",[3194],{"type":44,"tag":85,"props":3195,"children":3196},{"__ignoreMap":961},[3197],{"type":50,"value":3192},{"type":44,"tag":59,"props":3199,"children":3201},{"id":3200},"edge-cases",[3202],{"type":50,"value":3203},"Edge Cases",{"type":44,"tag":53,"props":3205,"children":3206},{},[3207,3212],{"type":44,"tag":69,"props":3208,"children":3209},{},[3210],{"type":50,"value":3211},"Case 1: Third-Party Integration Classes",{"type":50,"value":3213},"\nIf integrating with third-party libraries (e.g., animations, sliders):",{"type":44,"tag":75,"props":3215,"children":3216},{},[3217,3222,3233],{"type":44,"tag":79,"props":3218,"children":3219},{},[3220],{"type":50,"value":3221},"Keep third-party classes separate",{"type":44,"tag":79,"props":3223,"children":3224},{},[3225,3227],{"type":50,"value":3226},"Add FlowKit wrapper: ",{"type":44,"tag":85,"props":3228,"children":3230},{"className":3229},[],[3231],{"type":50,"value":3232},"\u003Cdiv class=\"fk-slider\">\u003Cdiv class=\"swiper\">...\u003C\u002Fdiv>\u003C\u002Fdiv>",{"type":44,"tag":79,"props":3234,"children":3235},{},[3236],{"type":50,"value":3237},"Don't force FlowKit naming on third-party classes",{"type":44,"tag":53,"props":3239,"children":3240},{},[3241,3246],{"type":44,"tag":69,"props":3242,"children":3243},{},[3244],{"type":50,"value":3245},"Case 2: Legacy Code Migration",{"type":50,"value":3247},"\nWhen migrating large existing site:",{"type":44,"tag":75,"props":3249,"children":3250},{},[3251,3256,3261,3266],{"type":44,"tag":79,"props":3252,"children":3253},{},[3254],{"type":50,"value":3255},"Create FlowKit classes first",{"type":44,"tag":79,"props":3257,"children":3258},{},[3259],{"type":50,"value":3260},"Apply to new sections",{"type":44,"tag":79,"props":3262,"children":3263},{},[3264],{"type":50,"value":3265},"Gradually refactor old sections",{"type":44,"tag":79,"props":3267,"children":3268},{},[3269],{"type":50,"value":3270},"Keep both systems temporarily for backwards compatibility",{"type":44,"tag":53,"props":3272,"children":3273},{},[3274,3279],{"type":44,"tag":69,"props":3275,"children":3276},{},[3277],{"type":50,"value":3278},"Case 3: Custom Naming Requirements",{"type":50,"value":3280},"\nIf client has existing naming system:",{"type":44,"tag":75,"props":3282,"children":3283},{},[3284,3289,3294,3299],{"type":44,"tag":79,"props":3285,"children":3286},{},[3287],{"type":50,"value":3288},"Discuss FlowKit benefits",{"type":44,"tag":79,"props":3290,"children":3291},{},[3292],{"type":50,"value":3293},"Show side-by-side comparison",{"type":44,"tag":79,"props":3295,"children":3296},{},[3297],{"type":50,"value":3298},"Offer hybrid approach: FlowKit for new components, keep old for existing",{"type":44,"tag":79,"props":3300,"children":3301},{},[3302],{"type":50,"value":3303},"Or fully refactor (more time, better long-term)",{"type":44,"tag":53,"props":3305,"children":3306},{},[3307,3312],{"type":44,"tag":69,"props":3308,"children":3309},{},[3310],{"type":50,"value":3311},"Case 4: Component Library Conflicts",{"type":50,"value":3313},"\nIf site uses another framework (Bootstrap, Tailwind):",{"type":44,"tag":75,"props":3315,"children":3316},{},[3317,3322,3327,3332],{"type":44,"tag":79,"props":3318,"children":3319},{},[3320],{"type":50,"value":3321},"FlowKit can coexist but not recommended",{"type":44,"tag":79,"props":3323,"children":3324},{},[3325],{"type":50,"value":3326},"Choose one primary system",{"type":44,"tag":79,"props":3328,"children":3329},{},[3330],{"type":50,"value":3331},"Use FlowKit for custom components",{"type":44,"tag":79,"props":3333,"children":3334},{},[3335],{"type":50,"value":3336},"Use other framework for pre-built components",{"type":44,"tag":53,"props":3338,"children":3339},{},[3340,3345],{"type":44,"tag":69,"props":3341,"children":3342},{},[3343],{"type":50,"value":3344},"Case 5: Utility Class Explosion",{"type":50,"value":3346},"\nIf too many utility classes on single element:",{"type":44,"tag":75,"props":3348,"children":3349},{},[3350,3355,3366],{"type":44,"tag":79,"props":3351,"children":3352},{},[3353],{"type":50,"value":3354},"Consider creating component class instead",{"type":44,"tag":79,"props":3356,"children":3357},{},[3358,3360],{"type":50,"value":3359},"Example: Instead of ",{"type":44,"tag":85,"props":3361,"children":3363},{"className":3362},[],[3364],{"type":50,"value":3365},"fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow",{"type":44,"tag":79,"props":3367,"children":3368},{},[3369,3371,3377],{"type":50,"value":3370},"Create: ",{"type":44,"tag":85,"props":3372,"children":3374},{"className":3373},[],[3375],{"type":50,"value":3376},"fk-panel",{"type":50,"value":3378}," with those properties built-in",{"type":44,"tag":59,"props":3380,"children":3382},{"id":3381},"production-checklist",[3383],{"type":50,"value":3384},"Production Checklist",{"type":44,"tag":53,"props":3386,"children":3387},{},[3388],{"type":50,"value":3389},"Before considering FlowKit implementation complete:",{"type":44,"tag":53,"props":3391,"children":3392},{},[3393],{"type":44,"tag":69,"props":3394,"children":3395},{},[3396],{"type":50,"value":3397},"Setup:",{"type":44,"tag":75,"props":3399,"children":3402},{"className":3400},[3401],"contains-task-list",[3403,3416,3439],{"type":44,"tag":79,"props":3404,"children":3407},{"className":3405},[3406],"task-list-item",[3408,3414],{"type":44,"tag":3409,"props":3410,"children":3413},"input",{"disabled":3411,"type":3412},true,"checkbox",[],{"type":50,"value":3415}," Target site identified",{"type":44,"tag":79,"props":3417,"children":3419},{"className":3418},[3406],[3420,3423,3425,3430,3432,3437],{"type":44,"tag":3409,"props":3421,"children":3422},{"disabled":3411,"type":3412},[],{"type":50,"value":3424}," Target page found (via ",{"type":44,"tag":85,"props":3426,"children":3428},{"className":3427},[],[3429],{"type":50,"value":122},{"type":50,"value":3431}," list_pages, or ",{"type":44,"tag":85,"props":3433,"children":3435},{"className":3434},[],[3436],{"type":50,"value":176},{"type":50,"value":3438}," if using the current open page)",{"type":44,"tag":79,"props":3440,"children":3442},{"className":3441},[3406],[3443,3446],{"type":44,"tag":3409,"props":3444,"children":3445},{"disabled":3411,"type":3412},[],{"type":50,"value":3447}," Scope defined with user",{"type":44,"tag":53,"props":3449,"children":3450},{},[3451],{"type":44,"tag":69,"props":3452,"children":3453},{},[3454],{"type":50,"value":3455},"Component Structure:",{"type":44,"tag":75,"props":3457,"children":3459},{"className":3458},[3401],[3460,3475,3484,3493],{"type":44,"tag":79,"props":3461,"children":3463},{"className":3462},[3406],[3464,3467,3469,3474],{"type":44,"tag":3409,"props":3465,"children":3466},{"disabled":3411,"type":3412},[],{"type":50,"value":3468}," All components use ",{"type":44,"tag":85,"props":3470,"children":3472},{"className":3471},[],[3473],{"type":50,"value":370},{"type":50,"value":372},{"type":44,"tag":79,"props":3476,"children":3478},{"className":3477},[3406],[3479,3482],{"type":44,"tag":3409,"props":3480,"children":3481},{"disabled":3411,"type":3412},[],{"type":50,"value":3483}," Component hierarchy is logical (max 3 levels)",{"type":44,"tag":79,"props":3485,"children":3487},{"className":3486},[3406],[3488,3491],{"type":44,"tag":3409,"props":3489,"children":3490},{"disabled":3411,"type":3412},[],{"type":50,"value":3492}," Element names are semantic",{"type":44,"tag":79,"props":3494,"children":3496},{"className":3495},[3406],[3497,3500,3502,3507],{"type":44,"tag":3409,"props":3498,"children":3499},{"disabled":3411,"type":3412},[],{"type":50,"value":3501}," Modifiers use combo classes with ",{"type":44,"tag":85,"props":3503,"children":3505},{"className":3504},[],[3506],{"type":50,"value":1278},{"type":50,"value":372},{"type":44,"tag":53,"props":3509,"children":3510},{},[3511],{"type":44,"tag":69,"props":3512,"children":3513},{},[3514],{"type":50,"value":3515},"Utilities:",{"type":44,"tag":75,"props":3517,"children":3519},{"className":3518},[3401],[3520,3529,3538,3547],{"type":44,"tag":79,"props":3521,"children":3523},{"className":3522},[3406],[3524,3527],{"type":44,"tag":3409,"props":3525,"children":3526},{"disabled":3411,"type":3412},[],{"type":50,"value":3528}," Spacing utilities use t-shirt sizing (xs-3xl)",{"type":44,"tag":79,"props":3530,"children":3532},{"className":3531},[3406],[3533,3536],{"type":44,"tag":3409,"props":3534,"children":3535},{"disabled":3411,"type":3412},[],{"type":50,"value":3537}," Typography utilities cover all text styles",{"type":44,"tag":79,"props":3539,"children":3541},{"className":3540},[3406],[3542,3545],{"type":44,"tag":3409,"props":3543,"children":3544},{"disabled":3411,"type":3412},[],{"type":50,"value":3546}," Layout utilities handle flex\u002Fgrid needs",{"type":44,"tag":79,"props":3548,"children":3550},{"className":3549},[3406],[3551,3554],{"type":44,"tag":3409,"props":3552,"children":3553},{"disabled":3411,"type":3412},[],{"type":50,"value":3555}," Color utilities align with brand",{"type":44,"tag":53,"props":3557,"children":3558},{},[3559],{"type":44,"tag":69,"props":3560,"children":3561},{},[3562],{"type":50,"value":3563},"Responsive:",{"type":44,"tag":75,"props":3565,"children":3567},{"className":3566},[3401],[3568,3577,3586],{"type":44,"tag":79,"props":3569,"children":3571},{"className":3570},[3406],[3572,3575],{"type":44,"tag":3409,"props":3573,"children":3574},{"disabled":3411,"type":3412},[],{"type":50,"value":3576}," Responsive combo classes defined for key components",{"type":44,"tag":79,"props":3578,"children":3580},{"className":3579},[3406],[3581,3584],{"type":44,"tag":3409,"props":3582,"children":3583},{"disabled":3411,"type":3412},[],{"type":50,"value":3585}," Breakpoint modifiers tested (tablet, mobile)",{"type":44,"tag":79,"props":3587,"children":3589},{"className":3588},[3406],[3590,3593],{"type":44,"tag":3409,"props":3591,"children":3592},{"disabled":3411,"type":3412},[],{"type":50,"value":3594}," Grid systems adapt properly",{"type":44,"tag":53,"props":3596,"children":3597},{},[3598],{"type":44,"tag":69,"props":3599,"children":3600},{},[3601],{"type":50,"value":3602},"States:",{"type":44,"tag":75,"props":3604,"children":3606},{"className":3605},[3401],[3607,3616,3625],{"type":44,"tag":79,"props":3608,"children":3610},{"className":3609},[3406],[3611,3614],{"type":44,"tag":3409,"props":3612,"children":3613},{"disabled":3411,"type":3412},[],{"type":50,"value":3615}," State modifiers defined (is-active, is-disabled, etc.)",{"type":44,"tag":79,"props":3617,"children":3619},{"className":3618},[3406],[3620,3623],{"type":44,"tag":3409,"props":3621,"children":3622},{"disabled":3411,"type":3412},[],{"type":50,"value":3624}," Hover\u002Ffocus states work correctly",{"type":44,"tag":79,"props":3626,"children":3628},{"className":3627},[3406],[3629,3632],{"type":44,"tag":3409,"props":3630,"children":3631},{"disabled":3411,"type":3412},[],{"type":50,"value":3633}," Active states styled properly",{"type":44,"tag":53,"props":3635,"children":3636},{},[3637],{"type":44,"tag":69,"props":3638,"children":3639},{},[3640],{"type":50,"value":3641},"Documentation:",{"type":44,"tag":75,"props":3643,"children":3645},{"className":3644},[3401],[3646,3655,3664,3673],{"type":44,"tag":79,"props":3647,"children":3649},{"className":3648},[3406],[3650,3653],{"type":44,"tag":3409,"props":3651,"children":3652},{"disabled":3411,"type":3412},[],{"type":50,"value":3654}," Component structure documented",{"type":44,"tag":79,"props":3656,"children":3658},{"className":3657},[3406],[3659,3662],{"type":44,"tag":3409,"props":3660,"children":3661},{"disabled":3411,"type":3412},[],{"type":50,"value":3663}," Utility classes listed",{"type":44,"tag":79,"props":3665,"children":3667},{"className":3666},[3406],[3668,3671],{"type":44,"tag":3409,"props":3669,"children":3670},{"disabled":3411,"type":3412},[],{"type":50,"value":3672}," Responsive behavior explained",{"type":44,"tag":79,"props":3674,"children":3676},{"className":3675},[3406],[3677,3680],{"type":44,"tag":3409,"props":3678,"children":3679},{"disabled":3411,"type":3412},[],{"type":50,"value":3681}," State modifiers documented",{"type":44,"tag":53,"props":3683,"children":3684},{},[3685],{"type":44,"tag":69,"props":3686,"children":3687},{},[3688],{"type":50,"value":3689},"Validation:",{"type":44,"tag":75,"props":3691,"children":3693},{"className":3692},[3401],[3694,3703,3712,3721],{"type":44,"tag":79,"props":3695,"children":3697},{"className":3696},[3406],[3698,3701],{"type":44,"tag":3409,"props":3699,"children":3700},{"disabled":3411,"type":3412},[],{"type":50,"value":3702}," All classes follow naming conventions",{"type":44,"tag":79,"props":3704,"children":3706},{"className":3705},[3406],[3707,3710],{"type":44,"tag":3409,"props":3708,"children":3709},{"disabled":3411,"type":3412},[],{"type":50,"value":3711}," No uppercase letters",{"type":44,"tag":79,"props":3713,"children":3715},{"className":3714},[3406],[3716,3719],{"type":44,"tag":3409,"props":3717,"children":3718},{"disabled":3411,"type":3412},[],{"type":50,"value":3720}," No underscores",{"type":44,"tag":79,"props":3722,"children":3724},{"className":3723},[3406],[3725,3728],{"type":44,"tag":3409,"props":3726,"children":3727},{"disabled":3411,"type":3412},[],{"type":50,"value":3729}," All have proper prefixes",{"type":44,"tag":53,"props":3731,"children":3732},{},[3733],{"type":44,"tag":69,"props":3734,"children":3735},{},[3736],{"type":50,"value":3737},"Performance:",{"type":44,"tag":75,"props":3739,"children":3741},{"className":3740},[3401],[3742,3751,3760],{"type":44,"tag":79,"props":3743,"children":3745},{"className":3744},[3406],[3746,3749],{"type":44,"tag":3409,"props":3747,"children":3748},{"disabled":3411,"type":3412},[],{"type":50,"value":3750}," Classes created in batches",{"type":44,"tag":79,"props":3752,"children":3754},{"className":3753},[3406],[3755,3758],{"type":44,"tag":3409,"props":3756,"children":3757},{"disabled":3411,"type":3412},[],{"type":50,"value":3759}," Progress shown for large operations",{"type":44,"tag":79,"props":3761,"children":3763},{"className":3762},[3406],[3764,3767],{"type":44,"tag":3409,"props":3765,"children":3766},{"disabled":3411,"type":3412},[],{"type":50,"value":3768}," No duplicate classes created",{"type":44,"tag":53,"props":3770,"children":3771},{},[3772],{"type":44,"tag":69,"props":3773,"children":3774},{},[3775],{"type":50,"value":3776},"User Experience:",{"type":44,"tag":75,"props":3778,"children":3780},{"className":3779},[3401],[3781,3790,3799,3808],{"type":44,"tag":79,"props":3782,"children":3784},{"className":3783},[3406],[3785,3788],{"type":44,"tag":3409,"props":3786,"children":3787},{"disabled":3411,"type":3412},[],{"type":50,"value":3789}," Clear feedback provided",{"type":44,"tag":79,"props":3791,"children":3793},{"className":3792},[3406],[3794,3797],{"type":44,"tag":3409,"props":3795,"children":3796},{"disabled":3411,"type":3412},[],{"type":50,"value":3798}," Progress indicators shown",{"type":44,"tag":79,"props":3800,"children":3802},{"className":3801},[3406],[3803,3806],{"type":44,"tag":3409,"props":3804,"children":3805},{"disabled":3411,"type":3412},[],{"type":50,"value":3807}," Success confirmation given",{"type":44,"tag":79,"props":3809,"children":3811},{"className":3810},[3406],[3812,3815],{"type":44,"tag":3409,"props":3813,"children":3814},{"disabled":3411,"type":3412},[],{"type":50,"value":3816}," Next steps recommended",{"type":44,"tag":3818,"props":3819,"children":3820},"style",{},[3821],{"type":50,"value":3822},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3824,"total":4011},[3825,3846,3863,3880,3895,3911,3927,3941,3955,3967,3981,3997],{"slug":3826,"name":3827,"fn":3828,"description":3829,"org":3830,"tags":3831,"stars":24,"repoUrl":25,"updatedAt":3845},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3832,3835,3838,3841,3844],{"name":3833,"slug":3834,"type":16},"CLI","cli",{"name":3836,"slug":3837,"type":16},"Cloud","cloud",{"name":3839,"slug":3840,"type":16},"Deployment","deployment",{"name":3842,"slug":3843,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":3847,"name":3848,"fn":3849,"description":3850,"org":3851,"tags":3852,"stars":24,"repoUrl":25,"updatedAt":3862},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3853,3854,3855,3858,3861],{"name":3833,"slug":3834,"type":16},{"name":3839,"slug":3840,"type":16},{"name":3856,"slug":3857,"type":16},"React","react",{"name":3859,"slug":3860,"type":16},"UI Components","ui-components",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:41.421071",{"slug":3864,"name":3865,"fn":3866,"description":3867,"org":3868,"tags":3869,"stars":24,"repoUrl":25,"updatedAt":3879},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3870,3871,3874,3875,3878],{"name":3833,"slug":3834,"type":16},{"name":3872,"slug":3873,"type":16},"Plugin Development","plugin-development",{"name":3856,"slug":3857,"type":16},{"name":3876,"slug":3877,"type":16},"TypeScript","typescript",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:43.853573",{"slug":3881,"name":3882,"fn":3883,"description":3884,"org":3885,"tags":3886,"stars":24,"repoUrl":25,"updatedAt":3894},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3887,3888,3889,3892,3893],{"name":3833,"slug":3834,"type":16},{"name":22,"slug":23,"type":16},{"name":3890,"slug":3891,"type":16},"Next.js","next-js",{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":3896,"name":3897,"fn":3898,"description":3899,"org":3900,"tags":3901,"stars":24,"repoUrl":25,"updatedAt":3910},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3902,3903,3906,3909],{"name":3833,"slug":3834,"type":16},{"name":3904,"slug":3905,"type":16},"Configuration","configuration",{"name":3907,"slug":3908,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":3912,"name":3913,"fn":3914,"description":3915,"org":3916,"tags":3917,"stars":24,"repoUrl":25,"updatedAt":3926},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3918,3921,3924,3925],{"name":3919,"slug":3920,"type":16},"Architecture","architecture",{"name":3922,"slug":3923,"type":16},"Code Analysis","code-analysis",{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":3928,"name":3929,"fn":3930,"description":3931,"org":3932,"tags":3933,"stars":24,"repoUrl":25,"updatedAt":3940},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3934,3935,3936,3939],{"name":22,"slug":23,"type":16},{"name":3856,"slug":3857,"type":16},{"name":3937,"slug":3938,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",{"slug":3942,"name":3943,"fn":3944,"description":3945,"org":3946,"tags":3947,"stars":24,"repoUrl":25,"updatedAt":3954},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3948,3951,3952,3953],{"name":3949,"slug":3950,"type":16},"Migration","migration",{"name":3856,"slug":3857,"type":16},{"name":3876,"slug":3877,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:52.523608",{"slug":3956,"name":3957,"fn":3958,"description":3959,"org":3960,"tags":3961,"stars":24,"repoUrl":25,"updatedAt":3966},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3962,3963,3964,3965],{"name":3839,"slug":3840,"type":16},{"name":22,"slug":23,"type":16},{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":3968,"name":3969,"fn":3970,"description":3971,"org":3972,"tags":3973,"stars":24,"repoUrl":25,"updatedAt":3980},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3974,3975,3978,3979],{"name":3904,"slug":3905,"type":16},{"name":3976,"slug":3977,"type":16},"Local Development","local-development",{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":3982,"name":3983,"fn":3984,"description":3985,"org":3986,"tags":3987,"stars":24,"repoUrl":25,"updatedAt":3996},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[3988,3989,3992,3995],{"name":3839,"slug":3840,"type":16},{"name":3990,"slug":3991,"type":16},"QA","qa",{"name":3993,"slug":3994,"type":16},"Validation","validation",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:51.300653",{"slug":3998,"name":3999,"fn":4000,"description":4001,"org":4002,"tags":4003,"stars":24,"repoUrl":25,"updatedAt":4010},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4004,4005,4006,4009],{"name":3907,"slug":3908,"type":16},{"name":3839,"slug":3840,"type":16},{"name":4007,"slug":4008,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571",28,{"items":4013,"total":4011},[4014,4022,4030,4038,4046,4053,4060],{"slug":3826,"name":3827,"fn":3828,"description":3829,"org":4015,"tags":4016,"stars":24,"repoUrl":25,"updatedAt":3845},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4017,4018,4019,4020,4021],{"name":3833,"slug":3834,"type":16},{"name":3836,"slug":3837,"type":16},{"name":3839,"slug":3840,"type":16},{"name":3842,"slug":3843,"type":16},{"name":10,"slug":9,"type":16},{"slug":3847,"name":3848,"fn":3849,"description":3850,"org":4023,"tags":4024,"stars":24,"repoUrl":25,"updatedAt":3862},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4025,4026,4027,4028,4029],{"name":3833,"slug":3834,"type":16},{"name":3839,"slug":3840,"type":16},{"name":3856,"slug":3857,"type":16},{"name":3859,"slug":3860,"type":16},{"name":10,"slug":9,"type":16},{"slug":3864,"name":3865,"fn":3866,"description":3867,"org":4031,"tags":4032,"stars":24,"repoUrl":25,"updatedAt":3879},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4033,4034,4035,4036,4037],{"name":3833,"slug":3834,"type":16},{"name":3872,"slug":3873,"type":16},{"name":3856,"slug":3857,"type":16},{"name":3876,"slug":3877,"type":16},{"name":10,"slug":9,"type":16},{"slug":3881,"name":3882,"fn":3883,"description":3884,"org":4039,"tags":4040,"stars":24,"repoUrl":25,"updatedAt":3894},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4041,4042,4043,4044,4045],{"name":3833,"slug":3834,"type":16},{"name":22,"slug":23,"type":16},{"name":3890,"slug":3891,"type":16},{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},{"slug":3896,"name":3897,"fn":3898,"description":3899,"org":4047,"tags":4048,"stars":24,"repoUrl":25,"updatedAt":3910},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4049,4050,4051,4052],{"name":3833,"slug":3834,"type":16},{"name":3904,"slug":3905,"type":16},{"name":3907,"slug":3908,"type":16},{"name":10,"slug":9,"type":16},{"slug":3912,"name":3913,"fn":3914,"description":3915,"org":4054,"tags":4055,"stars":24,"repoUrl":25,"updatedAt":3926},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4056,4057,4058,4059],{"name":3919,"slug":3920,"type":16},{"name":3922,"slug":3923,"type":16},{"name":3856,"slug":3857,"type":16},{"name":10,"slug":9,"type":16},{"slug":3928,"name":3929,"fn":3930,"description":3931,"org":4061,"tags":4062,"stars":24,"repoUrl":25,"updatedAt":3940},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[4063,4064,4065,4066],{"name":22,"slug":23,"type":16},{"name":3856,"slug":3857,"type":16},{"name":3937,"slug":3938,"type":16},{"name":10,"slug":9,"type":16}]