Skills in Detail

Skills are specialized instructions installed directly in Claude Code. They teach Claude the precise HTML/CSS generation rules for Webflow conversion. See Install the Skills for setup instructions.

Webflow HTML/CSS

This is the main skill. It teaches Claude how to generate code that converts perfectly into native Webflow components.

What it handles:

• Semantic HTML structured for Convertex conversion.
• CSS mapped directly to Webflow properties: breakpoints, typography, spacing, colors, layout.
• Webflow components with the correct nested structure (navbar, forms, tabs, etc.).
• Responsive behavior at Webflow breakpoints.
• CSS animations: transitions, transforms, @keyframes -- the skill generates CSS-first animations that are converted directly in Webflow (via CSS embed).
• JS animations: integration of libraries like GSAP, ScrollTrigger, Swiper, AOS -- the skill generates compatible JavaScript code and the corresponding CDN scripts.

Prompt examples:

Full page:

"With Convertex, generate a landing page with a hero containing a title, a subtitle, and two CTA buttons. Below, a features section with 3 columns icon/title/description. Responsive."

Specific component:

"With Convertex, create a Webflow navbar with logo on the left, links in the center, and a CTA button on the right. Support mobile hamburger menu."

Complex layout:

"With Convertex, build a pricing section with 3 cards (Free, Starter, Pro). Each card has a plan name, price, feature list, and CTA button. Highlight the Starter card as recommended."

Form:

"With Convertex, generate a contact form with name, email, message fields, and a submit button. Include success and error states."

Interactive component:

"With Convertex, create a tabs component with 4 tabs. Each tab has a title and a content area with text and image."

---

Client-First

The Client-First skill teaches Claude the Finsweet naming methodology -- the most widely adopted standard in the Webflow community.

What it handles:

• Folder structure: section_, padding-, margin-, text-, is-, etc.
• Utility classes: spacing, text sizes, global modifiers.
• Clear separation between structural and utility classes.

Prompt examples:

Client-First section:

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

Utilities:

"With Convertex, create a features grid in 3 columns with Client-First. Use padding and margin utility classes for spacing."

Full page:

"With Convertex, build a landing page with hero, features, testimonials, and CTA. Client-First naming throughout. Responsive."

When to use it?

Use Client-First if:

• Your Webflow project already follows this methodology.
• You work in a team and want consistent naming.
• You want to follow Webflow community conventions.

If you are not familiar with Client-First or if your project has its own conventions, use free naming.

---

Combining Both Skills

The skills combine naturally:

"With Convertex, generate a pricing section in Client-First."

Claude applies both simultaneously: the code is structured for Webflow conversion AND the classes follow Client-First.