skills.rest
webflow
webflowOFFICIAL
Explore all skills by this author →
Website𝕏@webflowGitHub

flowkit-naming

Standardize Webflow CSS class names with fk- prefixes and hyphen separators.

111|18|Updated Jan 7, 2026
Search Tags:#refactoring#css#components#auditing#naming#Webflow#FlowKit
One-click install
npx skills add https://github.com/webflow/webflow-skills --skill flowkit-naming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowkit-naming
Source: https://github.com/webflow/webflow-skills/tree/main/plugins/webflow-skills/skills/flowkit-naming
Command: npx skills add https://github.com/webflow/webflow-skills --skill flowkit-naming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

FlowKit naming standardizes Webflow CSS class naming to prevent drift and enable reuse across teams and projects.

Core Features & Use Cases

  • Semantic, consistent naming for components and elements using the fk- prefix.
  • Auditing and refactoring workflows to align existing projects with FlowKit v2 conventions.
  • Support for responsive breakpoints and state modifiers (is- combo classes) to handle design variants.

Quick Start

  • Create a base component with an fk- prefix (e.g., fk-card).
  • Add child elements with standard fk-[component]-[element] naming (e.g., fk-card-title, fk-card-content).
  • Apply utilities (fk-text-xl, fk-space-md) and, when needed, state modifiers like is-primary on buttons.
  • Run a quick audit on an existing page to rename non-conforming classes to fk- prefixed equivalents.

Frequently Asked Questions about flowkit-naming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize Webflow CSS class naming to prevent style drift?▼

Standardize Webflow CSS class naming by applying the FlowKit naming convention, which enforces an fk- prefix for components, hyphen separators, and lowercase only to prevent drift and enable reuse across projects.

What is the best way to audit and refactor existing Webflow CSS classes?▼

Audit and refactor existing Webflow CSS classes by running a FlowKit naming audit to identify non-conforming classes, then renaming them to fk- prefixed equivalents to align projects with FlowKit v2 conventions.

How do I name responsive breakpoints and state modifiers in Webflow CSS?▼

Name responsive breakpoints and state modifiers in Webflow CSS by applying FlowKit naming rules, which use is- state combo classes for design variants and standard combos for responsive breakpoints.

Can I use FlowKit naming conventions for enterprise-scale Webflow projects?▼

Yes, you can use FlowKit naming conventions for enterprise-scale Webflow projects, as the standard is designed to support creating new components and refactoring pages across small to enterprise team environments.

How do I structure child elements when creating new Webflow components?▼

Structure child elements when creating new Webflow components by using the fk-[component]-[element] naming pattern, such as fk-card-title or fk-card-content, alongside fk- utility classes for text and spacing.

Why does my Webflow CSS class naming cause reuse issues across teams?▼

Webflow CSS class naming causes reuse issues across teams when it lacks a standardized prefix and semantic structure, resulting in naming drift that the FlowKit naming standard prevents by enforcing the fk- prefix.

Related Skills

Explore More Design & Creative Skills→
REVREBELREVREBEL

flowkit-naming

Audit, refactor, and generate Flowkit CSS class names in Webflow projects.

Official
Intermediate
vietlinhh02vietlinhh02

Tailwind CSS

Apply utility-first CSS classes for responsive web UI styling.

Community
Basic
createdbysaltcreatedbysalt

flowkit-naming

Audit Webflow class names and generate FlowKit-compliant replacements.

Community
Intermediate
o2b3ko2b3k

tailwindcss-development

Standardize Tailwind CSS utility classes and v4 syntax in HTML components.

Community
Intermediate