@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

package/dist/__w3kits/assets/skills/design-md/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: design-md
+description: |
+  Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.
+triggers:
+  - "design.md"
+  - "design doc"
+  - "design tokens doc"
+  - "visual rules doc"
+od:
+  mode: design-system
+  category: design-systems
+  upstream: "https://github.com/google-labs-code/skills"
+---
+
+# design-md
+
+> Curated from Google Labs (Stitch).
+
+## What it does
+
+Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.
+
+## 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 (`design-md`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/design-review/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: design-review
+description: |
+  Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.
+triggers:
+  - "design review"
+  - "visual audit"
+  - "before after"
+  - "pre launch design check"
+od:
+  mode: design-system
+  category: creative-direction
+  upstream: "https://github.com/garrytan/gstack"
+---
+
+# design-review
+
+> Curated from Garry Tan (gstack).
+
+## What it does
+
+Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.
+
+## Source
+
+- Upstream: https://github.com/garrytan/gstack
+- Category: `creative-direction`
+
+## 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/garrytan/gstack
+```
+
+Then ask the agent to invoke this skill by name (`design-review`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/digits-fintech-swiss-template/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: digits-fintech-swiss-template
+description: |
+  Swiss-grid fintech deck template in black / warm paper / neon-lime contrast.
+  Use when users ask for premium data-story slides with strict modular layout,
+  bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.
+triggers:
+  - "swiss fintech template"
+  - "data-driven finance deck"
+  - "neon lime editorial grid"
+  - "high contrast strategy slides"
+  - "数字金融瑞士风模板"
+od:
+  mode: template
+  surface: video
+  type: hyperframes
+  platform: desktop
+  preview:
+    type: html
+    entry: index.html
+    reload: debounce-100
+  outputs:
+    primary: index.html
+    secondary:
+      - template.html
+      - example.html
+  example_prompt: "Create a Swiss-grid fintech strategy deck with modular data cards, lime accents, and clean keyboard navigation."
+  capabilities_required:
+    - file_write
+---
+
+# Digits Fintech Swiss Template
+
+A premium three-slide live-artifact template for data-storytelling in a Swiss grid language.
+
+## Resource map
+
+```text
+digits-fintech-swiss-template/
+├── SKILL.md
+├── assets/
+│   └── template.html
+├── references/
+│   └── checklist.md
+└── example.html
+```
+
+## Workflow
+
+1. Start from `assets/template.html` and keep the three-slide structure intact.
+2. Replace copy and metric values while preserving card hierarchy and reading order.
+3. Keep interactions:
+   - Prev / Next buttons
+   - keyboard navigation (`ArrowLeft` / `ArrowRight`)
+   - dot navigation
+4. Keep motion subtle (slide fade + tiny hover lift only).
+5. Keep the file self-contained (inline CSS/JS) with no sandbox-hostile APIs.
+
+## Output contract
+
+Emit one concise orientation sentence and then one HTML artifact:
+
+```xml
+<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
+<!doctype html>
+<html>...</html>
+</artifact>
+```

package/dist/__w3kits/assets/skills/digits-fintech-swiss-template/assets/template.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Digits Fintech Swiss Template</title>
+  <style>
+    :root { --paper:#f2f2ed; --ink:#0a0a0a; --lime:#e2ff41; --line:rgba(10,10,10,.12); }
+    * { box-sizing: border-box; }
+    body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; min-height:100vh; }
+    .deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
+    .toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
+    .btns { display:flex; gap:8px; }
+    button { border:1px solid var(--line); background:transparent; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; }
+    .slides { position:relative; height:760px; }
+    .slide { position:absolute; inset:0; opacity:0; transform:translateX(20px); transition:.35s ease; pointer-events:none; padding:32px; }
+    .slide.active { opacity:1; transform:none; pointer-events:auto; }
+    .s1 { display:grid; grid-template-columns:120px 1fr 320px; grid-template-rows:1fr 180px; gap:14px; }
+    .dark { background:radial-gradient(circle at 50% 38%, #202020 0%, #000 65%); position:relative; }
+    .meta { position:absolute; left:14px; bottom:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); }
+    .lime { background:var(--lime); position:relative; }
+    .headline { display:flex; align-items:center; padding:0 30px; background:var(--lime); font-size:56px; font-weight:900; line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; }
+    .copyright { border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px 20px; font-size:12px; letter-spacing:.06em; }
+    .s2 { display:grid; grid-template-columns:160px 1fr 1fr; gap:0; height:100%; }
+    .rail { background:var(--lime); padding:24px 18px; display:flex; flex-direction:column; justify-content:space-between; }
+    .rail .big { font-size:56px; font-weight:900; letter-spacing:-.04em; }
+    .rail .lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; }
+    .main { border-right:1px solid var(--line); padding:28px 34px; }
+    .kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; }
+    .title { font-size:86px; line-height:.92; letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 18px; }
+    .body { font-size:20px; line-height:1.42; max-width:560px; opacity:.85; }
+    .cards { padding:24px 32px 36px 0; display:flex; flex-direction:column; gap:12px; }
+    .row { display:flex; gap:12px; }
+    .card { flex:1; border:1px solid var(--line); background:#fff; min-height:120px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; }
+    .hero { background:var(--lime); min-height:190px; }
+    .num { font-size:42px; font-weight:900; letter-spacing:-.03em; }
+    .hero .num { font-size:72px; }
+    .tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
+    .s3 { display:grid; grid-template-columns:1fr 320px; grid-template-rows:1fr 1fr; gap:14px; height:100%; }
+    .next { background:var(--lime); padding:30px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
+    .next .sub { font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
+    .next .mega { font-size:122px; line-height:.9; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; }
+    .art { background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:6px; padding:18px; }
+    .art span { background:var(--lime); }
+    .art span.off { background:transparent; }
+    .cols { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
+    .col { border:1px solid var(--line); background:#fafaf7; padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
+    .col.dark { background:var(--ink); color:#fff; border-color:#222; }
+    .col h3 { margin:0; font-size:26px; line-height:1.05; text-transform:uppercase; }
+    .col p { margin:0; font-size:16px; line-height:1.4; opacity:.9; flex:1; }
+    .dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; }
+    .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); background:transparent; }
+    .dot.active { background:var(--ink); transform:scale(1.25); }
+    .slide .hover { transition:transform .2s ease; }
+    .slide .hover:hover { transform:translateY(-2px); }
+  </style>
+</head>
+<body>
+  <main class="deck">
+    <header class="toolbar"><span>Digits / Strategy Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
+    <section class="slides">
+      <article class="slide s1 active" data-slide="0">
+        <div class="dark"><div class="meta">Portrait / B&W</div></div>
+        <div class="lime"></div>
+        <div class="dark"><div class="meta">Portrait / B&W</div></div>
+        <div class="headline">The Future of Data-Driven Finance</div>
+        <div class="copyright">©2026 DIGITS · All rights reserved.</div>
+      </article>
+      <article class="slide s2" data-slide="1">
+        <aside class="rail"><div class="big">+98.7%</div><div class="lbl">Market<br />penetration</div></aside>
+        <section class="main"><div class="kicker">Operating readout</div><div class="title">Digits in Numbers</div><p class="body">Precision finance needs precise interfaces. Pipelines, models, and decisions become one coherent operating layer.</p></section>
+        <section class="cards">
+          <div class="row"><div class="card hover"><div class="num">12.8M</div><div class="tag">Transactions processed</div></div><div class="card hover"><div class="num">41M</div><div class="tag">Total revenue impacted ($)</div></div></div>
+          <div class="row"><div class="card hover"><div class="num">15.4M</div><div class="tag">Users engaged</div></div></div>
+          <div class="row"><div class="card hero hover"><div class="tag">Data points analyzed</div><div class="num">85.6M</div></div></div>
+        </section>
+      </article>
+      <article class="slide s3" data-slide="2">
+        <section class="next"><div class="sub">Take three things away</div><div class="mega">Next Steps</div></section>
+        <section class="art"><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span></section>
+        <section class="cols">
+          <article class="col hover"><div class="tag">01 · Today</div><h3>Pilot one workflow</h3><p>Pick one recurring decision and prove value with measurable output.</p><div class="tag">= 2 weeks</div></article>
+          <article class="col hover"><div class="tag">02 · Next month</div><h3>Scale the wedge</h3><p>Expand coverage to adjacent teams and lock quality thresholds.</p><div class="tag">= 6 weeks</div></article>
+          <article class="col dark hover"><div class="tag">03 · This quarter</div><h3>Make it the default</h3><p>Retire the legacy loop and promote this as the standard operating mode.</p><div class="tag">→</div></article>
+        </section>
+      </article>
+    </section>
+    <nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
+  </main>
+  <script>
+    (function () {
+      const slides = Array.from(document.querySelectorAll(".slide"));
+      const dots = Array.from(document.querySelectorAll(".dot"));
+      let idx = 0;
+      const max = slides.length - 1;
+      function show(next) {
+        idx = Math.max(0, Math.min(max, next));
+        slides.forEach((el, i) => el.classList.toggle("active", i === idx));
+        dots.forEach((el, i) => el.classList.toggle("active", i === idx));
+      }
+      document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
+      document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
+      dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "ArrowLeft") show(idx - 1);
+        if (event.key === "ArrowRight") show(idx + 1);
+      });
+    })();
+  </script>
+</body>
+</html>

package/dist/__w3kits/assets/skills/digits-fintech-swiss-template/example.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Digits Fintech Swiss Example</title>
+  <style>
+    :root { --paper:#f2f2ed; --ink:#0a0a0a; --lime:#e2ff41; --line:rgba(10,10,10,.12); }
+    * { box-sizing: border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; min-height:100vh; }
+    .deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
+    .toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
+    .btns { display:flex; gap:8px; } button { border:1px solid var(--line); background:transparent; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; }
+    .slides { position:relative; height:760px; } .slide { position:absolute; inset:0; opacity:0; transform:translateX(20px); transition:.35s ease; pointer-events:none; padding:32px; } .slide.active { opacity:1; transform:none; pointer-events:auto; }
+    .s1 { display:grid; grid-template-columns:120px 1fr 320px; grid-template-rows:1fr 180px; gap:14px; } .dark { background:radial-gradient(circle at 50% 38%, #202020 0%, #000 65%); position:relative; } .meta { position:absolute; left:14px; bottom:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); } .lime { background:var(--lime); } .headline { display:flex; align-items:center; padding:0 30px; background:var(--lime); font-size:56px; font-weight:900; line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; } .copyright { border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px 20px; font-size:12px; letter-spacing:.06em; }
+    .s2 { display:grid; grid-template-columns:160px 1fr 1fr; gap:0; height:100%; } .rail { background:var(--lime); padding:24px 18px; display:flex; flex-direction:column; justify-content:space-between; } .rail .big { font-size:56px; font-weight:900; letter-spacing:-.04em; } .rail .lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; } .main { border-right:1px solid var(--line); padding:28px 34px; } .kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; } .title { font-size:86px; line-height:.92; letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 18px; } .body { font-size:20px; line-height:1.42; max-width:560px; opacity:.85; } .cards { padding:24px 32px 36px 0; display:flex; flex-direction:column; gap:12px; } .row { display:flex; gap:12px; } .card { flex:1; border:1px solid var(--line); background:#fff; min-height:120px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; } .hero { background:var(--lime); min-height:190px; } .num { font-size:42px; font-weight:900; letter-spacing:-.03em; } .hero .num { font-size:72px; } .tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
+    .s3 { display:grid; grid-template-columns:1fr 320px; grid-template-rows:1fr 1fr; gap:14px; height:100%; } .next { background:var(--lime); padding:30px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; } .next .sub { font-size:12px; letter-spacing:.2em; text-transform:uppercase; } .next .mega { font-size:122px; line-height:.9; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; } .art { background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:6px; padding:18px; } .art span { background:var(--lime); } .art span.off { background:transparent; } .cols { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .col { border:1px solid var(--line); background:#fafaf7; padding:22px 24px; display:flex; flex-direction:column; gap:12px; } .col.dark { background:var(--ink); color:#fff; border-color:#222; } .col h3 { margin:0; font-size:26px; line-height:1.05; text-transform:uppercase; } .col p { margin:0; font-size:16px; line-height:1.4; opacity:.9; flex:1; }
+    .dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; } .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); background:transparent; } .dot.active { background:var(--ink); transform:scale(1.25); } .hover { transition:transform .2s ease; } .hover:hover { transform:translateY(-2px); }
+  </style>
+</head>
+<body>
+  <main class="deck">
+    <header class="toolbar"><span>Digits / Strategy Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
+    <section class="slides">
+      <article class="slide s1 active" data-slide="0"><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="lime"></div><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="headline">The Future of Data-Driven Finance</div><div class="copyright">©2026 DIGITS · All rights reserved.</div></article>
+      <article class="slide s2" data-slide="1"><aside class="rail"><div class="big">+98.7%</div><div class="lbl">Market<br />penetration</div></aside><section class="main"><div class="kicker">Operating readout</div><div class="title">Digits in Numbers</div><p class="body">With 10M+ users and 75M analyzed datapoints, the platform reshapes real-time financial decision loops.</p></section><section class="cards"><div class="row"><div class="card hover"><div class="num">12.8M</div><div class="tag">Transactions processed</div></div><div class="card hover"><div class="num">41M</div><div class="tag">Total revenue impacted ($)</div></div></div><div class="row"><div class="card hover"><div class="num">15.4M</div><div class="tag">Users engaged</div></div></div><div class="row"><div class="card hero hover"><div class="tag">Data points analyzed</div><div class="num">85.6M</div></div></div></section></article>
+      <article class="slide s3" data-slide="2"><section class="next"><div class="sub">Take three things away</div><div class="mega">Next Steps</div></section><section class="art"><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span></section><section class="cols"><article class="col hover"><div class="tag">01 · Today</div><h3>Pilot one workflow</h3><p>Wire a single weekly decision through the platform and benchmark against baseline.</p><div class="tag">= 2 weeks</div></article><article class="col hover"><div class="tag">02 · Next month</div><h3>Scale the wedge</h3><p>Expand into adjacent workflows and package reusable instrumentation patterns.</p><div class="tag">= 6 weeks</div></article><article class="col dark hover"><div class="tag">03 · This quarter</div><h3>Make it the default</h3><p>Move budget from legacy tooling and adopt this stack as the default operating layer.</p><div class="tag">→</div></article></section></article>
+    </section>
+    <nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
+  </main>
+  <script>
+    (function () {
+      const slides = Array.from(document.querySelectorAll(".slide"));
+      const dots = Array.from(document.querySelectorAll(".dot"));
+      let idx = 0;
+      const max = slides.length - 1;
+      function show(next) { idx = Math.max(0, Math.min(max, next)); slides.forEach((el, i) => el.classList.toggle("active", i === idx)); dots.forEach((el, i) => el.classList.toggle("active", i === idx)); }
+      document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
+      document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
+      dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
+      document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") show(idx - 1); if (event.key === "ArrowRight") show(idx + 1); });
+    })();
+  </script>
+</body>
+</html>

package/dist/__w3kits/assets/skills/digits-fintech-swiss-template/references/checklist.md

@@ -0,0 +1,23 @@
+# Checklist
+
+## P0
+
+- `assets/template.html` exists and opens directly from disk.
+- `example.html` exists and contains realistic fintech numbers and labels.
+- Frontmatter uses `od.mode: template` and `od.scenario: live-artifacts`.
+- Exactly three slides are present.
+- Prev/Next buttons, dot navigation, and keyboard arrows all work.
+- No sandbox-hostile APIs are used (`localStorage`, `sessionStorage`, `alert`, `confirm`, `prompt`, `window.open`).
+
+## P1
+
+- Slide 1 follows split-column Swiss composition with high-contrast hero message.
+- Slide 2 presents a left rail + metric cards with internally consistent values.
+- Slide 3 uses a three-column action layout with clear hierarchy.
+- Typography remains clean and legible at laptop widths (>= 1280px).
+
+## P2
+
+- Hover motion remains restrained (no flashy loops).
+- Dot active state is clearly visible on light and dark surfaces.
+- Spacing remains consistent across all three slides.

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

@@ -0,0 +1,42 @@
+---
+name: doc
+description: |
+  Read, create, and edit .docx documents with formatting and layout fidelity via OpenAI's document skill.
+triggers:
+  - "openai doc"
+  - "docx fidelity"
+  - "word doc edit"
+  - "layout doc"
+od:
+  mode: prototype
+  category: documents
+  upstream: "https://github.com/openai/skills"
+---
+
+# doc
+
+> Curated from OpenAI's skills repository.
+
+## What it does
+
+Read, create, and edit .docx documents with formatting and layout fidelity via OpenAI's document skill.
+
+## Source
+
+- Upstream: https://github.com/openai/skills
+- Category: `documents`
+
+## 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 (`doc`) or with
+one of the trigger phrases listed in this skill's frontmatter.

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

@@ -0,0 +1,43 @@
+---
+name: docx
+description: |
+  Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables.
+triggers:
+  - "docx"
+  - "word document"
+  - "tracked changes"
+  - "design brief doc"
+  - "copy doc"
+od:
+  mode: prototype
+  category: documents
+  upstream: "https://github.com/anthropics/skills/tree/main/docx"
+---
+
+# docx
+
+> Curated from Anthropic's official skills repository.
+
+## What it does
+
+Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables.
+
+## Source
+
+- Upstream: https://github.com/anthropics/skills/tree/main/docx
+- Category: `documents`
+
+## 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/docx
+```
+
+Then ask the agent to invoke this skill by name (`docx`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/domain-name-brainstormer/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: domain-name-brainstormer
+description: |
+  Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
+triggers:
+  - "domain name"
+  - "brainstorm domain"
+  - "tld check"
+  - "startup name"
+  - "product name"
+od:
+  mode: design-system
+  category: marketing-creative
+  upstream: "https://github.com/ComposioHQ/awesome-claude-skills/tree/master/domain-name-brainstormer"
+---
+
+# domain-name-brainstormer
+
+> Curated from ComposioHQ awesome-claude-skills.
+
+## What it does
+
+Generate creative domain name ideas and check availability across multiple TLDs including .com, .io, .dev, and .ai.
+
+## Source
+
+- Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/domain-name-brainstormer
+- Category: `marketing-creative`
+
+## 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/ComposioHQ/awesome-claude-skills/tree/master/domain-name-brainstormer
+```
+
+Then ask the agent to invoke this skill by name (`domain-name-brainstormer`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/dist/__w3kits/assets/skills/editorial-burgundy-principles-template/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: editorial-burgundy-principles-template
+description: |
+  Editorial studio deck template in burgundy / blush / muted-gold palette.
+  Use when users ask for premium manifesto or culture slides with pill tags,
+  large typographic statements, principle cards, and guided keyboard/click navigation.
+triggers:
+  - "editorial burgundy template"
+  - "studio salon deck"
+  - "principles manifesto slides"
+  - "pink burgundy premium presentation"
+  - "酒红粉金编辑风模板"
+od:
+  mode: template
+  surface: video
+  type: hyperframes
+  platform: desktop
+  preview:
+    type: html
+    entry: index.html
+    reload: debounce-100
+  outputs:
+    primary: index.html
+    secondary:
+      - template.html
+      - example.html
+  example_prompt: "Create a premium editorial deck in burgundy and blush with a tag cloud slide and an eight-principles card grid."
+  capabilities_required:
+    - file_write
+---
+
+# Editorial Burgundy Principles Template
+
+A three-slide editorial deck for culture narratives, strategy storytelling, and internal manifestos.
+
+## Resource map
+
+```text
+editorial-burgundy-principles-template/
+├── SKILL.md
+├── assets/
+│   └── template.html
+├── references/
+│   └── checklist.md
+└── example.html
+```
+
+## Workflow
+
+1. Start from `assets/template.html`.
+2. Keep the 3-slide sequence:
+   - numeric headline
+   - studio tags + title lockup
+   - eight-principles card grid
+3. Replace copy while preserving card and tag hierarchy.
+4. Keep interactions:
+   - Prev / Next buttons
+   - dot navigation
+   - keyboard navigation (`ArrowLeft` / `ArrowRight`)
+5. Keep HTML self-contained and sandbox-safe.
+
+## Output contract
+
+Emit one concise orientation sentence and one HTML artifact:
+
+```xml
+<artifact identifier="editorial-burgundy-principles" type="text/html" title="Editorial Burgundy Principles Deck">
+<!doctype html>
+<html>...</html>
+</artifact>
+```