@convertex/skill 1.0.0

package/skills/convertex/css/best-practices.md

@@ -0,0 +1,190 @@
+# CSS Property Reference for Webflow
+
+Detailed writing guide for CSS properties. For rules and selectors, see [SKILL.md](../SKILL.md).
+
+## Spacing
+
+```css
+/* All forms work */
+padding: 2rem;
+padding: 1rem 2rem;
+padding-top: 1rem;
+margin: 0 auto;
+gap: 1.5rem;
+```
+
+## Borders
+
+```css
+/* Per-side shorthand — preferred */
+border-top: 1px solid #e5e7eb;
+border-bottom: 2px solid #000;
+
+/* All sides — use 3 separate properties */
+border-width: 1px;
+border-style: solid;
+border-color: #e5e7eb;
+
+/* Border radius */
+border-radius: 0.5rem;
+border-top-left-radius: 1rem;
+border-top-right-radius: 1rem;
+```
+
+## Backgrounds & Gradients
+
+```css
+/* Color */
+background-color: #1a1a2e;
+
+/* Linear gradient */
+background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+/* Radial gradient */
+background-image: radial-gradient(circle at center, #667eea 0%, transparent 70%);
+
+/* Image */
+background-image: url('hero-bg.jpg');
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
+
+/* Shorthand */
+background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
+```
+
+## Transitions
+
+```css
+/* Shorthand — preferred */
+transition: color 0.3s ease, transform 0.2s ease-in-out;
+transition: all 0.3s ease;
+
+/* Longhand */
+transition-property: opacity, transform;
+transition-duration: 300ms, 200ms;
+transition-timing-function: ease, ease-in-out;
+```
+
+## Flexbox
+
+```css
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: space-between;
+gap: 1.5rem;
+flex-wrap: wrap;
+```
+
+## Grid
+
+```css
+/* Standard grid */
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+gap: 2rem;
+
+/* Grid placement */
+grid-area: 1 / 1 / 3 / 4;
+grid-column: span 2;
+grid-row: 1 / 3;
+```
+
+## Typography
+
+```css
+font-family: 'Inter', sans-serif;
+font-size: 1rem;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: -0.02em;
+text-transform: uppercase;
+text-decoration: none;
+color: #1a1a2e;
+text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+-webkit-text-stroke-width: 1px;
+-webkit-text-stroke-color: #000;
+```
+
+## Filters & Effects
+
+```css
+opacity: 0.9;
+mix-blend-mode: overlay;
+filter: blur(4px) brightness(0.8);
+backdrop-filter: blur(10px) saturate(1.5);
+transform: translateY(-4px) scale(1.02);
+box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+```
+
+## Sizing & Layout
+
+```css
+/* Dimensions */
+width: 100%;
+max-width: 80rem;
+min-height: 100vh;
+
+/* Object fit — for images and videos */
+object-fit: cover;
+object-fit: contain;
+aspect-ratio: 16 / 9;
+
+/* Positioning */
+position: relative;
+position: absolute;
+position: sticky;
+top: 0;
+z-index: 10;
+inset: 0;
+
+/* Overflow */
+overflow: hidden;
+overflow: auto;
+overflow-x: hidden;
+overflow-y: auto;
+```
+
+## Cursor
+
+```css
+cursor: pointer;
+cursor: default;
+cursor: not-allowed;
+```
+
+## Animations & Keyframes
+
+**Keyframes must go in a ghost block embed, not in the standalone CSS.**
+
+```html
+<div class="w-embed"><style>
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .hero_heading { animation: fadeInUp 0.6s ease forwards; }
+</style></div>
+```
+
+Prefer CSS `transition` over `animation` wherever possible — transitions are natively supported without ghost blocks.
+
+## Responsive Pattern
+
+Desktop-first base styles, override downward. Only include properties that change:
+
+```css
+.hero_heading {
+  font-size: 4rem;
+  line-height: 1.1;
+}
+
+@media (max-width: 991px) {
+  .hero_heading { font-size: 3rem; }
+}
+
+@media (max-width: 479px) {
+  .hero_heading { font-size: 2rem; }
+}
+```

package/skills/convertex/elements/background-video.md

@@ -0,0 +1,62 @@
+# Background Video
+
+## Required Structure
+
+```html
+<div class="w-background-video hero-video"
+  data-autoplay="true"
+  data-loop="true"
+  data-wf-ignore="true"
+  data-video-urls="video.webm,video.mp4"
+  data-poster-url="poster.jpg">
+  <div class="hero-content">
+    <h1>Hero Title</h1>
+    <p>Subtitle text</p>
+  </div>
+</div>
+```
+
+## Data Attributes
+
+| Attribute | Description |
+|---|---|
+| `data-video-urls` | Comma-separated video URLs (`.webm` preferred first) |
+| `data-poster-url` | Fallback poster image URL |
+| `data-autoplay` | `"true"` / `"false"` |
+| `data-loop` | `"true"` / `"false"` |
+| `data-wf-ignore` | `"true"` / `"false"` |
+
+## Children
+
+All non-video children are rendered on top of the video (overlay content, headings, buttons, etc.). `<video>` and `<noscript>` tags inside the wrapper are ignored — only the `data-*` attributes matter.
+
+## Play/Pause Button (Optional)
+
+```html
+<div class="w-backgroundvideo-backgroundvideoplaypausebutton">
+  <img src="pause-icon.svg" alt="Pause video" />
+  <img src="play-icon.svg" alt="Play video" />
+</div>
+```
+
+The button images are identified by their `alt` text: `"Pause video"` and `"Play video"`.
+
+## Full Example with Play/Pause
+
+```html
+<div class="w-background-video hero-video"
+  data-autoplay="true"
+  data-loop="true"
+  data-wf-ignore="true"
+  data-video-urls="hero.webm,hero.mp4"
+  data-poster-url="hero-poster.jpg">
+  <div class="w-backgroundvideo-backgroundvideoplaypausebutton">
+    <img src="pause.svg" alt="Pause video" />
+    <img src="play.svg" alt="Play video" />
+  </div>
+  <div class="hero-overlay">
+    <h1 class="hero_heading">Welcome</h1>
+    <p class="hero_subtitle">Watch the video</p>
+  </div>
+</div>
+```

package/skills/convertex/elements/dropdown.md

@@ -0,0 +1,49 @@
+# Dropdown
+
+## Required Structure
+
+```html
+<div class="w-dropdown" data-hover="true" data-delay="0">
+  <div class="w-dropdown-toggle">
+    <div class="w-icon-dropdown-toggle"></div>
+    <div>Menu</div>
+  </div>
+  <nav class="w-dropdown-list">
+    <a href="/option1" class="w-dropdown-link">Option 1</a>
+    <a href="/option2" class="w-dropdown-link">Option 2</a>
+  </nav>
+</div>
+```
+
+## Data Attributes
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data-hover` | `"false"` | Open on hover (`"true"` = enabled) |
+| `data-delay` | `"0"` | Close delay on hover-out (ms) |
+
+## Required Elements
+
+### Wrapper — `div.w-dropdown`
+Root element for the dropdown.
+
+### Toggle — `div.w-dropdown-toggle`
+The clickable trigger that opens the dropdown. Can contain:
+- **Toggle icon** (`div.w-icon-dropdown-toggle`) — renders a default arrow/chevron
+- Text content or other elements
+
+### List — `nav.w-dropdown-list`
+The dropdown panel that appears when opened.
+
+### Links — `a.w-dropdown-link`
+Links inside the dropdown list.
+
+```html
+<a href="/option" class="w-dropdown-link dropdown-item">Option Label</a>
+```
+
+## Notes
+
+- Non-link children inside the list are also supported (divs, images, etc.)
+- Dropdowns work both standalone and inside navbars (see `elements/navbar.md`)
+- The toggle icon (`w-icon-dropdown-toggle`) renders Webflow's default chevron

package/skills/convertex/elements/forms.md

@@ -0,0 +1,170 @@
+# Forms
+
+## Required Structure
+
+A Webflow form needs a 3-part wrapper: the form wrapper (`div.w-form`), the form itself (`<form>`), and success/error states.
+
+```html
+<div class="w-form">
+  <form name="Contact Form" method="get">
+    <!-- form fields go here -->
+    <input type="submit" value="Send" class="submit-button" />
+  </form>
+  <div class="w-form-done"><div>Thank you!</div></div>
+  <div class="w-form-fail"><div>Oops, something went wrong.</div></div>
+</div>
+```
+
+**Always include the full wrapper** with `w-form-done` and `w-form-fail` for proper success/error states and wrapper styling control.
+
+## Input Types
+
+All text-like inputs use `<input>` with the appropriate `type`:
+
+| HTML `type` | Notes |
+|---|---|
+| `text` (or omitted) | Default text input |
+| `email` | Email validation |
+| `password` | Password field |
+| `tel` | Phone number |
+| `number` | Numeric input |
+| `url` | URL input |
+
+```html
+<input type="email" name="email" placeholder="you@example.com" required class="text-field" />
+```
+
+Key attributes: `name` (required), `placeholder`, `maxlength`, `id`, `required`.
+
+## Checkbox
+
+```html
+<label class="w-checkbox checkbox-field">
+  <input type="checkbox" name="agree" class="w-checkbox-input" />
+  <span class="w-form-label">I agree to the terms</span>
+</label>
+```
+
+## Radio Button
+
+```html
+<label class="w-radio radio-field">
+  <input type="radio" name="choice" value="A" class="w-radio-input" />
+  <span class="w-form-label">Option A</span>
+</label>
+```
+
+### Boolean attributes
+
+`required`, `checked`, `disabled`, `autofocus` are detected by presence, not value. Write `<input required>`, not `required="true"`.
+
+## Select Dropdown
+
+```html
+<select name="country" class="select-field">
+  <option value="">Select one...</option>
+  <option value="fr">France</option>
+  <option value="us">United States</option>
+</select>
+```
+
+## Textarea
+
+```html
+<textarea name="message" placeholder="Your message" class="text-area"></textarea>
+```
+
+## Submit Button
+
+```html
+<input type="submit" value="Send" class="submit-button" />
+```
+
+Or:
+
+```html
+<button type="submit" class="submit-button">Send</button>
+```
+
+**Important:** A `<button>` without `type="submit"` becomes a regular button, NOT a form submit. Only `type="submit"` triggers form submission behavior.
+
+## Complete Example
+
+```html
+<div class="w-form">
+  <form name="Contact" method="get">
+    <label for="name" class="field-label">Name</label>
+    <input type="text" name="name" id="name" placeholder="John Doe" required class="text-field" />
+
+    <label for="email" class="field-label">Email</label>
+    <input type="email" name="email" id="email" placeholder="john@example.com" required class="text-field" />
+
+    <label for="phone" class="field-label">Phone</label>
+    <input type="tel" name="phone" id="phone" placeholder="+33 6..." class="text-field" />
+
+    <label for="subject" class="field-label">Subject</label>
+    <select name="subject" id="subject" class="select-field">
+      <option value="">Choose...</option>
+      <option value="general">General Inquiry</option>
+      <option value="support">Support</option>
+    </select>
+
+    <label for="message" class="field-label">Message</label>
+    <textarea name="message" id="message" placeholder="Your message..." required class="text-area"></textarea>
+
+    <label class="w-checkbox checkbox-field">
+      <input type="checkbox" name="newsletter" class="w-checkbox-input" />
+      <span class="w-form-label">Subscribe to newsletter</span>
+    </label>
+
+    <input type="submit" value="Send Message" class="submit-button" />
+  </form>
+  <div class="w-form-done"><div>Thank you! Your message has been sent.</div></div>
+  <div class="w-form-fail"><div>Oops! Something went wrong.</div></div>
+</div>
+```
+
+## Styling Tips
+
+```css
+.text-field {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  width: 100%;
+}
+
+.text-field:focus {
+  border-color: #2563eb;
+  outline: none;
+}
+
+.field-label {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.submit-button {
+  background-color: #2563eb;
+  color: #fff;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  cursor: pointer;
+  width: 100%;
+}
+
+.submit-button:hover {
+  background-color: #1d4ed8;
+}
+```

package/skills/convertex/elements/images.md

@@ -0,0 +1,90 @@
+# Images
+
+## Standard Image
+
+```html
+<img src="photo.jpg" alt="Description" class="hero-image" loading="lazy" />
+```
+
+## Attributes
+
+| Attribute | Default | Notes |
+|---|---|---|
+| `src` | — | Image source URL (required) |
+| `alt` | `""` | Alt text — required for accessibility |
+| `loading` | `"lazy"` | Use `"eager"` for above-the-fold images |
+| `width` / `height` | `"auto"` | Optional dimensions |
+
+## Responsive Images
+
+```html
+<img
+  src="photo-800.jpg"
+  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
+  sizes="(max-width: 479px) 100vw, (max-width: 767px) 80vw, 50vw"
+  alt="Responsive photo"
+  class="responsive-image"
+/>
+```
+
+Both `srcset` and `sizes` are preserved.
+
+## SVG Handling
+
+### SVG as Image (decorative)
+```html
+<img src="icon.svg" alt="Icon" class="icon" />
+```
+
+### Inline SVG (needs CSS control or animation)
+
+**Must be wrapped in `<div class="w-embed">`:**
+
+```html
+<div class="w-embed">
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2L2 22h20L12 2z" stroke="currentColor" stroke-width="2"/>
+  </svg>
+</div>
+```
+
+A raw `<svg>` without the `w-embed` wrapper will render incorrectly in Webflow.
+
+## Object Fit & Aspect Ratio
+
+For images that must fill a container without distortion:
+
+```css
+.hero_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero_image-wrapper {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+```
+
+`object-fit: cover`, `object-fit: contain`, and `aspect-ratio` are all supported.
+
+## Background Images
+
+Applied via CSS, not HTML attributes:
+
+```css
+.hero-section {
+  background-image: url('hero-bg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+```
+
+## Accessibility
+
+- Every `<img>` must have an `alt` attribute
+- Decorative images: use `alt=""`
+- Informative images: describe the content, not the file (`alt="Team meeting in conference room"`, not `alt="photo.jpg"`)
+- SVG icons without text: add `aria-label` on the parent element

package/skills/convertex/elements/lightbox.md

@@ -0,0 +1,61 @@
+# Lightbox
+
+## Required Structure
+
+```html
+<div class="w-lightbox">
+  <img src="thumbnail.jpg" alt="Image description" class="lightbox-image" />
+  <script type="application/json" class="w-json">{
+    "items": [
+      { "type": "image", "url": "full-size.jpg", "caption": "Image caption" }
+    ],
+    "group": "gallery-1"
+  }</script>
+</div>
+```
+
+## How It Works
+
+The `w-lightbox` class creates a clickable lightbox element. The `<script class="w-json">` block defines the media items and gallery grouping.
+
+### JSON Format
+
+```json
+{
+  "items": [
+    { "type": "image", "url": "full-size.jpg", "caption": "Optional caption" },
+    { "type": "video", "url": "https://youtube.com/...", "caption": "" }
+  ],
+  "group": "gallery-name"
+}
+```
+
+- `items`: Array of media objects. Each has `type` ("image" or "video"), `url`, and optional `caption`.
+- `group`: Use the same group name on multiple lightboxes to enable gallery navigation between them.
+
+### Children
+
+Non-script children (typically an `<img>` for the thumbnail) display as the clickable trigger.
+
+## Gallery Example
+
+Multiple lightboxes with the same `group` form a navigable gallery:
+
+```html
+<div class="gallery-grid">
+  <div class="w-lightbox gallery-item">
+    <img src="thumb-1.jpg" alt="Photo 1" class="gallery-image" />
+    <script type="application/json" class="w-json">{
+      "items": [{ "type": "image", "url": "full-1.jpg", "caption": "Photo 1" }],
+      "group": "portfolio"
+    }</script>
+  </div>
+  <div class="w-lightbox gallery-item">
+    <img src="thumb-2.jpg" alt="Photo 2" class="gallery-image" />
+    <script type="application/json" class="w-json">{
+      "items": [{ "type": "image", "url": "full-2.jpg", "caption": "Photo 2" }],
+      "group": "portfolio"
+    }</script>
+  </div>
+</div>
+```