npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/skills/8-bit-orbit-video-template/assets/template.html ADDED Viewed

@@ -0,0 +1,506 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Press+Start+2P&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --bg-deep: #07133e;
+        --grid-cyan: #4fd2f0;
+        --ink: #0f1f4b;
+        --arcade-yellow: #ffe75c;
+        --arcade-pink: #f4b8d7;
+        --arcade-cyan: #5ad9f8;
+      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #030a24;
+        font-family: "Chakra Petch", sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .scene.live {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .frame {
+        position: absolute;
+        inset: 22px;
+        border: 2px solid #74d7ff20;
+        z-index: 20;
+        pointer-events: none;
+      }
+      .scanlines {
+        position: absolute;
+        inset: 0;
+        background: repeating-linear-gradient(
+          180deg,
+          transparent 0 2px,
+          #ffffff08 2px 4px
+        );
+        mix-blend-mode: soft-light;
+        z-index: 55;
+        pointer-events: none;
+      }
+      .noise {
+        position: absolute;
+        inset: 0;
+        z-index: 56;
+        opacity: 0.15;
+        pointer-events: none;
+        background-image: radial-gradient(#ffffff17 0.6px, transparent 0.6px);
+        background-size: 3px 3px;
+      }
+      .cursor-glow {
+        position: absolute;
+        width: 420px;
+        height: 420px;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle, #5ad9f866 0%, #5ad9f81a 48%, transparent 78%);
+        z-index: 40;
+        pointer-events: none;
+      }
+      .dots {
+        position: absolute;
+        top: 428px;
+        right: 56px;
+        z-index: 70;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .dots i {
+        width: 11px;
+        height: 11px;
+        border: 2px solid #79e0ff;
+        opacity: 0.35;
+      }
+      .dots i.active {
+        background: #79e0ff;
+        opacity: 1;
+      }
+      .pager {
+        position: absolute;
+        left: 50%;
+        bottom: 28px;
+        transform: translateX(-50%);
+        padding: 6px 18px;
+        border: 2px solid #1d3a74;
+        background: #08183fbb;
+        color: #7ee7ff;
+        font-family: "Press Start 2P", monospace;
+        font-size: 14px;
+        letter-spacing: 0.12em;
+        z-index: 70;
+      }
+      .s1 {
+        background: radial-gradient(circle at 50% 32%, #112a73 0%, #07133e 44%, #030a24 100%);
+      }
+      .s1-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#3a86c022 1px, transparent 1px),
+          linear-gradient(90deg, #3a86c022 1px, transparent 1px);
+        background-size: 45px 45px;
+      }
+      .star {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #e8faff;
+        box-shadow: 0 0 10px #9be8ff;
+      }
+      .s1-wrap {
+        position: absolute;
+        inset: 150px 0 0;
+        text-align: center;
+        color: #dff9ff;
+      }
+      .micro {
+        font-family: "Press Start 2P", monospace;
+        font-size: 14px;
+        letter-spacing: 0.25em;
+        color: #c6eeff;
+        opacity: 0.9;
+      }
+      .hero {
+        margin-top: 52px;
+        font-family: "Press Start 2P", monospace;
+        font-size: 108px;
+        line-height: 1.06;
+        color: #5dd8ff;
+        text-shadow: 6px 6px 0 #ffe75c;
+      }
+      .sub {
+        margin: 46px auto 0;
+        max-width: 860px;
+        font-size: 36px;
+        line-height: 1.4;
+        color: #d9ecff;
+        font-weight: 500;
+      }
+      .pill-row {
+        margin-top: 44px;
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+      }
+      .pill {
+        border: 2px solid #ffed87;
+        color: #ffed87;
+        padding: 10px 18px;
+        font-family: "Press Start 2P", monospace;
+        font-size: 13px;
+      }
+      .s2 {
+        background:
+          radial-gradient(circle at 15% 10%, #ffd8ec 0%, #f5bad8 38%, #e9a8cc 100%);
+      }
+      .s2-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#1f3e7140 1px, transparent 1px),
+          linear-gradient(90deg, #1f3e7140 1px, transparent 1px);
+        background-size: 36px 36px;
+      }
+      .s2-body {
+        position: absolute;
+        inset: 130px 0 0;
+        text-align: center;
+        color: #132b5f;
+      }
+      .title {
+        margin-top: 26px;
+        font-size: 92px;
+        font-weight: 700;
+      }
+      .timeline {
+        position: relative;
+        width: 980px;
+        margin: 66px auto 0;
+        height: 540px;
+      }
+      .line {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        height: 100%;
+        width: 4px;
+        margin-left: -2px;
+        background: repeating-linear-gradient(180deg, #173a73 0 16px, transparent 16px 28px);
+      }
+      .node {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 26px;
+        height: 26px;
+        background: var(--arcade-yellow);
+        border: 4px solid #173a73;
+      }
+      .node.cyan { background: var(--arcade-cyan); }
+      .item {
+        position: absolute;
+        width: 380px;
+        text-align: left;
+      }
+      .item.right { left: 548px; }
+      .item.left { left: 54px; text-align: right; }
+      .tag {
+        display: inline-block;
+        padding: 5px 8px;
+        border: 2px solid #173a73;
+        font-family: "Press Start 2P", monospace;
+        font-size: 11px;
+      }
+      .item h4 {
+        margin-top: 12px;
+        font-size: 36px;
+        line-height: 1.1;
+      }
+      .item p {
+        margin-top: 10px;
+        font-size: 22px;
+        line-height: 1.3;
+        opacity: 0.8;
+      }
+      .s3 {
+        background: radial-gradient(circle at 35% 0%, #f5f4ff 0%, #eeedfd 50%, #e8e8fb 100%);
+      }
+      .s3-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(#2a447c1e 1px, transparent 1px),
+          linear-gradient(90deg, #2a447c1e 1px, transparent 1px);
+        background-size: 38px 38px;
+      }
+      .s3-body {
+        position: absolute;
+        inset: 180px 240px 120px;
+        color: #112962;
+      }
+      .s3-title {
+        text-align: center;
+        margin-top: 18px;
+        font-size: 82px;
+        font-weight: 700;
+      }
+      .bars {
+        margin-top: 70px;
+        display: grid;
+        gap: 26px;
+      }
+      .bar-row {
+        display: grid;
+        grid-template-columns: 160px 1fr 72px;
+        align-items: center;
+        gap: 22px;
+        font-size: 28px;
+        font-weight: 600;
+      }
+      .track {
+        height: 36px;
+        background: #cfd5eb;
+        position: relative;
+      }
+      .fill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 36px;
+        width: 0;
+        background: #173a73;
+        border-right: 4px solid var(--arcade-yellow);
+      }
+      .fill.cyan {
+        background: var(--arcade-cyan);
+      }
+      .fill.pink {
+        background: var(--arcade-pink);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="8.7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="cursor-glow" id="glow"></div>
+      <div class="frame"></div>
+      <div class="scanlines"></div>
+      <div class="noise"></div>
+      <div class="dots" id="dots"><i class="active"></i><i></i><i></i></div>
+      <div class="pager" id="pager">01 / 03</div>
+      <section class="scene s1 live" id="s1">
+        <div class="s1-grid"></div>
+        <div id="stars"></div>
+        <div class="s1-wrap">
+          <div class="micro">PIXEL PERFECT PRESENTATION SYSTEM</div>
+          <div class="hero" id="s1-title">8-BIT<br />ORBIT</div>
+          <div class="sub">A retro-futuristic deck engine for bold storytellers. Built for arcades, engineered for boardrooms.</div>
+          <div class="pill-row">
+            <div class="pill">16 SLIDES</div>
+            <div class="pill">C88 NATIVE</div>
+            <div class="pill">ZERO DEPENDENCIES</div>
+          </div>
+        </div>
+      </section>
+      <section class="scene s2" id="s2">
+        <div class="s2-grid"></div>
+        <div class="s2-body">
+          <div class="micro">CHRONOLOGY</div>
+          <div class="title">Development Roadmap</div>
+          <div class="timeline">
+            <div class="line"></div>
+            <div class="node" style="top: 48px"></div>
+            <div class="item left" style="top: 14px">
+              <div class="tag">Q1. 1986</div>
+              <h4>Concept &amp; Architecture</h4>
+              <p>Wireframes, palette selection, and core grid system established.</p>
+            </div>
+            <div class="node" style="top: 178px"></div>
+            <div class="item right" style="top: 148px">
+              <div class="tag">Q2. 1989</div>
+              <h4>Asset Generation</h4>
+              <p>Pixel components, iconography, and atmospheric effects coded.</p>
+            </div>
+            <div class="node cyan" style="top: 316px"></div>
+            <div class="item left" style="top: 284px">
+              <div class="tag">Q3. 1990</div>
+              <h4>Data Integration</h4>
+              <p>Charting engine, animated counters, and dynamic state binding.</p>
+            </div>
+            <div class="node cyan" style="top: 446px"></div>
+            <div class="item right" style="top: 414px">
+              <div class="tag">Q4. 2000</div>
+              <h4>Global Launch</h4>
+              <p>Public release with full documentation and community support.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="scene s3" id="s3">
+        <div class="s3-grid"></div>
+        <div class="s3-body">
+          <div class="micro" style="text-align: center">SYSTEM LOAD</div>
+          <div class="s3-title">Resource Allocation</div>
+          <div class="bars">
+            <div class="bar-row"><span>Compute</span><div class="track"><div class="fill" data-w="88"></div></div><span>88%</span></div>
+            <div class="bar-row"><span>Storage</span><div class="track"><div class="fill cyan" data-w="72"></div></div><span>72%</span></div>
+            <div class="bar-row"><span>Network</span><div class="track"><div class="fill pink" data-w="85"></div></div><span>85%</span></div>
+            <div class="bar-row"><span>Memory</span><div class="track"><div class="fill" data-w="61"></div></div><span>61%</span></div>
+            <div class="bar-row"><span>Graphics</span><div class="track"><div class="fill cyan" data-w="44"></div></div><span>44%</span></div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var scenes = ["s1", "s2", "s3"];
+      var dots = Array.from(document.querySelectorAll("#dots i"));
+      var pager = document.getElementById("pager");
+      function setScene(index) {
+        scenes.forEach(function (id, i) {
+          document.getElementById(id).classList.toggle("live", i === index);
+          dots[i].classList.toggle("active", i === index);
+        });
+        pager.textContent = "0" + (index + 1) + " / 03";
+      }
+      var starsRoot = document.getElementById("stars");
+      function mulberry32(seed) {
+        return function () {
+          var t = (seed += 0x6d2b79f5);
+          t = Math.imul(t ^ (t >>> 15), t | 1);
+          t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rand = mulberry32(19860905);
+      for (var i = 0; i < 90; i++) {
+        var star = document.createElement("i");
+        star.className = "star";
+        star.style.left = Math.round(rand() * 1920) + "px";
+        star.style.top = Math.round(rand() * 1080) + "px";
+        star.style.opacity = (rand() * 0.9 + 0.1).toFixed(2);
+        star.style.transform = "scale(" + (rand() * 1.8 + 0.3).toFixed(2) + ")";
+        starsRoot.appendChild(star);
+      }
+      gsap.to(".star", {
+        opacity: function (i) { return 0.25 + (i % 5) * 0.15; },
+        duration: function (i) { return 0.55 + (i % 7) * 0.12; },
+        repeat: 8,
+        yoyo: true,
+        stagger: { each: 0.02 }
+      });
+      var T12 = 2.8;
+      var T23 = 5.6;
+      var tl = gsap.timeline({ paused: true });
+      tl.from("#s1 .micro, #s1 .sub, #s1 .pill", {
+        opacity: 0,
+        y: 24,
+        stagger: 0.06,
+        duration: 0.5,
+        ease: "power3.out"
+      }, 0);
+      tl.from("#s1-title", {
+        opacity: 0,
+        scale: 0.75,
+        y: 60,
+        duration: 0.75,
+        ease: "back.out(1.4)"
+      }, 0.16);
+      tl.to("#s1-title", { textShadow: "10px 10px 0 #ffe75c", duration: 0.24, yoyo: true, repeat: 1 }, 1.4);
+      tl.to("#s1", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T12 - 0.24);
+      tl.add(function () { setScene(1); }, T12 - 0.06);
+      tl.from("#s2 .micro, #s2 .title", { opacity: 0, y: 42, duration: 0.46, stagger: 0.06, ease: "power3.out" }, T12 + 0.02);
+      tl.from("#s2 .line", { scaleY: 0, transformOrigin: "50% 0%", duration: 0.65, ease: "power3.out" }, T12 + 0.18);
+      tl.from("#s2 .node", { scale: 0, rotation: 90, opacity: 0, stagger: 0.09, duration: 0.3, ease: "back.out(1.9)" }, T12 + 0.35);
+      tl.from("#s2 .item", { x: -34, opacity: 0, stagger: 0.08, duration: 0.4, ease: "power2.out" }, T12 + 0.45);
+      tl.to("#s2", { opacity: 0, duration: 0.34, ease: "power2.inOut" }, T23 - 0.24);
+      tl.add(function () { setScene(2); }, T23 - 0.06);
+      tl.from("#s3 .micro, #s3 .s3-title", { opacity: 0, y: 36, duration: 0.5, stagger: 0.08, ease: "power3.out" }, T23 + 0.02);
+      tl.from("#s3 .bar-row", { x: -32, opacity: 0, stagger: 0.06, duration: 0.35, ease: "power2.out" }, T23 + 0.26);
+      tl.to("#s3 .fill", {
+        width: function (_, el) { return el.getAttribute("data-w") + "%"; },
+        duration: 0.85,
+        stagger: 0.08,
+        ease: "expo.out"
+      }, T23 + 0.36);
+      tl.to("#pager", { y: -4, duration: 0.2, yoyo: true, repeat: 1 }, T23 + 1.4);
+      window.__timelines.main = tl;
+      setScene(0);
+      var root = document.getElementById("root");
+      var glow = document.getElementById("glow");
+      root.addEventListener("mousemove", function (e) {
+        var r = root.getBoundingClientRect();
+        var x = e.clientX - r.left;
+        var y = e.clientY - r.top;
+        gsap.to(glow, { x: x, y: y, duration: 0.3, ease: "power2.out" });
+        gsap.to(".scene.live", {
+          backgroundPositionX: (x - 960) * -0.02,
+          backgroundPositionY: (y - 540) * -0.02,
+          duration: 0.45,
+          ease: "power2.out"
+        });
+      });
+      function jumpTo(index) {
+        if (index === 0) tl.pause(0);
+        if (index === 1) tl.pause(T12 + 0.6);
+        if (index === 2) tl.pause(T23 + 0.8);
+        setScene(index);
+      }
+      window.addEventListener("keydown", function (e) {
+        if (e.key === "1") jumpTo(0);
+        if (e.key === "2") jumpTo(1);
+        if (e.key === "3") jumpTo(2);
+        if (e.key.toLowerCase() === "r") {
+          tl.restart();
+          setScene(0);
+        }
+      });
+    </script>
+  </body>
+</html>

package/dist/__w3kits/assets/skills/8-bit-orbit-video-template/example.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Hyperframes Video Template Example</title>
+  <style>
+    html, body { margin: 0; height: 100%; background: #061236; color: #d9f4ff; font-family: "Chakra Petch", system-ui, sans-serif; }
+    .top {
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 14px;
+      border-bottom: 1px solid #29447a;
+      background: #0b1b49;
+      letter-spacing: 0.06em;
+      font-size: 12px;
+    }
+    .top b { font-size: 12px; color: #8ce9ff; }
+    .top span { color: #b8d1ff; opacity: 0.9; }
+    .stage { height: calc(100% - 49px); display: grid; grid-template-columns: 1.2fr 1fr; }
+    .pane { border-right: 1px solid #203765; }
+    .pane:last-child { border-right: 0; }
+    iframe { width: 100%; height: 100%; border: 0; background: #030a24; }
+    video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
+  </style>
+</head>
+<body>
+  <div class="top">
+    <b>HYPERFRAMES VIDEO TEMPLATE · DEFAULT SHOWCASE</b>
+    <span>Left: editable HTML template · Right: rendered MP4 sample</span>
+  </div>
+  <div class="stage">
+    <div class="pane">
+      <iframe src="./assets/template.html" title="Hyperframes template HTML preview"></iframe>
+    </div>
+    <div class="pane">
+      <video controls preload="metadata" src="./assets/default-showcase.mp4"></video>
+    </div>
+  </div>
+</body>
+</html>

package/dist/__w3kits/assets/skills/8-bit-orbit-video-template/references/checklist.md ADDED Viewed

@@ -0,0 +1,21 @@
+# Checklist
+## P0
+- `assets/template.html` exists and opens directly from disk.
+- `example.html` renders both the editable template preview and the default MP4 showcase.
+- Skill frontmatter uses `od.mode: template`, `od.surface: video`, and `od.type: hyperframes`.
+- Base composition includes exactly 3 scenes and each scene hold is under 3 seconds.
+- Template keeps deterministic logic (seeded randomness only, no `repeat: -1` loops).
+- Template avoids sandbox-hostile APIs (`localStorage`, `sessionStorage`, `alert`, `confirm`, `prompt`).
+## P1
+- Retro 8-bit visual language remains consistent across all three scenes.
+- Scene transitions and entrance choreography are clearly visible at normal playback speed.
+- Generated artifact remains a single self-contained HTML file.
+## P2
+- Keyboard preview controls (`1`, `2`, `3`, `r`) work in local preview.
+- Mouse glow/parallax interaction remains subtle and does not hurt readability.

package/dist/__w3kits/assets/skills/AGENTS.md ADDED Viewed

@@ -0,0 +1,54 @@
+# skills
+This directory holds **functional skills** — capabilities the agent
+invokes mid-task to do work on user input. Each skill is a folder with a
+`SKILL.md` (frontmatter + body) and any side files (`assets/`,
+`references/`, scripts, …) the workflow needs.
+If the entry primarily *renders* a design artifact (deck, prototype,
+image/video/audio template) it belongs under `../design-templates/`
+instead. See `specs/current/skills-and-design-templates.md` for the
+full split.
+## Daemon plumbing
+- Listed under `/api/skills` (functional only). User-imported skills
+  shadow built-in entries with the same frontmatter `name`.
+- Asset routes (`/api/skills/:id/example`, `/api/skills/:id/assets/*`)
+  span both functional skills and design templates so existing
+  `srcdoc`-rewritten URLs keep resolving after the split.
+- The Settings → Skills panel surfaces this directory only; the
+  EntryView Templates tab reads the design-templates registry instead.
+## Adding a skill
+1. Create `skills/<my-skill>/SKILL.md` with `name`, `description`,
+   `triggers`, and `od.mode: utility` (or `design-system`) frontmatter.
+2. Drop any side files alongside; reference them from the body using
+   the relative-from-skill-root paths the daemon advertises in the
+   skill preamble.
+3. The daemon's lazy scanner picks the entry up on the next
+   `/api/skills` request — no rebuild required during local dev.
+## Curated design / creative catalogue
+This directory also ships a curated catalogue of design and creative
+skills hand-picked from `VoltAgent/awesome-agent-skills` and
+`ComposioHQ/awesome-claude-skills`. Each entry is a lightweight stub —
+frontmatter + a short body that points at the upstream repo — so the
+Settings → Skills tab surfaces a rich, filterable list out of the box
+without vendoring every upstream workflow.
+- `od.category` on these stubs powers the new category filter row in
+  Settings → Skills (e.g. `image-generation`, `video-generation`,
+  `audio-music`, `slides`, `documents`, `design-systems`, `figma`,
+  `animation-motion`, `3d-shaders`, `diagrams`, `creative-direction`,
+  `marketing-creative`, `screenshots`, `web-artifacts`).
+- The seed script lives at `scripts/seed-curated-design-skills.ts` and
+  is **idempotent**: running it again only creates folders that don't
+  already exist, so a hand-edited stub is never overwritten. Delete the
+  folder under `skills/` and re-run the script to refresh an entry.
+- Stubs intentionally do not vendor upstream assets. To run an upstream
+  workflow with its original scripts and references, copy the upstream
+  folder into your active agent's skills directory (Claude Code, Codex,
+  Cursor, etc.) — the body of each stub explains how.

package/dist/__w3kits/assets/skills/README.md ADDED Viewed

@@ -0,0 +1,25 @@
+# Skills
+A skill is the atomic unit of design capability in Open Design — one folder, one `SKILL.md`, optional `assets/` and `references/`. The daemon scans this directory at startup; drop a folder in, restart, and the picker shows it.
+## Adding a new skill
+→ **[`docs/skills-contributing.md`](../docs/skills-contributing.md)** — the contributor guide. Quick start, anatomy, local dev loop, merge bar, PR template, and common rejection patterns.
+→ **[`docs/skills-protocol.md`](../docs/skills-protocol.md)** — the protocol spec. Frontmatter grammar, discovery rules, mode semantics.
+The fastest path is to copy the existing skill closest to your idea, edit `SKILL.md` and `example.html`, and read the contributor guide before opening the PR. We're picky about skills because they're the user-facing surface — the merge bar is real and the contributor guide makes it explicit.
+## Skills that already ship
+The `mode` and `featured` flags in each skill's `SKILL.md` decide where it shows up in the picker. The list below is a quick orientation; for a curated set of "imitate this if you're starting from scratch" skills, see the **References** section in [`docs/skills-contributing.md`](../docs/skills-contributing.md).
+```bash
+# Browse the registry from the CLI:
+ls skills/
+# 54+ skills across prototype, deck, template, design-system, image, video, and audio modes
+```
+## License
+Skills in this directory are Apache-2.0 unless their own `LICENSE` says otherwise. The most notable exception is [`skills/guizang-ppt/`](guizang-ppt/), bundled verbatim from [op7418/guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill) under MIT.

package/dist/__w3kits/assets/skills/ad-creative/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: ad-creative
+description: |
+  Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
+triggers:
+  - "ad creative"
+  - "ad headline"
+  - "ad copy"
+  - "paid social ad"
+  - "search ad"
+od:
+  mode: design-system
+  category: marketing-creative
+  upstream: "https://github.com/coreyhaines31/marketingskills"
+---
+# ad-creative
+> Curated from Corey Haines.
+## What it does
+Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
+## Source
+- Upstream: https://github.com/coreyhaines31/marketingskills
+- 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/coreyhaines31/marketingskills
+```
+Then ask the agent to invoke this skill by name (`ad-creative`) or with
+one of the trigger phrases listed in this skill's frontmatter.