skills.rest
createdbysalt
createdbysaltCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flowkit-naming

Audit Webflow class names and generate FlowKit-compliant replacements.

Updated Jan 22, 2026
Search Tags:#css#audit#refactor#naming#webflow#flowkit
One-click install
npx skills add https://github.com/createdbysalt/nextjs-starter-template --skill flowkit-naming-createdbysalt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowkit-naming
Source: https://github.com/createdbysalt/nextjs-starter-template/tree/main/.claude/skills/flowkit-naming
Command: npx skills add https://github.com/createdbysalt/nextjs-starter-template --skill flowkit-naming-createdbysalt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

FlowKit naming coherence reduces maintenance time and prevents inconsistent class naming across Webflow projects.

Core Features & Use Cases

  • Audit existing class names to identify violations of FlowKit v2 conventions.
  • Generate FlowKit-compliant component/element classes with proper fk- prefixes, hyphen separators, and is- state modifiers.
  • Migrate existing projects with a practical, batched plan for safe refactoring inside Webflow Designer.
  • Enforce responsive naming using breakpoints in combo classes (tablet/mobile variants).

Quick Start

Ask the AI to refactor all non-FlowKit classes to FlowKit-compliant names in the current Webflow project.

Frequently Asked Questions about flowkit-naming

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

FAQPage Schema
How do I audit and standardize class naming conventions in a Webflow project?▼

To audit class naming in Webflow, this skill analyzes existing class names against FlowKit conventions, identifies violations, and generates compliant replacements with proper prefixes, hyphen separators, and state modifiers.

How do I refactor existing Webflow CSS classes to use fk- prefixes and is- state modifiers?▼

Refactoring Webflow CSS classes is handled by applying component and element hierarchy rules to generate FlowKit-compliant names, fixing prefixes, hyphen separators, and is- state modifiers across the project.

Can I batch update non-FlowKit class names in Webflow without breaking existing styles?▼

You can batch update class names safely by generating a migration plan that ensures all new FlowKit-compliant classes exist and map to existing styles before applying updates, accompanied by a progress report.

What is the best way to enforce responsive naming with breakpoint combo classes in Webflow?▼

Enforcing responsive naming in Webflow involves applying breakpoint variants within combo classes for tablet and mobile views, ensuring all class names strictly follow FlowKit v2 conventions.

Does this naming audit tool support multi-phase migration plans for large Webflow projects?▼

The naming audit tool supports multi-phase migration plans by including optional Phase 2-5 steps, allowing you to safely refactor large Webflow projects in practical, manageable batches.

Why are my Webflow component class names inconsistent and how do I fix their hierarchy?▼

Inconsistent Webflow class names are fixed by auditing existing classes for convention violations and regenerating them using strict component and element hierarchy rules to produce FlowKit-compliant replacements.

Related Skills

Explore More Design & Creative Skills→
webflowwebflow
111

flowkit-naming

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

Official
Basic
karenrebecagkarenrebecag

webflow-mcp:flowkit-naming

Automate Flowkit CSS class naming for Webflow components.

Community
Intermediate
REVREBELREVREBEL

flowkit-naming

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

Official
Intermediate
ianyimiianyimi
1

Frontend CSS

Enforce frontend CSS standards and validate syntax during development.

Community
Basic