Flowkit Naming System

Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.

Important Note

ALWAYS use Webflow MCP tools for all operations:

• Use Webflow MCP's webflow_guide_tool to get best practices before starting

• Use Webflow MCP's data_sites_tool with action list_sites to identify the target site

• Use Webflow MCP's de_page_tool to get current page and switch pages

• Use Webflow MCP's element_tool to select elements and inspect current classes

• Use Webflow MCP's style_tool to create and update FlowKit-compliant styles

• Use Webflow MCP's de_learn_more_about_styles to understand supported style properties

• DO NOT use any other tools or methods for Webflow operations

• All tool calls must include the required context parameter (15-25 words, third-person perspective)

• Designer connection required: User must be connected to Webflow Designer for this skill to work

Instructions

Phase 1: Discovery & Setup

• 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

• Connect to Designer: Confirm user has Webflow Designer open and connected

• Get current page: Use Webflow MCP's de_page_tool to identify current working page

• Ask for scope: Clarify which elements or sections to work with

Phase 2: Analysis (if auditing existing)

• Get all elements: Use Webflow MCP's element_tool to retrieve current page elements

• 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 style_tool to create new FlowKit-compliant class styles

• Update elements: Use Webflow MCP's 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:

🎉 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 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:

• Always verify Designer connection before starting

• If connection lost, pause and ask user to reconnect

• Save progress between batches

Phase 10: Error Handling

Common Errors:

1. Designer Not Connected:

❌ Error: Cannot create classes - Designer not connected

Solution:

1. Open Webflow Designer

2. Open the target site

3. Connect to Designer in Claude Code

4. Retry operation

5. Class Already Exists:

⚠️ Warning: Class 'fk-button' already exists

Options:

1. Skip creation (use existing)

2. Update existing class

3. Create with different name

4. 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:

• Webflow Designer connected

• Target site identified

• Current page confirmed

• Scope defined with user

Component Structure:

• All components use fk- prefix

• Component hierarchy is logical (max 3 levels)

• Element names are semantic

• Modifiers use combo classes with is- prefix

Utilities:

• Spacing utilities use t-shirt sizing (xs-3xl)

• Typography utilities cover all text styles

• Layout utilities handle flex/grid needs

• Color utilities align with brand

Responsive:

• Responsive combo classes defined for key components

• Breakpoint modifiers tested (tablet, mobile)

• Grid systems adapt properly

States:

• State modifiers defined (is-active, is-disabled, etc.)

• Hover/focus states work correctly

• Active states styled properly

Documentation:

• Component structure documented

• Utility classes listed

• Responsive behavior explained

• State modifiers documented

Validation:

• All classes follow naming conventions

• No uppercase letters

• No underscores

• All have proper prefixes

Performance:

• Classes created in batches

• Progress shown for large operations

• No duplicate classes created

User Experience:

• Clear feedback provided

• Progress indicators shown

• Success confirmation given

• Next steps recommended