Install Skills

The Convertex skill teaches Claude the Webflow and Client-First rules so it generates compatible code. It installs directly into Claude — independently from the MCP.

The two included skills

Webflow HTML/CSS (webflow-html-css) — the main skill that generates code optimized for Convertex conversion (flat selectors, no CSS variables, combo classes, w- components, etc.).
Client-First (client-first) — an optional skill that applies the Finsweet naming methodology (page skeleton, utility classes, underscore/hyphen conventions).

Install the skills

Install the skill

Run this command at the root of your project:

npx @convertex/skill install

Start coding

Run claude in your terminal. Claude will automatically detect the skill and use it to generate Webflow-compatible code.

Update the skills

Skills evolve over time — new rules, new component patterns, fixes.

To update the skill to the latest version:

npx @convertex/skill update

Unlike the MCP which updates server-side without any action on your part, skills are local files. Remember to update them after each major Convertex release.

How skills work

Unlike the MCP which is used to interact with the Convertex editor (create pages, push code, convert), skills teach Claude how to generate code. When a skill is loaded, Claude knows:

The 10 golden rules of generation (flat selectors, no CSS variables, combo classes, etc.)
The Webflow component patterns (navbar, forms, tabs, slider, dropdown, lightbox, background-video)
The responsive breakpoints for Webflow (desktop-first)
The accessibility rules to follow
The Client-First conventions (if enabled)

Triggering skills correctly

Rule #1: mention "Convertex" in your prompt

Without the word "Convertex", Claude generates generic HTML/CSS without respecting the conversion constraints.

Good:

"With Convertex, generate a hero section with a dark background and two CTA buttons."

Bad:

"Generate a hero section with a dark background and two CTA buttons."

Rule #2: be explicit about what you expect

The more precise your prompt, the better the result. Describe the desired structure, content, and responsive behavior.

Good:

"With Convertex, create a features section with 3 columns side by side on desktop, stacked on mobile. Each column contains an icon, an H3 title, and a paragraph. White background, dark text."

Bad:

"Make me a features section."

Rule #3: specify Client-First if you want it

The Client-First skill only activates if you explicitly request it.

"With Convertex using Client-First, generate a hero section with a container, heading, and two buttons."

Claude's 3 questions

When you make your first generation request, Claude asks you 3 questions:

Client-First or free naming? — Client-First = Finsweet conventions. Free = naming as you wish.
rem or px? — rem: 1rem = 16px. px: pixel values.
Content language? — Adapts placeholder text, ARIA labels, and field names.

If you answer all 3 questions directly in your prompt (e.g., "With Convertex, using Client-First, in rem, content in English..."), Claude won't ask them and will proceed directly to generation.

Rules that Claude follows

When skills are loaded, Claude follows these constraints:

Flat CSS selectors only — .class or .class1.class2 (combo). No descendant selectors (.parent .child).
No unresolved CSS variables — all var(--xxx) values are inlined as concrete values.
First class = base, additional classes = combos — class="button is-primary" -> .button is the base, .button.is-primary is the combo.
Structural tags mapped to Block — <header>, <footer>, <nav>, <main> become Webflow Blocks.
Webflow components with w- structure — navbar, forms, tabs, etc. use the exact patterns expected by Webflow.
CSS transitions rather than JS — for hover animations and state changes.
Hidden states in JS, not CSS — never display: none or opacity: 0 in the CSS.

If Claude doesn't follow the rules

Symptom	Likely cause	Solution
Generic HTML/CSS code without Webflow structure	"Convertex" missing from prompt	Rephrase starting with "With Convertex, ..."
Descendant selectors (`.parent .child`) in the CSS	Skills not loaded	Verify that skills are installed. Start a new conversation.
Unresolved CSS variables `var(--xxx)`	Rule ignored	Specify: "Inline all CSS variables as concrete values"
Inconsistent naming (mix of free/Client-First)	No clear instruction	Specify "using Client-First" or "using free naming" in the prompt

Verify that skills work

Start a new conversation with Claude and ask:

"With Convertex, generate a simple hero section with a title, a paragraph, and a CTA button."

Claude should:

Ask you the 3 questions (Client-First? rem/px? language?).
Generate clean HTML/CSS with flat selectors and concrete values.
If the MCP is connected, push the result to Convertex.

If Claude generates generic code without following the rules, verify that the skills are properly installed.

Next step

Skills are installed. Now connect the MCP so that Claude can push code to the Convertex editor and manage your projects.

On this page