From webflow-skills
Applies Flowkit CSS naming conventions in Webflow Designer for creating classes, auditing existing names, and building utility-first components.
npx claudepluginhub webflow/webflow-skills --plugin webflow-skillsThis skill uses the workspace's default tool permissions.
Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.
ALWAYS use Webflow MCP tools for all operations:
webflow_guide_tool to get best practices before startingdata_sites_tool with action list_sites to identify the target sitede_page_tool to get current page and switch pageselement_tool to select elements and inspect current classesstyle_tool to create and update FlowKit-compliant stylesde_learn_more_about_styles to understand supported style propertiescontext parameter (15-25 words, third-person perspective)de_page_tool to identify current working pageelement_tool to retrieve current page elementsfk- prefixfk-[component]fk-[component]-[element]is-[state]fk-flex, fk-grid, fk-stackfk-space-[size], fk-py-[size], fk-px-[size]fk-text-[style]style_tool to create new FlowKit-compliant class styleselement_tool to apply classes to elements| 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 |
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
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
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
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
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
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
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!
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)
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)
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
FlowKit Prefix Rule:
fk-is- prefix (as combo classes)Case Sensitivity:
Separator Rule:
-) to separate words_)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)
Component Names:
card, nav, hero, footerfk-card over fk-product-feature-cardfk-card.is-featured not fk-card-featuredElement Hierarchy:
fk-cardfk-card-[element] (e.g., fk-card-title)fk-card-content-section-text-wrapperfk-card-content, fk-card-textCommon 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
Utility Naming:
fk-[property]-[value]fk-text-lg, fk-space-md, fk-grid-3Spacing Utilities:
xs, sm, md, lg, xl, 2xl, 3xlpy (vertical), px (horizontal), pt (top), pr (right), pb (bottom), pl (left)my, mx, mt, mr, mb, mlTypography Utilities:
fk-text-[xs|sm|md|lg|xl|2xl|3xl]fk-text-[light|medium|semibold|bold]fk-text-[left|center|right]fk-text-[uppercase|lowercase|capitalize]Layout Utilities:
fk-flex, fk-flex-col, fk-flex-center, fk-flex-betweenfk-grid, fk-grid-2, fk-grid-3, fk-grid-4, fk-grid-6fk-container, fk-sectionState Modifier Rules:
is- prefix<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:
fk-buttonis-primaryfk-button is-primary.fk-button.is-primary { ... }Responsive Modifiers:
.[breakpoint]-[value]fk-grid-4.tablet-2.mobile-1Breakpoints:
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">
Always:
fk- prefix for all components and elementsfk-flex fk-flex-center fk-space-md)Never:
fk- prefix from componentsComponent vs Utility:
Use components when:
fk-card, fk-nav, fk-heroUse utilities when:
fk-text-lg, fk-space-md, fk-flex-centerUtility 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>
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)
FlowKit v2 (Current):
Key v2 Changes:
fk- prefix across all componentsis- prefix for state modifiers (combo classes).tablet-, .mobile-)Migration from v1: If user has v1 FlowKit classes:
fk- prefix where missingis- combo classesClass Creation:
style_tool in batches of 10-15 classesElement Updates:
Designer Connection:
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
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
Case 1: Third-Party Integration Classes If integrating with third-party libraries (e.g., animations, sliders):
<div class="fk-slider"><div class="swiper">...</div></div>Case 2: Legacy Code Migration When migrating large existing site:
Case 3: Custom Naming Requirements If client has existing naming system:
Case 4: Component Library Conflicts If site uses another framework (Bootstrap, Tailwind):
Case 5: Utility Class Explosion If too many utility classes on single element:
fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadowfk-panel with those properties built-inBefore considering FlowKit implementation complete:
Setup:
Component Structure:
fk- prefixis- prefixUtilities:
Responsive:
States:
Documentation:
Validation:
Performance:
User Experience: