@convertex/skill 1.0.0

package/skills/convertex/elements/links-buttons.md

@@ -0,0 +1,96 @@
+# Links & Buttons
+
+## The 3 Clickable Types in Webflow
+
+| You want | Use this HTML | Result in Webflow |
+|---|---|---|
+| **Button** | `<button class="button">Click me</button>` | Button element (text only, no children) |
+| **Link Block** (link with nested elements) | `<a href="/page" class="card">...<div>...</div>...</a>` | Link Block |
+| **Text Link** (simple text link) | `<a href="/page" class="text-link">Click here</a>` | Text Link |
+
+## How Tags Determine the Type
+
+Detection is **tag-based**:
+
+- `<button>` (without `type="submit"`) → **Button**
+- `<a>` with child elements inside → **Link Block**
+- `<a>` with text only → **Text Link**
+
+**Key rule:** `<a class="button">` produces a **Link**, NOT a Button. To get a Webflow Button, use `<button>`.
+
+## Button Patterns
+
+**CRITICAL: `<button>` in Webflow is an atomic element — it CANNOT have children.** It only contains plain text. If you need a button with an icon or multiple child elements, use `<a>` (Link Block) instead.
+
+### Standard button (text only)
+```html
+<button class="button">Get started</button>
+```
+
+### Button with icon — use `<a>` Link Block
+```html
+<a href="/page" class="button">
+  <div class="button_text">Explore</div>
+  <div class="w-embed">
+    <svg class="button_icon" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path d="M1 5h8M5 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
+</a>
+```
+
+### Form submit (special case)
+```html
+<button type="submit" class="submit-button">Send</button>
+<!-- or -->
+<input type="submit" value="Send" class="submit-button" />
+```
+
+`type="submit"` makes it a Form Button, not a regular Button.
+
+## Link Block Patterns
+
+### Card as link
+```html
+<a href="/project" class="project_card">
+  <img src="thumb.jpg" alt="Project" class="project_image" />
+  <h3 class="project_title">Project Name</h3>
+  <p class="project_desc">Brief description</p>
+</a>
+```
+
+### Link with icon
+```html
+<a href="/page" class="nav_link">
+  <div class="nav_link-text">About</div>
+  <div class="w-embed">
+    <svg class="nav_link-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path d="M1 5h8M5 1l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
+</a>
+```
+
+## Text Link Patterns
+
+```html
+<a href="/terms" class="text-link">Terms of service</a>
+<a href="/privacy" class="footer_link">Privacy policy</a>
+```
+
+## Best Practices
+
+1. **Prefer Link Blocks over text links** when you need styling flexibility — a `<div>` child gives you independent control over text styling, padding, and icon placement.
+
+2. **Always set `href`** on `<a>` elements — even `href="#"` is better than no href.
+
+3. **`<button>` = text only, no children.** If you need an icon or nested elements, use `<a>` (Link Block) instead. `<button>` in Webflow is atomic.
+
+4. **Link with text + icon** — always use `<div>` children, never `<span>`. Text in a `<div>`, icon SVG in a `<div class="w-embed">`:
+   ```html
+   <a href="/page" class="button">
+     <div class="button_text">Download</div>
+     <div class="w-embed"><svg>...</svg></div>
+   </a>
+   ```
+   **NEVER** place text directly inside `<a>` alongside a `w-embed`. **NEVER** use `<span>` inside links — always `<div>`. **NEVER** put children inside `<button>`.

package/skills/convertex/elements/navbar.md

@@ -0,0 +1,100 @@
+# Navbar
+
+## Required Structure
+
+```html
+<div class="w-nav navbar"
+  data-animation="default"
+  data-collapse="medium"
+  data-duration="400"
+  data-easing="ease"
+  data-easing2="ease">
+  <div class="w-container nav-container">
+    <a href="/" class="w-nav-brand"><img src="logo.svg" alt="Logo" /></a>
+    <nav class="w-nav-menu nav-menu">
+      <a href="/about" class="w-nav-link nav-link">About</a>
+      <a href="/contact" class="w-nav-link nav-link">Contact</a>
+    </nav>
+    <div class="w-nav-button menu-button">
+      <div class="w-icon-nav-menu"></div>
+    </div>
+  </div>
+</div>
+```
+
+## Data Attributes
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data-animation` | `"default"` | Menu open/close animation type |
+| `data-collapse` | `"none"` | Breakpoint where menu collapses to burger (`"medium"` = tablet) |
+| `data-duration` | `400` | Animation duration (ms) |
+| `data-easing` | `"ease"` | Open easing |
+| `data-easing2` | `"ease"` | Close easing |
+
+## Required Elements
+
+### Root — `div.w-nav`
+The outermost navbar wrapper. Must have the `w-nav` class.
+
+### Container — `div.w-container`
+Wraps all navbar content. Use `w-container` inside the navbar for proper layout.
+
+### Brand — `a.w-nav-brand`
+Logo/brand link. Typically contains an `<img>` or text.
+
+```html
+<a href="/" class="w-nav-brand">
+  <img src="logo.svg" alt="Company" class="brand-logo" />
+</a>
+```
+
+### Menu — `nav.w-nav-menu`
+Contains all navigation links. Collapses into burger on mobile.
+
+```html
+<nav class="w-nav-menu nav-menu">
+  <a href="/about" class="w-nav-link">About</a>
+  <a href="/services" class="w-nav-link">Services</a>
+</nav>
+```
+
+### Nav Links — `a.w-nav-link`
+Individual navigation links inside the menu. The active link gets the `w--current` class:
+
+```html
+<a href="/about" class="w-nav-link nav-link w--current">About</a>
+```
+
+### Menu Button — `div.w-nav-button`
+The hamburger/burger button for mobile. Contains the menu icon.
+
+```html
+<div class="w-nav-button menu-button">
+  <div class="w-icon-nav-menu"></div>
+</div>
+```
+
+### Menu Icon — `div.w-icon-nav-menu`
+The hamburger icon inside the menu button. Renders Webflow's default burger icon.
+
+## Dropdown Inside Navbar
+
+Dropdowns are fully supported inside the navbar menu. See `elements/dropdown.md` for the structure.
+
+```html
+<nav class="w-nav-menu nav-menu">
+  <a href="/about" class="w-nav-link">About</a>
+  <div class="w-dropdown" data-hover="true" data-delay="0">
+    <div class="w-dropdown-toggle">
+      <div class="w-icon-dropdown-toggle"></div>
+      <div>Services</div>
+    </div>
+    <nav class="w-dropdown-list">
+      <a href="/web" class="w-dropdown-link">Web Design</a>
+      <a href="/app" class="w-dropdown-link">App Dev</a>
+    </nav>
+  </div>
+  <a href="/contact" class="w-nav-link">Contact</a>
+</nav>
+```

package/skills/convertex/elements/slider.md

@@ -0,0 +1,81 @@
+# Slider
+
+## Required Structure
+
+```html
+<div class="w-slider hero-slider"
+  data-animation="slide"
+  data-duration="500"
+  data-infinite="true"
+  data-easing="ease"
+  data-autoplay="false"
+  data-delay="4000"
+  data-hide-arrows="false">
+  <div class="w-slider-mask">
+    <div class="w-slide slide-1">Slide 1 content</div>
+    <div class="w-slide slide-2">Slide 2 content</div>
+  </div>
+  <div class="w-slider-arrow-left"><div class="w-icon-slider-left"></div></div>
+  <div class="w-slider-arrow-right"><div class="w-icon-slider-right"></div></div>
+  <div class="w-slider-nav"></div>
+</div>
+```
+
+## Data Attributes
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data-animation` | `"slide"` | Animation type |
+| `data-duration` | `500` | Transition duration (ms) |
+| `data-infinite` | `"true"` | Loop slides |
+| `data-easing` | `"ease"` | Easing function |
+| `data-disable-swipe` | `"false"` | Disable touch swipe |
+| `data-autoplay` | `"false"` | Auto-advance slides |
+| `data-delay` | `4000` | Autoplay delay (ms) |
+| `data-autoplay-limit` | `0` | Max autoplay cycles (0 = infinite) |
+| `data-hide-arrows` | `"false"` | Hide navigation arrows |
+| `data-nav-spacing` | `3` | Dot nav spacing (px) |
+
+## Required Elements
+
+### Wrapper — `div.w-slider`
+Root element with all data attributes.
+
+### Mask — `div.w-slider-mask`
+Contains all slides. Only children with `w-slide` class are treated as slides.
+
+### Slide — `div.w-slide`
+Individual slides. Put any content inside.
+
+### Arrows — `div.w-slider-arrow-left` / `div.w-slider-arrow-right`
+Navigation arrows. Each contains an icon element:
+
+```html
+<div class="w-slider-arrow-left"><div class="w-icon-slider-left"></div></div>
+<div class="w-slider-arrow-right"><div class="w-icon-slider-right"></div></div>
+```
+
+### Dot Nav — `div.w-slider-nav`
+Dot-style pagination. Empty element — dots are auto-generated.
+
+## Minimal Example
+
+If default data attributes are fine, you can simplify:
+
+```html
+<div class="w-slider hero-slider">
+  <div class="w-slider-mask">
+    <div class="w-slide">
+      <h2>First Slide</h2>
+      <p>Description here</p>
+    </div>
+    <div class="w-slide">
+      <h2>Second Slide</h2>
+      <p>Another slide</p>
+    </div>
+  </div>
+  <div class="w-slider-arrow-left"><div class="w-icon-slider-left"></div></div>
+  <div class="w-slider-arrow-right"><div class="w-icon-slider-right"></div></div>
+  <div class="w-slider-nav"></div>
+</div>
+```

package/skills/convertex/elements/tabs.md

@@ -0,0 +1,63 @@
+# Tabs
+
+## Required Structure
+
+```html
+<div class="w-tabs" data-current="Tab 1" data-duration-in="300" data-duration-out="100" data-easing="">
+  <div class="w-tab-menu">
+    <a class="w-tab-link w--current" data-w-tab="Tab 1">Tab 1</a>
+    <a class="w-tab-link" data-w-tab="Tab 2">Tab 2</a>
+  </div>
+  <div class="w-tab-content">
+    <div class="w-tab-pane w--tab-active" data-w-tab="Tab 1">Content 1</div>
+    <div class="w-tab-pane" data-w-tab="Tab 2">Content 2</div>
+  </div>
+</div>
+```
+
+## Data Attributes
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data-current` | `""` | Name of the active tab (must match a `data-w-tab` value) |
+| `data-easing` | `""` | Easing function (`"ease"`, `"ease-in"`, `"ease-out"`, `"ease-in-out"`) |
+| `data-duration-in` | `300` | Fade-in duration (ms) |
+| `data-duration-out` | `100` | Fade-out duration (ms) |
+
+## Required Elements
+
+### Wrapper — `div.w-tabs`
+Root element with data attributes.
+
+### Menu — `div.w-tab-menu`
+Contains the tab triggers.
+
+### Tab Link — `a.w-tab-link`
+Individual tab trigger. **Must have `data-w-tab` matching its corresponding pane.**
+
+The active tab link gets the `w--current` class.
+
+### Content — `div.w-tab-content`
+Contains all tab panes.
+
+### Tab Pane — `div.w-tab-pane`
+Individual tab content. **Must have `data-w-tab` matching its corresponding link.**
+
+The active pane gets the `w--tab-active` class.
+
+## Critical: Matching Rule
+
+`data-w-tab` on the link **must exactly match** `data-w-tab` on the pane:
+
+```html
+<a class="w-tab-link" data-w-tab="Pricing">Pricing</a>
+<!-- ... -->
+<div class="w-tab-pane" data-w-tab="Pricing">Pricing content here</div>
+```
+
+## Active State Classes
+
+- `w--current` on the active tab link
+- `w--tab-active` on the active tab pane
+
+These are Webflow system classes. Only one tab should be active at a time.

package/skills/convertex/patterns/ghost-blocks.md

@@ -0,0 +1,94 @@
+# Ghost Blocks — Dynamic States & Custom Code
+
+## What Are Ghost Blocks?
+
+Ghost blocks are `<div class="w-embed">` elements containing `<style>` tags for CSS that Webflow doesn't support natively (pseudo-elements, descendant selectors, keyframes). They're also used for raw HTML/SVG embeds.
+
+## Dynamic Combo Classes
+
+Define combo class styles in CSS to control element states. The base class must exist on an element in the HTML:
+
+```css
+/* Base: fully visible (editable in Webflow Designer) */
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+/* Combo: active state (toggled by JS) */
+.modal_overlay.is-active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+```
+
+## CRITICAL: Initial Hidden States in JS, NOT CSS
+
+All elements must be visible by default in Webflow Designer. This is essential for editing.
+
+**NEVER set these in base CSS:**
+- `display: none`
+- `opacity: 0`
+- `visibility: hidden`
+- `height: 0`
+
+**ALWAYS set initial hidden states via JavaScript:**
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('.modal_overlay').forEach(function(el) {
+    el.style.opacity = '0';
+    el.style.visibility = 'hidden';
+    el.style.pointerEvents = 'none';
+  });
+});
+```
+
+## CSS Transitions over JS Animations
+
+Use CSS `transition` on the base class. JavaScript only toggles the class:
+
+```javascript
+trigger.addEventListener('click', function() {
+  menu.classList.toggle('is-open');
+});
+```
+
+Only use JS animation libraries (GSAP) for: staggered animations, scroll-triggered effects, complex timelines, physics-based motion.
+
+## Ghost Block for Unsupported CSS
+
+When you need CSS that Webflow doesn't support natively (nth-child, keyframes), add a ghost block embed in the HTML.
+
+**FORBIDDEN:** `::before` and `::after` are **never allowed**, even in ghost blocks. They are poorly supported by Webflow and not manageable in the Designer. Always use a real HTML element instead (e.g. a `<div>` with a class for decorative elements, underlines, icons, or separators).
+
+```html
+<!-- Ghost block for keyframe animation -->
+<div class="w-embed">
+  <style>
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .status_dot { animation: pulse 2s ease-in-out infinite; }
+  </style>
+</div>
+```
+
+## Common Use Cases
+
+| Pattern | Approach |
+|---|---|
+| Modal / dialog | Base visible, JS hides on load, `.is-open` combo shows |
+| Mobile menu | Same pattern as modal |
+| Dropdown mega menu | `.is-open` combo on the menu panel |
+| Accordion | `.is-open` combo on the content panel |
+| Toast notifications | JS creates and adds `.is-visible` combo |
+| Tab underline animation | CSS transition on position/width with combo class |
+| Hover card effects | `:hover` pseudo (natively supported) + `transition` |