@convertex/skill 1.0.0

package/skills/convertex/client-first/structure/page-skeleton.md

@@ -0,0 +1,154 @@
+# Page Skeleton — Mandatory Structure
+
+## The 5 Layers
+
+```html
+<div class="page-wrapper">
+  <header class="nav_component">...</header>         <!-- Outside main-wrapper -->
+  <main class="main-wrapper">
+    <section class="section_hero">
+      <div class="padding-global padding-section-large">
+        <div class="container-large">
+          <!-- section content goes here -->
+        </div>
+      </div>
+    </section>
+    <section class="section_features">
+      <div class="padding-global padding-section-medium">
+        <div class="container-large">
+          <!-- section content goes here -->
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="footer_component">...</footer>      <!-- Outside main-wrapper -->
+</div>
+```
+
+## Layer Rules
+
+| Layer | Class | Tag | Purpose |
+|---|---|---|---|
+| 1 | `page-wrapper` | `<div>` | Outermost page wrapper |
+| 2 | `main-wrapper` | `<main>` | Wraps all sections (excludes nav/footer) |
+| 3 | `section_[id]` | `<section>` | Named section |
+| 4 | `padding-global padding-section-[size]` | `<div>` | Horizontal + vertical spacing |
+| 5 | `container-[size]` | `<div>` | Centered max-width content area |
+
+**CRITICAL:** `padding-global` and `padding-section-[size]` go on the **SAME div**. Never separate them into two nested divs.
+
+Nav and footer sit **OUTSIDE** `main-wrapper`, **INSIDE** `page-wrapper`.
+
+## Container Sizes
+
+| Class | Max-width | Typical use |
+|---|---|---|
+| `container-large` | `80rem` (1280px) | Standard page content |
+| `container-medium` | `64rem` (1024px) | Blog posts, focused content |
+| `container-small` | `48rem` (768px) | Forms, narrow content |
+
+## Padding Section Sizes
+
+| Class | Desktop | Tablet (991px) | Mobile (479px) |
+|---|---|---|---|
+| `padding-section-large` | `8rem` | `6rem` | `4rem` |
+| `padding-section-medium` | `5rem` | `4rem` | `3rem` |
+| `padding-section-small` | `3rem` | `2rem` | `1.5rem` |
+
+## padding-global Values
+
+| Breakpoint | Value |
+|---|---|
+| Desktop | `2.5rem` (40px) |
+| Tablet (991px) | `1.5rem` (24px) |
+| Mobile (479px) | `1.25rem` (20px) |
+
+## Section Theming
+
+Use combo classes on the `<section>` for visual themes:
+
+```html
+<section class="section_cta section-style-dark">
+  <div class="padding-global padding-section-large">
+    <div class="container-large">
+      <h2 class="cta_heading">Ready to start?</h2>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.section-style-dark { background-color: #0f172a; color: #f8fafc; }
+```
+
+## Complete Page Example
+
+```html
+<div class="page-wrapper">
+  <!-- Nav (outside main-wrapper) -->
+  <div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400">
+    <div class="w-container nav_container">
+      <a href="/" class="w-nav-brand">
+        <img src="logo.svg" alt="Logo" class="nav_logo" />
+      </a>
+      <nav class="w-nav-menu nav_menu">
+        <a href="/features" class="w-nav-link nav_link">Features</a>
+        <a href="/pricing" class="w-nav-link nav_link">Pricing</a>
+        <a href="/contact" class="w-nav-link nav_link">Contact</a>
+      </nav>
+      <div class="w-nav-button nav_menu-button">
+        <div class="w-icon-nav-menu"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Main content -->
+  <main class="main-wrapper">
+    <!-- Hero -->
+    <section class="section_hero">
+      <div class="padding-global padding-section-large">
+        <div class="container-large">
+          <div class="hero_content">
+            <h1 class="hero_heading">Build faster with Webflow</h1>
+            <p class="hero_description text-size-large">The modern way to create websites.</p>
+            <div class="hero_button-wrapper">
+              <a href="/start" class="button">Get started</a>
+              <a href="/demo" class="button is-secondary">Watch demo</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="section_features">
+      <div class="padding-global padding-section-medium">
+        <div class="container-large">
+          <h2 class="features_heading">Why choose us</h2>
+          <div class="features_grid">
+            <div class="feature_card">
+              <h3 class="feature_title">Fast</h3>
+              <p class="feature_description">Lightning-fast performance.</p>
+            </div>
+            <div class="feature_card">
+              <h3 class="feature_title">Reliable</h3>
+              <p class="feature_description">99.9% uptime guarantee.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- Footer (outside main-wrapper) -->
+  <footer class="footer_component">
+    <div class="padding-global padding-section-small">
+      <div class="container-large">
+        <div class="footer_content">
+          <p class="footer_copyright text-size-small">2025 Company. All rights reserved.</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
+```

