| name | webflow-mcp:flowkit-naming |
| description | Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the optional live-canvas conveniences (current page, interactive element selection). |
| mcp-version | 2.0.1 |
Flowkit Naming System
Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.
Important Note
ALWAYS use Webflow MCP tools for all operations:
- Use Webflow MCP's
webflow_guide_tool to get best practices before starting
- Use Webflow MCP's
data_sites_tool with action list_sites to identify the target site
- Use Webflow MCP's
data_pages_tool with action list_pages to find the target page by name or slug — headless, no Designer needed
- Use Webflow MCP's
data_element_tool to inspect current classes and apply new ones — headless, pass the page's ID directly
- Use Webflow MCP's
data_style_tool to create and update FlowKit-compliant styles — headless
- Use Webflow MCP's
webflow_guide_tool to understand supported style properties
- Use Webflow MCP's
designer_tool only if the user wants to work with whatever page is currently open in Designer, or wants to interactively select an element on the canvas
- DO NOT use any other tools or methods for Webflow operations
- All tool calls must include the required
context parameter (15-25 words, third-person perspective)
- No Designer connection is required for the core workflow. Getting the page, inspecting classes, creating styles, and applying classes all run headlessly against an explicit page ID. Designer is only needed for the optional
designer_tool conveniences above.
Instructions
Phase 1: Discovery & Setup
- Identify the task: Determine if user is:
- Creating new component classes
- Auditing existing class names
- Building complete page sections
- Refactoring non-FlowKit classes to FlowKit
- 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.
- Ask for scope: Clarify which elements or sections to work with
Phase 2: Analysis (if auditing existing)
- Get all elements: Use Webflow MCP's
data_element_tool to retrieve elements from the target page
- Extract classes: Identify all class names currently applied
- Categorize issues:
- Missing
fk- prefix
- Incorrect case (uppercase/mixed case)
- Wrong separators (underscores instead of hyphens)
- Non-semantic naming
- Inconsistent component structure
- Generate audit report: Show current vs suggested FlowKit-compliant names
Phase 3: Suggestion Generation
- Apply FlowKit patterns: Generate class names following FlowKit v2 conventions
- Structure by type:
- Component wrappers:
fk-[component]
- Child elements:
fk-[component]-[element]
- State modifiers: combo classes with
is-[state]
- Layout utilities:
fk-flex, fk-grid, fk-stack
- Spacing utilities:
fk-space-[size], fk-py-[size], fk-px-[size]
- Typography utilities:
fk-text-[style]
- Validate suggestions: Ensure all suggestions follow FlowKit conventions
- Show preview: Display hierarchical structure with suggested classes
Phase 4: Application (if user confirms)
- Create styles: Use Webflow MCP's
data_style_tool to create new FlowKit-compliant class styles
- Update elements: Use Webflow MCP's
data_element_tool to apply classes to elements
- Process in batches: If many elements, process in groups of 10-15
- Show progress: Display which elements are being updated
Phase 5: Verification & Reporting
- Verify application: Check that classes were applied correctly
- Generate report: Show what was created/updated
- Provide documentation: Explain the FlowKit structure used
- Suggest next steps: Recommend additional FlowKit patterns to implement
FlowKit Naming Reference
Core Naming Patterns
| Pattern | Purpose | Example |
|---|
fk-[component] | Component wrapper (base class) | fk-card, fk-nav, fk-hero |
fk-[component]-[element] | Child element within component | fk-card-title, fk-nav-link |
fk-[component].[modifier] | Combo class modifier (state/variant) | fk-card.is-featured |
fk-text-[style] | Typography utility | fk-text-xl, fk-text-bold |
fk-flex / fk-grid | Layout utilities | fk-flex-center, fk-grid-3 |
fk-space-[size] | Spacing utilities | fk-space-md, fk-py-lg |
is-[state] | State modifiers (combo) | is-active, is-hidden, is-disabled |
Layout Utilities
fk-section Section wrapper with padding
fk-container Max-width container (centered)
fk-flex Flexbox container
fk-flex-center Centered flex (both axes)
fk-flex-between Space-between flex
fk-flex-around Space-around flex
fk-flex-col Flex column direction
fk-grid Grid container (base)
fk-grid-2 2-column grid
fk-grid-3 3-column grid
fk-grid-4 4-column grid
fk-grid-6 6-column grid
fk-stack Vertical stack (gap between items)
fk-row Horizontal row
fk-wrap Flex wrap enabled
Typography Utilities
fk-text-xs Extra small text (12px)
fk-text-sm Small text (14px)
fk-text-md Medium text (16px - default)
fk-text-lg Large text (18px)
fk-text-xl Extra large text (24px)
fk-text-2xl 2x large text (32px)
fk-text-3xl 3x large text (48px)
fk-text-bold Bold weight (700)
fk-text-semibold Semibold weight (600)
fk-text-medium Medium weight (500)
fk-text-light Light weight (300)
fk-text-center Center aligned
fk-text-left Left aligned
fk-text-right Right aligned
fk-text-uppercase Uppercase transform
fk-text-lowercase Lowercase transform
fk-text-capitalize Capitalize transform
Spacing Utilities
fk-space-xs 4px spacing
fk-space-sm 8px spacing
fk-space-md 16px spacing (default)
fk-space-lg 24px spacing
fk-space-xl 32px spacing
fk-space-2xl 48px spacing
fk-space-3xl 64px spacing
Directional Spacing:
fk-py-[size] Padding vertical (top + bottom)
fk-px-[size] Padding horizontal (left + right)
fk-pt-[size] Padding top
fk-pb-[size] Padding bottom
fk-pl-[size] Padding left
fk-pr-[size] Padding right
fk-my-[size] Margin vertical (top + bottom)
fk-mx-[size] Margin horizontal (left + right)
fk-mt-[size] Margin top
fk-mb-[size] Margin bottom
fk-ml-[size] Margin left
fk-mr-[size] Margin right
Color Utilities
fk-bg-primary Primary background color
fk-bg-secondary Secondary background color
fk-bg-accent Accent background color
fk-bg-light Light background
fk-bg-dark Dark background
fk-text-primary Primary text color
fk-text-secondary Secondary text color
fk-text-muted Muted text color
Border & Visual Utilities
fk-rounded Border radius (default)
fk-rounded-sm Small border radius
fk-rounded-lg Large border radius
fk-rounded-full Fully rounded (pill/circle)
fk-border Border (1px solid)
fk-border-top Border top only
fk-border-bottom Border bottom only
fk-shadow Box shadow (default)
fk-shadow-sm Small shadow
fk-shadow-lg Large shadow
State Modifiers (Combo Classes)
is-active Active state (navigation, tabs)
is-hidden Hidden visibility
is-visible Visible visibility
is-disabled Disabled state
is-loading Loading state
is-error Error state
is-success Success state
is-primary Primary variant
is-secondary Secondary variant
is-featured Featured/highlighted variant
is-horizontal Horizontal layout variant
is-vertical Vertical layout variant
Examples
Example 1: Creating Hero Section
User prompt:
Build a hero section with FlowKit naming
Step 1: Analysis
🎨 FlowKit Hero Section Structure
I'll create a hero section following FlowKit v2 conventions.
Structure:
fk-section (wrapper with padding)
└── fk-container (max-width container)
└── fk-hero (component wrapper)
├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center
│ ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm
│ ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md
│ ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg
│ └── fk-hero-actions + fk-flex + fk-space-md
│ ├── fk-button.is-primary
│ └── fk-button.is-secondary
└── fk-hero-image + fk-rounded-lg
Total classes to create: 12 base classes + 2 combo classes
Ready to create these in Webflow Designer? (yes/no)
Step 2: After user confirms
🔄 Creating FlowKit Hero Classes...
Progress: ████████████████████ 100% (14/14 classes)
✅ Classes Created:
**Layout Classes:**
- ✅ fk-section - Section wrapper with padding
- ✅ fk-container - Max-width container
- ✅ fk-hero - Hero component wrapper
**Element Classes:**
- ✅ fk-hero-content - Hero content container
- ✅ fk-hero-eyebrow - Small label above title
- ✅ fk-hero-title - Main hero heading
- ✅ fk-hero-subtitle - Supporting text
- ✅ fk-hero-actions - Button container
- ✅ fk-hero-image - Hero image wrapper
**Utility Classes:**
- ✅ fk-flex, fk-flex-col, fk-flex-center
- ✅ fk-text-sm, fk-text-lg, fk-text-3xl
- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted
- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg
- ✅ fk-space-md, fk-rounded-lg
**Component Classes:**
- ✅ fk-button (with combo classes: is-primary, is-secondary)
---
📋 Usage Guide:
1. Create a Section element → Apply `fk-section`
2. Add Container inside → Apply `fk-container`
3. Add Div inside → Apply `fk-hero`
4. Build content structure following the hierarchy above
5. Use combo classes for button variants: `fk-button.is-primary`
🎉 Your FlowKit hero section structure is ready!
Example 2: Auditing Existing Classes
User prompt:
Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle
Response:
📋 FlowKit Audit Report
Checking 4 classes against FlowKit v2 conventions...
---
## Issues Found: 4
### 1. `feature-card` ⚠️
**Issue:** Missing FlowKit prefix
**Reason:** All FlowKit classes must start with `fk-`
**Suggested:** `fk-feature-card` or `fk-card.is-feature`
**Fix:** Rename class to include `fk-` prefix
### 2. `FK-Button` ❌
**Issue:** Incorrect case (uppercase)
**Reason:** FlowKit uses lowercase only
**Suggested:** `fk-button`
**Fix:** Convert to lowercase: `fk-button`
### 3. `fk_hero_title` ❌
**Issue:** Wrong separator (underscore)
**Reason:** FlowKit uses hyphens, not underscores
**Suggested:** `fk-hero-title`
**Fix:** Replace underscores with hyphens
### 4. `cardTitle` ❌
**Issue:** Multiple violations
- Missing `fk-` prefix
- CamelCase instead of kebab-case
**Reason:** FlowKit requires `fk-` prefix and hyphen separation
**Suggested:** `fk-card-title`
**Fix:** Add prefix and convert to kebab-case
---
## FlowKit Naming Rules:
✅ **Correct patterns:**
- `fk-card` (component)
- `fk-card-title` (element)
- `fk-button.is-primary` (with modifier)
- `fk-text-xl` (utility)
❌ **Incorrect patterns:**
- `card` (no prefix)
- `FK-Card` (wrong case)
- `fk_card` (wrong separator)
- `cardTitle` (camelCase)
Would you like me to rename these classes in Webflow Designer? (yes/no)
Example 3: Building Card Component
User prompt:
Create a product card component with FlowKit classes
Response:
🎨 FlowKit Product Card Component
Structure:
fk-card (base component)
├── fk-card-image-wrapper
│ └── fk-card-image + fk-rounded-lg
├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent
├── fk-card-content + fk-space-md
│ ├── fk-card-category + fk-text-sm + fk-text-muted
│ ├── fk-card-title + fk-text-lg + fk-text-bold
│ ├── fk-card-description + fk-text-md
│ └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary
└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top
├── fk-card-rating + fk-flex + fk-space-xs
└── fk-button.is-primary + fk-text-sm
---
## Variants (Combo Classes):
### Featured Card
`fk-card.is-featured`
- Highlighted border/shadow
- Accent background
- Use for promoted products
### Horizontal Layout
`fk-card.is-horizontal`
- Side-by-side image/content
- Better for list views
- Image on left, content on right
### Compact Size
`fk-card.is-compact`
- Reduced padding
- Smaller text sizes
- Use in tight layouts
---
## Responsive Modifiers:
Desktop (default):
- `fk-grid-3` (3 cards per row)
Tablet:
- Add combo: `fk-grid-3.tablet-2`
Mobile:
- Add combo: `fk-grid-3.tablet-2.mobile-1`
---
Ready to create these classes? (yes/no)
Example 4: Refactoring to FlowKit
User prompt:
Refactor my navigation to use FlowKit naming
Step 1: Current Analysis
🔍 Analyzing Current Navigation Classes...
Found 8 elements with non-FlowKit classes:
├── navbar → fk-nav
├── navbar-container → fk-nav-container
├── logo-wrapper → fk-nav-logo
├── menu → fk-nav-menu
├── menu-item → fk-nav-link
├── menu-item active → fk-nav-link.is-active
├── button-group → fk-nav-actions
└── btn-primary → fk-button.is-primary
---
## Migration Plan:
**Phase 1: Create FlowKit Classes** (8 classes)
- Create all `fk-nav-*` classes
- Create utility classes: `fk-flex`, `fk-flex-between`, `fk-flex-center`
- Create `fk-button` with `is-primary` modifier
**Phase 2: Update Elements** (8 elements)
- Replace old classes with new FlowKit classes
- Apply combo classes where needed
- Preserve existing styles
**Phase 3: Cleanup** (optional)
- Old classes can be removed after verification
- Keep for now to maintain backwards compatibility
---
Proceed with migration? (yes/no)
Step 2: After Migration
✅ Navigation Refactored to FlowKit
**Classes Created:** 8
**Elements Updated:** 8
**Time elapsed:** ~3 seconds
---
## Updated Structure:
fk-nav
├── fk-nav-container + fk-flex + fk-flex-between
│ ├── fk-nav-logo
│ ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md
│ │ ├── fk-nav-link (x5)
│ │ └── fk-nav-link.is-active (current page)
│ └── fk-nav-actions + fk-flex + fk-space-sm
│ ├── fk-button.is-secondary
│ └── fk-button.is-primary
---
## Before → After:
| Old Class | New FlowKit Class |
|-----------|-------------------|
| navbar | fk-nav ✅ |
| navbar-container | fk-nav-container ✅ |
| logo-wrapper | fk-nav-logo ✅ |
| menu | fk-nav-menu ✅ |
| menu-item | fk-nav-link ✅ |
| menu-item active | fk-nav-link.is-active ✅ |
| button-group | fk-nav-actions ✅ |
| btn-primary | fk-button.is-primary ✅ |
---
🎉 Navigation is now FlowKit compliant!
**Next steps:**
- Test navigation on all breakpoints
- Verify active states work correctly
- Consider adding `fk-nav.is-transparent` for transparent header variant
- Consider adding `fk-nav.is-sticky` for sticky navigation
Guidelines
Phase 1: Critical Requirements
FlowKit Prefix Rule:
- ALL component and element classes MUST start with
fk-
- Exception: State modifiers use
is- prefix (as combo classes)
- Exception: Utility classes for third-party integrations may omit prefix
Case Sensitivity:
- All class names are lowercase only
- No uppercase letters anywhere
- No camelCase or PascalCase
Separator Rule:
- Use hyphens (
-) to separate words
- Never use underscores (
_)
- Never use spaces or special characters
Naming Structure:
Component: fk-[component]
Element: fk-[component]-[element]
Sub-element: fk-[component]-[element]-[detail]
Utility: fk-[property]-[value]
State modifier: is-[state] (combo class only)
Responsive: .[breakpoint]-[value] (combo class)
Phase 2: Component Naming Rules
Component Names:
- Keep concise and semantic
- Use common web component terms:
card, nav, hero, footer
- Avoid overly specific names: prefer
fk-card over fk-product-feature-card
- Use modifiers for variants:
fk-card.is-featured not fk-card-featured
Element Hierarchy:
- Parent component:
fk-card
- Direct children:
fk-card-[element] (e.g., fk-card-title)
- Deep nesting: Avoid more than 3 levels
- Bad:
fk-card-content-section-text-wrapper
- Good:
fk-card-content, fk-card-text
Common Component Patterns:
Cards:
fk-card
├── fk-card-image
├── fk-card-content
│ ├── fk-card-title
│ └── fk-card-text
└── fk-card-footer
Navigation:
fk-nav
├── fk-nav-logo
├── fk-nav-menu
│ └── fk-nav-link
└── fk-nav-actions
Hero:
fk-hero
├── fk-hero-content
│ ├── fk-hero-title
│ ├── fk-hero-subtitle
│ └── fk-hero-actions
└── fk-hero-media
Forms:
fk-form
├── fk-form-group
│ ├── fk-form-label
│ └── fk-form-input
└── fk-form-actions
Phase 3: Utility Classes
Utility Naming:
- Format:
fk-[property]-[value]
- Examples:
fk-text-lg, fk-space-md, fk-grid-3
Spacing Utilities:
- Use t-shirt sizing:
xs, sm, md, lg, xl, 2xl, 3xl
- Directional:
py (vertical), px (horizontal), pt (top), pr (right), pb (bottom), pl (left)
- Same for margins:
my, mx, mt, mr, mb, ml
Typography Utilities:
- Size:
fk-text-[xs|sm|md|lg|xl|2xl|3xl]
- Weight:
fk-text-[light|medium|semibold|bold]
- Alignment:
fk-text-[left|center|right]
- Transform:
fk-text-[uppercase|lowercase|capitalize]
Layout Utilities:
- Flexbox:
fk-flex, fk-flex-col, fk-flex-center, fk-flex-between
- Grid:
fk-grid, fk-grid-2, fk-grid-3, fk-grid-4, fk-grid-6
- Container:
fk-container, fk-section
Phase 4: State Modifiers (Combo Classes)
State Modifier Rules:
- Always use as combo classes with
is- prefix
- Applied in addition to base class
- Example:
<div class="fk-button is-primary">...</div>
Common States:
is-active Currently active/selected
is-disabled Disabled interaction
is-hidden Hidden visibility
is-visible Visible (override hidden)
is-loading Loading state
is-error Error state
is-success Success state
is-primary Primary variant
is-secondary Secondary variant
is-tertiary Tertiary variant
is-featured Featured/highlighted
is-horizontal Horizontal layout
is-vertical Vertical layout
is-expanded Expanded state (accordions, dropdowns)
is-collapsed Collapsed state
Applying Combo Classes in Webflow:
- Select element
- Add base class:
fk-button
- Add combo class:
is-primary
- Element has both classes:
fk-button is-primary
- Style the combo:
.fk-button.is-primary { ... }
Phase 5: Responsive Design
Responsive Modifiers:
- FlowKit uses combo classes for responsive behavior
- Format:
.[breakpoint]-[value]
- Example:
fk-grid-4.tablet-2.mobile-1
Breakpoints:
Desktop (default): No modifier needed
Tablet: .tablet-[value]
Mobile: .mobile-[value]
Responsive Grid Example:
Base: fk-grid-4 (4 columns on desktop)
+ Combo: .tablet-2 (2 columns on tablet)
+ Combo: .mobile-1 (1 column on mobile)
Result: <div class="fk-grid-4 tablet-2 mobile-1">
Responsive Text Example:
Base: fk-text-3xl (48px on desktop)
+ Combo: .tablet-2xl (32px on tablet)
+ Combo: .mobile-xl (24px on mobile)
Result: <div class="fk-text-3xl tablet-2xl mobile-xl">
Phase 6: Best Practices
Always:
- ✅ Use
fk- prefix for all components and elements
- ✅ Use hyphens to separate words
- ✅ Use lowercase only
- ✅ Keep component names semantic and concise
- ✅ Use combo classes for modifiers and states
- ✅ Combine utilities freely (
fk-flex fk-flex-center fk-space-md)
- ✅ Follow component-element hierarchy
- ✅ Use responsive combo classes for breakpoints
Never:
- ❌ Omit
fk- prefix from components
- ❌ Use underscores or spaces
- ❌ Use uppercase or camelCase
- ❌ Create overly specific class names
- ❌ Nest elements more than 3 levels deep
- ❌ Mix FlowKit with other naming systems
- ❌ Create standalone modifier classes (use combo classes)
Component vs Utility:
Use components when:
- Building reusable UI patterns (cards, buttons, navigation)
- Need semantic meaning
- Multiple instances across site
- Example:
fk-card, fk-nav, fk-hero
Use utilities when:
- Applying single-purpose styling (spacing, typography, layout)
- Quick adjustments without new classes
- Consistent spacing/sizing across site
- Example:
fk-text-lg, fk-space-md, fk-flex-center
Utility Stacking:
Utilities can be freely combined:
<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
Content
</div>
Component + Utility Combo:
<div class="fk-card fk-shadow-lg fk-rounded-lg">
<div class="fk-card-content fk-space-lg">
<h3 class="fk-card-title fk-text-xl fk-text-bold">Title</h3>
</div>
</div>
Phase 7: Common Mistakes & Fixes
Mistake 1: Missing Prefix
❌ card, button, nav
✅ fk-card, fk-button, fk-nav
Mistake 2: Wrong Case
❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav
Mistake 3: Wrong Separator
❌ fk_card_title, fk.card.title
✅ fk-card-title
Mistake 4: camelCase/PascalCase
❌ fkCardTitle, FkCardTitle
✅ fk-card-title
Mistake 5: Modifier as Standalone Class
❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">
Mistake 6: Too Much Nesting
❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title
Mistake 7: Overly Specific Names
❌ fk-product-feature-card-with-image-and-price
✅ fk-card (use combo: is-product)
Mistake 8: Wrong Responsive Pattern
❌ fk-grid-3-tablet-2 (single class)
✅ fk-grid-3 tablet-2 (two classes)
Phase 8: FlowKit Version Notes
FlowKit v2 (Current):
- New naming conventions (documented here)
- Enhanced grid system with responsive combos
- Expanded utility collection
- Improved component library
- Better variable system
Key v2 Changes:
- Standardized
fk- prefix across all components
- Introduced
is- prefix for state modifiers (combo classes)
- Added responsive combo classes (
.tablet-, .mobile-)
- Expanded spacing scale (xs to 3xl)
- More semantic utility names
Migration from v1:
If user has v1 FlowKit classes:
- Add
fk- prefix where missing
- Convert modifiers to
is- combo classes
- Update responsive classes to combo format
- Check spacing utilities for new scale
Phase 9: Performance Optimization
Class Creation:
- Create base component classes first
- Then create element classes
- Finally create utility classes
- Use
data_style_tool in batches of 10-15 classes
Element Updates:
- Process elements in groups of 10-15
- Show progress for large batches
- If >50 elements, ask user to confirm batch size
Designer Connection (only if using the optional designer_tool convenience):
- 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
- If connection lost mid-batch, pause and ask user to reconnect before the next
designer_tool action
- Save progress between batches
Phase 10: Error Handling
Common Errors:
1. Designer Not Connected (only relevant when using designer_tool):
❌ Error: Cannot get current page or select elements - Designer not connected
Solution:
1. Open Webflow Designer
2. Open the target site
3. Connect to Designer in Claude Code
4. Retry operation
(Not needed for the default headless workflow — use `data_pages_tool` with `list_pages` instead.)
2. Class Already Exists:
⚠️ Warning: Class 'fk-button' already exists
Options:
1. Skip creation (use existing)
2. Update existing class
3. Create with different name
3. Invalid Class Name:
❌ Error: Class name 'fk-My Button' is invalid
Issues:
- Contains spaces
- Contains uppercase
Suggested: 'fk-my-button'
4. Style Property Not Supported:
⚠️ Warning: Property 'custom-property' not supported
This may be:
- Custom CSS property
- Webflow doesn't support via Designer API
- Typo in property name
Recommendation: Apply manually in Designer
Edge Cases
Case 1: Third-Party Integration Classes
If integrating with third-party libraries (e.g., animations, sliders):
- Keep third-party classes separate
- Add FlowKit wrapper:
<div class="fk-slider"><div class="swiper">...</div></div>
- Don't force FlowKit naming on third-party classes
Case 2: Legacy Code Migration
When migrating large existing site:
- Create FlowKit classes first
- Apply to new sections
- Gradually refactor old sections
- Keep both systems temporarily for backwards compatibility
Case 3: Custom Naming Requirements
If client has existing naming system:
- Discuss FlowKit benefits
- Show side-by-side comparison
- Offer hybrid approach: FlowKit for new components, keep old for existing
- Or fully refactor (more time, better long-term)
Case 4: Component Library Conflicts
If site uses another framework (Bootstrap, Tailwind):
- FlowKit can coexist but not recommended
- Choose one primary system
- Use FlowKit for custom components
- Use other framework for pre-built components
Case 5: Utility Class Explosion
If too many utility classes on single element:
- Consider creating component class instead
- Example: Instead of
fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow
- Create:
fk-panel with those properties built-in
Production Checklist
Before considering FlowKit implementation complete:
Setup:
Component Structure:
Utilities:
Responsive:
States:
Documentation:
Validation:
Performance:
User Experience:
