flowkit-naming
✓Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach.
Installation
SKILL.md
Apply FlowKit CSS naming conventions in Webflow projects using Webflow Designer tools.
| 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 |
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Source: webflow/webflow-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/webflow/webflow-skills --skill flowkit-naming- Source
- webflow/webflow-skills
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-18
- Updated
- 2026-02-18
Quick answers
What is flowkit-naming?
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Source: webflow/webflow-skills.
How do I install flowkit-naming?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/webflow/webflow-skills --skill flowkit-naming Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/webflow/webflow-skills
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-18