package/skills/convertex/client-first/utilities/buttons.md

@@ -0,0 +1,170 @@
+# Button Utilities
+
+## Base Button — `button`
+
+Every button uses the `button` base class.
+
+```html
+<a href="/start" class="button">Get started</a>
+```
+
+### Default CSS
+
+```css
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  background-color: #000;
+  color: #fff;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.button:hover {
+  opacity: 0.9;
+}
+```
+
+**Adapt colors, sizes, and border-radius to the project's design system.**
+
+## Variants — Combo Classes
+
+### Secondary — `button is-secondary`
+
+```html
+<a href="/learn" class="button is-secondary">Learn more</a>
+```
+
+```css
+.button.is-secondary {
+  background-color: transparent;
+  color: #000;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #000;
+}
+```
+
+### Text-only — `button is-text`
+
+```html
+<a href="/details" class="button is-text">Read more</a>
+```
+
+```css
+.button.is-text {
+  background-color: transparent;
+  color: #000;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+```
+
+### Small — `button is-small`
+
+```html
+<a href="/tag" class="button is-small">Tag</a>
+```
+
+```css
+.button.is-small {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+}
+```
+
+### Large — `button is-large`
+
+```html
+<a href="/start" class="button is-large">Get started now</a>
+```
+
+```css
+.button.is-large {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+  font-size: 1.125rem;
+}
+```
+
+## Button with Icon
+
+```html
+<a href="/start" class="button">
+  <span class="button_text">Get started</span>
+  <span class="button_icon">→</span>
+</a>
+```
+
+```css
+.button_icon {
+  margin-left: 0.5rem;
+  transition: transform 0.2s ease;
+}
+
+.button:hover .button_icon {
+  /* Note: this hover effect needs a ghost block embed since it's a descendant selector */
+}
+```
+
+**For the hover effect on the icon**, add a ghost block:
+
+```html
+<div class="w-embed">
+  <style>
+    .button:hover .button_icon { transform: translateX(4px); }
+  </style>
+</div>
+```
+
+## Button Group Pattern
+
+Wrap multiple buttons in a custom wrapper:
+
+```html
+<div class="hero_button-wrapper">
+  <a href="/start" class="button">Get started</a>
+  <a href="/learn" class="button is-secondary">Learn more</a>
+</div>
+```
+
+```css
+.hero_button-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+@media (max-width: 479px) {
+  .hero_button-wrapper {
+    flex-direction: column;
+  }
+  .hero_button-wrapper .button {
+    /* Note: needs ghost block embed for descendant selector */
+    width: 100%;
+    text-align: center;
+  }
+}
+```
+
+## Rules
+
+- `button` is a **utility class** (no underscore) — reusable across all sections
+- `is-secondary`, `is-text`, `is-small`, `is-large` are **combo classes** — never used alone
+- CSS uses compound selector: `.button.is-secondary { }` not `.is-secondary { }`
+- Button wrappers are **custom classes**: `hero_button-wrapper`, `cta_button-wrapper`
+- For form submit: use `<input type="submit" class="button">` or `<button type="submit" class="button">`

package/skills/convertex/client-first/utilities/layout.md

@@ -0,0 +1,89 @@
+# Layout Utilities
+
+## Max Width — `max-width-[size]`
+
+| Class | Value | | Class | Value |
+|---|---|---|---|---|
+| `max-width-xxlarge` | 80rem | | `max-width-small` | 20rem |
+| `max-width-xlarge` | 64rem | | `max-width-xsmall` | 16rem |
+| `max-width-large` | 48rem | | `max-width-xxsmall` | 12rem |
+| `max-width-medium` | 32rem | | | |
+
+### Responsive max-width resets
+
+Remove max-width at a specific breakpoint and below:
+
+| Class | Breakpoint | Effect |
+|---|---|---|
+| `max-width-full` | All | `max-width: none` |
+| `max-width-full-tablet` | 991px and below | `max-width: none` |
+| `max-width-full-mobile-landscape` | 767px and below | `max-width: none` |
+| `max-width-full-mobile-portrait` | 479px and below | `max-width: none` |
+
+## Hide — `hide-[breakpoint]`
+
+Hide elements at specific breakpoints:
+
+| Class | Effect |
+|---|---|
+| `hide` | Hidden at all breakpoints (`display: none`) |
+| `hide-tablet` | Hidden at 991px and below |
+| `hide-mobile-landscape` | Hidden at 767px and below |
+| `hide-mobile-portrait` | Hidden at 479px and below |
+
+```html
+<!-- Desktop-only element -->
+<div class="hide-tablet">Only visible on desktop</div>
+
+<!-- Mobile-only element -->
+<div class="hide">
+  <!-- Override with show class at mobile breakpoint via custom CSS -->
+</div>
+```
+
+## Background — `background-color-[name]`
+
+| Class | Typical use |
+|---|---|
+| `background-color-primary` | Main brand background |
+| `background-color-secondary` | Secondary background |
+| `background-color-tertiary` | Subtle background |
+| `background-color-alternate` | Contrast sections |
+
+Adapt color values to the project's design system.
+
+## Icons
+
+| Class | Effect |
+|---|---|
+| `icon-height-small` | Small icon height |
+| `icon-height-medium` | Medium icon height |
+| `icon-height-large` | Large icon height |
+| `icon-1x1-small` | Square icon (small) |
+| `icon-1x1-medium` | Square icon (medium) |
+| `icon-1x1-large` | Square icon (large) |
+
+## Positioning & Effects
+
+| Class | CSS |
+|---|---|
+| `z-index-1` | `z-index: 1; position: relative` |
+| `z-index-2` | `z-index: 2; position: relative` |
+| `overflow-hidden` | `overflow: hidden` |
+| `layer` | `position: absolute; inset: 0` (full-cover overlay) |
+| `align-center` | `margin-left: auto; margin-right: auto` |
+| `pointer-events-none` | `pointer-events: none` |
+
+## Aspect Ratios
+
+| Class | Ratio |
+|---|---|
+| `aspect-ratio-square` | `1 / 1` |
+| `aspect-ratio-landscape` | `3 / 2` |
+| `aspect-ratio-widescreen` | `16 / 9` |
+
+```html
+<div class="hero_image-wrapper aspect-ratio-widescreen overflow-hidden">
+  <img src="hero.jpg" alt="Hero" class="hero_image" />
+</div>
+```

package/skills/convertex/client-first/utilities/spacing.md

@@ -0,0 +1,81 @@
+# Spacing Utilities
+
+## Two-Class System
+
+Direction + size on the **SAME element**:
+
+```html
+<div class="margin-bottom margin-medium">   <!-- margin-bottom: 2rem -->
+<div class="padding-vertical padding-large"> <!-- padding-top + bottom: 3rem -->
+```
+
+## Margin
+
+### Directions
+
+`margin-top`, `margin-bottom`, `margin-left`, `margin-right`, `margin-horizontal`, `margin-vertical`
+
+### Sizes
+
+| Class | Value | | Class | Value |
+|---|---|---|---|---|
+| `margin-0` | 0 | | `margin-large` | 3rem |
+| `margin-tiny` | 0.125rem | | `margin-xlarge` | 4rem |
+| `margin-xxsmall` | 0.25rem | | `margin-xxlarge` | 5rem |
+| `margin-xsmall` | 0.5rem | | `margin-huge` | 6rem |
+| `margin-small` | 1rem | | `margin-xhuge` | 8rem |
+| `margin-medium` | 2rem | | `margin-xxhuge` | 12rem |
+| `margin-custom1` | 1.5rem | | `margin-custom2` | 2.5rem |
+
+### Examples
+
+```html
+<h2 class="margin-bottom margin-small">Section Title</h2>
+<p class="margin-bottom margin-medium">Paragraph with spacing below</p>
+<div class="margin-horizontal margin-large">Horizontal margins</div>
+```
+
+## Padding
+
+### Directions
+
+`padding-top`, `padding-bottom`, `padding-left`, `padding-right`, `padding-horizontal`, `padding-vertical`
+
+### Sizes
+
+Same scale as margin: `padding-0` through `padding-xxhuge`, plus `padding-custom1`, `padding-custom2`, `padding-custom3`.
+
+### Examples
+
+```html
+<div class="padding-vertical padding-large">Vertical padding</div>
+<div class="padding-horizontal padding-medium">Horizontal padding</div>
+```
+
+## Spacer Blocks
+
+Empty divs for vertical spacing between elements:
+
+```html
+<div class="spacer-medium"></div>
+```
+
+| Class | Value |
+|---|---|
+| `spacer-small` | 1rem |
+| `spacer-medium` | 2rem |
+| `spacer-large` | 3rem |
+
+Use spacers when you need spacing between siblings without adding margin to either element.
+
+## Reset
+
+`spacing-clean` — sets all margin and padding to 0. Useful for overriding tag defaults.
+
+```html
+<h3 class="spacing-clean">Heading with no default margins</h3>
+```
+
+## Important
+
+`padding-global` and `padding-section-*` are **structural classes** (part of the page skeleton), NOT spacing utilities. Don't use them for general spacing.

