@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

package/dist/__w3kits/assets/skills/release-notes-one-pager/references/layouts.md

@@ -0,0 +1,299 @@
+# Web prototype layouts
+
+**8 paste-ready section skeletons.** Drop into `<main id="content">` of `assets/template.html`. Don't write sections from scratch — pick the closest layout, paste, swap copy.
+
+## Pre-flight (do this once before pasting anything)
+
+1. **Read `assets/template.html`** through the end of the `<style>` block. Every class used below must exist there. If one is missing, add it to `<style>` rather than inlining it on each section.
+2. **Pick a section list before writing copy.** Default rhythms:
+   - **Landing**: 1 hero → 2 features → 3 stat-row OR quote → 4 split → 6 cta-strip → footer
+   - **Marketing / editorial**: 1 hero-center → 7 log-list → 4 split → 6 cta-strip
+   - **Pricing / docs**: 1 hero-center → table-driven → 6 cta-strip
+3. **One accent per screen, used at most twice.** The hero eyebrow and the primary button already use it; budget any third usage carefully.
+
+## Class inventory (must exist in `template.html`)
+
+> `section` `container` `hero` `hero-center` `hero-split` `hero-cta` `eyebrow` `lead` `h1` `h2` `h3` `meta` `num` `btn` `btn-primary` `btn-secondary` `btn-ghost` `btn-arrow` `card` `card-flat` `card-rule` `feature` `feature-mark` `stat` `stat-num` `stat-label` `stat-unit` `quote` `quote-mark` `quote-author` `pill` `tag` `field` `input` `textarea` `ds-table` `num-col` `ph-img` `square` `portrait` `wide` `rule` `rule-strong` `list` `grid-2` `grid-3` `grid-4` `grid-2-1` `grid-1-2` `row` `row-between` `stack` `log-row` `pull` `topnav` `pagefoot`
+
+If you reach for a class not on this list, define it in `<style>` first or use `style="…"` inline. Never invent a global class on a `<section>` that isn't backed by CSS.
+
+---
+
+## Layout 1 — Hero, centered
+
+Use when the page leads with a thesis sentence (most landings, most marketing pages). One eyebrow, one h1 (≤14 words), one lead sentence, two CTAs.
+
+```html
+<section class="section hero" data-od-id="hero">
+  <div class="container hero-center">
+    <p class="eyebrow">EYEBROW · CONTEXT</p>
+    <h1>One sharp sentence about what this is.</h1>
+    <p class="lead">One concrete-value subhead — what changes for the reader.</p>
+    <div class="hero-cta">
+      <a class="btn btn-primary" href="REPLACE_WITH_REAL_URL">Primary action</a>
+      <a class="btn btn-secondary" href="REPLACE_WITH_REAL_URL">Secondary</a>
+    </div>
+  </div>
+</section>
+```
+
+## Layout 2 — Hero, split (text + visual)
+
+Use when there is a real product visual (product UI, screenshot, photograph). Left half copy, right half a `ph-img` placeholder the user replaces.
+
+```html
+<section class="section" data-od-id="hero-split">
+  <div class="container hero-split">
+    <div>
+      <p class="eyebrow">EYEBROW · ROLE</p>
+      <h1>Headline that names the change.</h1>
+      <p class="lead" style="margin-top: 20px;">A short subhead — concrete, not corporate. Two sentences max.</p>
+      <div class="hero-cta" style="margin-top: 28px;">
+        <a class="btn btn-primary" href="REPLACE_WITH_REAL_URL">Primary action</a>
+        <a class="btn btn-ghost btn-arrow" href="REPLACE_WITH_REAL_URL">Read the story</a>
+      </div>
+    </div>
+    <div class="ph-img wide" aria-label="Hero visual placeholder">[ Hero visual · 16:9 ]</div>
+  </div>
+</section>
+```
+
+## Layout 3 — Feature triplet
+
+Three feature cells. Lead with a small `<h2>` framing the row. Don't put an icon on every heading — one tasteful mark per cell, monoline.
+
+```html
+<section class="section" data-od-id="features">
+  <div class="container stack" style="gap: 56px;">
+    <div style="max-width: 36ch;">
+      <p class="eyebrow">WHAT'S DIFFERENT</p>
+      <h2>Three things you'll notice in the first ten minutes.</h2>
+    </div>
+    <div class="grid-3">
+      <div class="feature card-flat">
+        <div class="feature-mark">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v18M3 12h18"/></svg>
+        </div>
+        <h3>Specific feature one</h3>
+        <p>Two-sentence description that names the user value, not the technology.</p>
+      </div>
+      <div class="feature card-flat">
+        <div class="feature-mark">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>
+        </div>
+        <h3>Specific feature two</h3>
+        <p>Two-sentence description that names the user value, not the technology.</p>
+      </div>
+      <div class="feature card-flat">
+        <div class="feature-mark">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 7h16M4 12h10M4 17h16"/></svg>
+        </div>
+        <h3>Specific feature three</h3>
+        <p>Two-sentence description that names the user value, not the technology.</p>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+## Layout 4 — Stat row (data billboard)
+
+Use when there are real numbers. Three stats max — four feels like a brochure. **Don't invent metrics.** If you don't have a number, use a different layout.
+
+```html
+<section class="section" data-od-id="stats">
+  <div class="container">
+    <p class="eyebrow" style="margin-bottom: 40px;">BY THE NUMBERS · 2026</p>
+    <div class="grid-3">
+      <div class="stat">
+        <div class="stat-num num">38<span class="stat-unit">×</span></div>
+        <p class="stat-label">less data moved over the wire vs. naive sync, on real customer workloads.</p>
+      </div>
+      <div class="stat">
+        <div class="stat-num num">3,184</div>
+        <p class="stat-label">paying teams, including 14 of the YC W26 batch.</p>
+      </div>
+      <div class="stat">
+        <div class="stat-num num">$0.04<span class="stat-unit">/GB</span></div>
+        <p class="stat-label">average egress saved — typical $1,800/mo bill drops to $200.</p>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+## Layout 5 — Pull quote (testimonial)
+
+A single decisive quote with attribution. Use sparingly — one per page, never two in a row.
+
+```html
+<section class="section" data-od-id="quote">
+  <div class="container" style="max-width: 800px;">
+    <div class="quote-mark">"</div>
+    <blockquote class="quote">Filebase pays for itself in the first month. We were going to hire a dedicated DevOps person to babysit our sync — instead we just switched.</blockquote>
+    <p class="quote-author">— Mira Hassan, CTO at Northwind Studios</p>
+  </div>
+</section>
+```
+
+## Layout 6 — CTA strip (closing)
+
+End the page on one decisive ask. Centered, generous whitespace, one primary button. No secondary unless the page has zero other buttons.
+
+```html
+<section class="section" data-od-id="cta-strip" style="text-align: center;">
+  <div class="container" style="max-width: 600px;">
+    <h2>Stop measuring meetings. Start measuring focus.</h2>
+    <p class="lead" style="margin: 16px auto 32px;">Free for solo. $4/mo per teammate after that.</p>
+    <a class="btn btn-primary" href="REPLACE_WITH_REAL_URL">Start free</a>
+  </div>
+</section>
+```
+
+## Layout 7 — Log list (changelog / blog index / posts)
+
+Editorial layout for a list of dated entries. Date in mono on the left, title + dek in the middle, optional pull stat on the right. Borders on top, never around — boxes feel like a brochure.
+
+```html
+<section class="section" data-od-id="log">
+  <div class="container">
+    <div class="row-between" style="margin-bottom: 32px;">
+      <h2>Recent changes</h2>
+      <a class="btn btn-ghost btn-arrow" href="REPLACE_WITH_REAL_URL">View all</a>
+    </div>
+    <div>
+      <article class="log-row">
+        <span class="meta">Apr 27, 2026</span>
+        <div>
+          <h3>Sync engine v3 — half the wire bytes</h3>
+          <p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">A new content-defined chunker that produces 38× fewer post-edit changes on Final Cut projects.</p>
+        </div>
+        <span class="pull meta">Engineering</span>
+      </article>
+      <article class="log-row">
+        <span class="meta">Apr 19, 2026</span>
+        <div>
+          <h3>Per-folder bandwidth budgets</h3>
+          <p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">Cap how much a single project can pull each month — useful for archive folders.</p>
+        </div>
+        <span class="pull meta">Product</span>
+      </article>
+      <article class="log-row">
+        <span class="meta">Apr 04, 2026</span>
+        <div>
+          <h3>S3 + R2 dual-region replication</h3>
+          <p style="margin: 4px 0 0; color: var(--muted); font-size: 14px;">Two providers, automatic failover. Enterprise tier only for now.</p>
+        </div>
+        <span class="pull meta">Infra</span>
+      </article>
+    </div>
+  </div>
+</section>
+```
+
+### Layout 7 note — Release-note sections (Added, Fixed, Breaking, Known issues)
+
+When Layout 7 is used for release-note Added/Fixed/Breaking/Known issues sections, **remove the header CTA row** (the `row-between` div with "View all" button). Release-note sections typically have no per-section destination; leaving a placeholder violates SKILL.md Step 2. Replace the entire row:
+
+```html
+<!-- REMOVE THIS from Layout 7 when used in release notes: -->
+<div class="row-between" style="margin-bottom: 32px;">
+  <h2>Recent changes</h2>
+  <a class="btn btn-ghost btn-arrow" href="REPLACE_WITH_REAL_URL">View all</a>
+</div>
+
+<!-- WITH THIS: -->
+<h2 style="margin-bottom: 32px;">Added</h2>
+<!-- or Fixed, Breaking changes, Known issues -->
+```
+
+---
+
+## List block — Known issues / Upgrade note
+
+Use `.list` for itemized issue rows or step-by-step upgrade guidance. Keep the list clear, short, and factual; avoid long prose inside each bullet.
+
+```html
+<section class="section" id="known-issues" data-od-id="known-issues">
+  <div class="container">
+    <div class="row-between" style="margin-bottom: 16px;">
+      <h2>Known issues</h2>
+      <span class="meta">—</span>
+    </div>
+    <ul class="list">
+      <li>Sync may lag by up to 30 seconds after a large file upload.</li>
+      <li>Drag-and-drop is disabled for archived projects in this release.</li>
+      <li>Mobile app notifications may arrive late on iOS 18.</li>
+    </ul>
+  </div>
+</section>
+
+<section class="section" id="upgrade-note" data-od-id="upgrade-note">
+  <div class="container">
+    <div class="row-between" style="margin-bottom: 16px;">
+      <h2>Upgrade note</h2>
+      <span class="meta">—</span>
+    </div>
+    <ol class="list">
+      <li>Update to v2.3.1 using your normal release process.</li>
+      <li>Restart the sync service after deployment.</li>
+      <li>Verify release notes in the internal changelog link.</li>
+    </ol>
+  </div>
+</section>
+```
+
+## Layout 8 — Comparison table (pricing, plan matrix, before/after)
+
+Hairline borders, mono numerics, one column highlighted via an accent border. Don't put the whole row in surface-color — that screams "table".
+
+```html
+<section class="section" data-od-id="pricing">
+  <div class="container">
+    <div style="text-align: center; max-width: 36ch; margin: 0 auto 56px;">
+      <p class="eyebrow">PRICING</p>
+      <h2>One row of features. Three lines of pricing.</h2>
+    </div>
+    <table class="ds-table">
+      <thead>
+        <tr>
+          <th>Feature</th>
+          <th class="num-col">Solo</th>
+          <th class="num-col">Team</th>
+          <th class="num-col">Enterprise</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>Sync engine v3</td><td class="num-col">✓</td><td class="num-col">✓</td><td class="num-col">✓</td></tr>
+        <tr><td>Per-folder budgets</td><td class="num-col">—</td><td class="num-col">✓</td><td class="num-col">✓</td></tr>
+        <tr><td>SAML / SCIM</td><td class="num-col">—</td><td class="num-col">—</td><td class="num-col">✓</td></tr>
+        <tr><td>Dedicated infra</td><td class="num-col">—</td><td class="num-col">—</td><td class="num-col">✓</td></tr>
+        <tr style="border-top: 1px solid var(--fg);">
+          <td><strong>Monthly</strong></td>
+          <td class="num-col"><strong>$0</strong></td>
+          <td class="num-col"><strong>$4 / seat</strong></td>
+          <td class="num-col"><strong>Talk to us</strong></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+```
+
+---
+
+## Section rhythm — when in doubt
+
+For a 5-section landing:
+1. Hero (Layout 1 or 2)
+2. Features (Layout 3)
+3. Stats *or* quote (Layout 4 or 5)
+4. Split detail (custom, using `grid-2-1` / `grid-1-2`)
+5. CTA + footer (Layout 6)
+
+For a 4-section docs/marketing index:
+1. Hero center (Layout 1)
+2. Log list (Layout 7)
+3. CTA + footer (Layout 6)
+
+Two stat rows in a row, two quote blocks in a row, two feature triplets in a row — all visual fatigue. Alternate.

package/dist/__w3kits/assets/skills/remotion/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: remotion
+description: |
+  Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.
+triggers:
+  - "remotion"
+  - "react video"
+  - "programmatic video"
+  - "motion graphics"
+  - "video composition"
+od:
+  mode: video
+  category: video-generation
+  upstream: "https://github.com/remotion-dev/remotion"
+---
+
+# remotion
+
+> Curated from the Remotion team.
+
+## What it does
+
+Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.
+
+## Source
+
+- Upstream: https://github.com/remotion-dev/remotion
+- Category: `video-generation`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/remotion-dev/remotion
+```
+
+Then ask the agent to invoke this skill by name (`remotion`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/replicate/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: replicate
+description: |
+  Discover, compare, and run AI models using Replicate's API. Strong fit for image, audio, and video generation pipelines that swap models frequently.
+triggers:
+  - "replicate"
+  - "run ai model"
+  - "model comparison"
+  - "replicate api"
+od:
+  mode: image
+  category: image-generation
+  upstream: "https://github.com/replicate/skills"
+---
+
+# replicate
+
+> Curated from Replicate.
+
+## What it does
+
+Discover, compare, and run AI models using Replicate's API. Strong fit for image, audio, and video generation pipelines that swap models frequently.
+
+## Source
+
+- Upstream: https://github.com/replicate/skills
+- Category: `image-generation`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/replicate/skills
+```
+
+Then ask the agent to invoke this skill by name (`replicate`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/screenshot/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: screenshot
+description: |
+  Capture desktop, app windows, or pixel regions across OS platforms. Useful for marketing screenshots, design reviews, and bug reports.
+triggers:
+  - "screenshot"
+  - "capture screen"
+  - "window screenshot"
+  - "pixel region capture"
+od:
+  mode: image
+  category: screenshots
+  upstream: "https://github.com/openai/skills"
+---
+
+# screenshot
+
+> Curated from OpenAI's skills repository.
+
+## What it does
+
+Capture desktop, app windows, or pixel regions across OS platforms. Useful for marketing screenshots, design reviews, and bug reports.
+
+## Source
+
+- Upstream: https://github.com/openai/skills
+- Category: `screenshots`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/openai/skills
+```
+
+Then ask the agent to invoke this skill by name (`screenshot`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/screenshots-marketing/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: screenshots-marketing
+description: |
+  Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.
+triggers:
+  - "marketing screenshot"
+  - "playwright screenshot"
+  - "hero shot"
+  - "app store screenshot"
+od:
+  mode: image
+  category: screenshots
+  upstream: "https://github.com/Shpigford/screenshots"
+---
+
+# screenshots-marketing
+
+> Curated from @Shpigford.
+
+## What it does
+
+Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.
+
+## Source
+
+- Upstream: https://github.com/Shpigford/screenshots
+- Category: `screenshots`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/Shpigford/screenshots
+```
+
+Then ask the agent to invoke this skill by name (`screenshots-marketing`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/shadcn-ui/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: shadcn-ui
+description: |
+  Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.
+triggers:
+  - "shadcn"
+  - "shadcn ui"
+  - "shadcn components"
+  - "accessible components"
+od:
+  mode: design-system
+  category: design-systems
+  upstream: "https://github.com/google-labs-code/skills"
+---
+
+# shadcn-ui
+
+> Curated from Google Labs (Stitch).
+
+## What it does
+
+Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.
+
+## Source
+
+- Upstream: https://github.com/google-labs-code/skills
+- Category: `design-systems`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/google-labs-code/skills
+```
+
+Then ask the agent to invoke this skill by name (`shadcn-ui`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/shader-dev/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: shader-dev
+description: |
+  GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.
+triggers:
+  - "shader"
+  - "glsl"
+  - "ray marching"
+  - "fluid simulation"
+  - "procedural generation"
+od:
+  mode: prototype
+  category: 3d-shaders
+  upstream: "https://github.com/MiniMax-AI/skills"
+---
+
+# shader-dev
+
+> Curated from the MiniMax AI team.
+
+## What it does
+
+GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.
+
+## Source
+
+- Upstream: https://github.com/MiniMax-AI/skills
+- Category: `3d-shaders`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/MiniMax-AI/skills
+```
+
+Then ask the agent to invoke this skill by name (`shader-dev`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/slack-gif-creator/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: slack-gif-creator
+description: |
+  Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.
+triggers:
+  - "slack gif"
+  - "animated gif"
+  - "reaction gif"
+  - "tiny gif"
+od:
+  mode: image
+  category: image-generation
+  upstream: "https://github.com/anthropics/skills/tree/main/slack-gif-creator"
+---
+
+# slack-gif-creator
+
+> Curated from Anthropic's official skills repository.
+
+## What it does
+
+Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.
+
+## Source
+
+- Upstream: https://github.com/anthropics/skills/tree/main/slack-gif-creator
+- Category: `image-generation`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/anthropics/skills/tree/main/slack-gif-creator
+```
+
+Then ask the agent to invoke this skill by name (`slack-gif-creator`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/slides/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: slides
+description: |
+  Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.
+triggers:
+  - "slides"
+  - "pptxgenjs"
+  - "sales deck"
+  - "design showcase deck"
+od:
+  mode: deck
+  category: slides
+  upstream: "https://github.com/openai/skills"
+---
+
+# slides
+
+> Curated from OpenAI's skills repository.
+
+## What it does
+
+Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.
+
+## Source
+
+- Upstream: https://github.com/openai/skills
+- Category: `slides`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/openai/skills
+```
+
+Then ask the agent to invoke this skill by name (`slides`) or with
+one of the trigger phrases listed in this skill's frontmatter.