skills.rest
REVREBEL
REVREBELOFFICIAL
Explore all skills by this author →
Website𝕏@hello_revrebelGitHub

flowkit-naming

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

Updated Apr 12, 2026
Search Tags:#design system#style guide#webflow#class management#css naming
One-click install
npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill flowkit-naming-revrebel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowkit-naming
Source: https://github.com/REVREBEL/Webflow-Metrics/tree/main/.agents/skills/flowkit-naming
Command: npx skills add https://github.com/REVREBEL/Webflow-Metrics --skill flowkit-naming-revrebel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps Webflow users adopt a consistent, semantic class naming system aligned with Flowkit standards, improving maintainability and collaboration.

Core Features & Use Cases

  • Class Audit and Refactoring: Identify and correct non-standard class names in Webflow projects.
  • Class Generation: Create Flowkit-compliant class names for new components and sections.
  • Design System Consistency: Assist teams in applying a structured naming syntax to ensure clarity, scalability, and uniformity across projects.
  • Use Case: A designer wants to convert existing custom classes into Flowkit naming, ensuring future style management and component reuse.

Quick Start

Connect to Webflow Designer, identify current page, and specify elements or classes for auditing or naming suggestions. Ask the tool to generate ready-to-apply flowkit class names and structures.

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 class names for better design system consistency?▼

You can refactor existing Webflow classes by auditing current elements for non-standard names and converting them to Flowkit-compliant semantic and prefix-based patterns for improved maintainability.

What is the Flowkit naming convention for CSS classes in Webflow?▼

Generate Flowkit-compliant class names by specifying your new components or sections to the tool, which creates ready-to-apply semantic and prefix-based naming structures aligned with the methodology.

How do I audit and refactor non-standard Webflow classes?▼

Generate Flowkit-compliant class names by specifying your new components or sections to the tool, which creates ready-to-apply semantic and prefix-based naming structures aligned with the methodology.

Can I use Flowkit naming conventions for an existing Webflow design system?▼

Yes, you can apply Flowkit naming conventions to existing Webflow design systems by auditing current custom classes and refactoring them into structured, semantic names to ensure future style management and component reuse.

Does Flowkit class naming work with utility-first CSS patterns in Webflow?▼

Flowkit class naming supports utility-first CSS patterns in Webflow by integrating them with semantic and prefix-based structures to create a unified, structured styling language for UI development.

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
AngusatgithubAngusatgithub

token-architecture

Structure design tokens into global, semantic, and component layers for web and mobile theming.

Community
Intermediate
nanorepublicananorepublica
61

Frontend CSS

Enforce frontend CSS coding standards for naming, organization, and responsive design.

Community
Basic