package/skills/convertex/client-first/utilities/typography.md

@@ -0,0 +1,86 @@
+# Typography Utilities
+
+HTML tags define default styles (`<h1>`–`<h6>` styled via tag styles). Use utility classes only to **override** the default.
+
+## Heading Style Switch — `heading-style-h[n]`
+
+Restyle a heading to LOOK like another level while preserving the semantic tag for SEO:
+
+```html
+<h3 class="heading-style-h2">Visually H2, semantically H3</h3>
+<h1 class="heading-style-h4">Small heading, top-level SEO weight</h1>
+```
+
+If the tag matches the desired visual style, use no class: `<h2>Title</h2>`.
+
+## Text Size — `text-size-[size]`
+
+| Class | Value |
+|---|---|
+| `text-size-large` | 1.5rem (24px) |
+| `text-size-medium` | 1.125rem (18px) |
+| `text-size-regular` | 1rem (16px) |
+| `text-size-small` | 0.875rem (14px) |
+| `text-size-tiny` | 0.75rem (12px) |
+
+```html
+<p class="text-size-large">Larger paragraph for introductions</p>
+<p class="text-size-small">Fine print or captions</p>
+```
+
+## Text Weight — `text-weight-[name]`
+
+| Class | Value |
+|---|---|
+| `text-weight-xbold` | 800 |
+| `text-weight-bold` | 700 |
+| `text-weight-semibold` | 600 |
+| `text-weight-normal` | 400 |
+| `text-weight-light` | 300 |
+
+```html
+<p class="text-weight-semibold">Semi-bold text</p>
+```
+
+## Text Color — `text-color-[name]`
+
+| Class | Typical use |
+|---|---|
+| `text-color-primary` | Main text color (dark) |
+| `text-color-secondary` | Muted/secondary text |
+| `text-color-alternate` | Inverted text (for dark backgrounds) |
+
+Adapt actual color values to the project's design system.
+
+```html
+<p class="text-color-secondary">Muted helper text</p>
+```
+
+## Text Alignment — `text-align-[dir]`
+
+`text-align-left`, `text-align-center`, `text-align-right`
+
+```html
+<div class="text-align-center">
+  <h2>Centered heading</h2>
+  <p>Centered paragraph</p>
+</div>
+```
+
+## Text Style — `text-style-[name]`
+
+| Class | CSS | Use |
+|---|---|---|
+| `text-style-allcaps` | `text-transform: uppercase; letter-spacing: 0.05em` | Labels, badges |
+| `text-style-italic` | `font-style: italic` | Emphasis |
+| `text-style-link` | `text-decoration: underline` | Inline links |
+| `text-style-muted` | `opacity: 0.6` | De-emphasized text |
+| `text-style-nowrap` | `white-space: nowrap` | Prevent line breaks |
+| `text-style-strikethrough` | `text-decoration: line-through` | Deleted/old prices |
+| `text-style-2lines` | Line clamp to 2 lines | Card descriptions |
+| `text-style-3lines` | Line clamp to 3 lines | Preview text |
+
+```html
+<span class="text-style-allcaps text-size-small">Featured</span>
+<p class="text-style-2lines">This text will be truncated to 2 lines with an ellipsis if it overflows...</p>
+```