npm - agent-devkit - Versions diffs - 0.3.2 → 0.3.4 - Mend

agent-devkit 0.3.2 → 0.3.4

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 (5351) hide show

package/runtime/vendor/plugins/open-design/_official/examples/hps-y2k-chrome/example.html DELETED Viewed

@@ -1,437 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="y2k-chrome">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Y2K Chrome · Open Design Demo Deck</title>
-<style>
-/* hps-y2k-chrome :: webfonts (Google Fonts @import only — no other external deps) */
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
-</style>
-<style>
-/* ============================================================
-   LOCKED TOKEN SHEET — theme: y2k-chrome (millennium chrome)
-   Ported from upstream lewislulu/html-ppt-skill
-   assets/themes/y2k-chrome.css. This variant is theme-locked:
-   do not add other themes, do not recolor these tokens.
-   ============================================================ */
-:root{
-  --bg:#dfe4ec; --bg-soft:#eef1f6;
-  --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.5);
-  --border:rgba(120,135,170,.32); --border-strong:rgba(80,100,140,.55);
-  --text-1:#1a1f2e; --text-2:#4a536a; --text-3:#8590a6;
-  --accent:#8a5cff; --accent-2:#3ccfd8; --accent-3:#ff84c4;
-  --good:#1fb98c; --warn:#e8a13d; --bad:#e0445a;
-  --grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
-  --grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
-  --chrome-text:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
-  --radius:26px; --radius-sm:16px; --radius-lg:36px;
-  --shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
-  --shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
-  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
-  --font-display:'Space Grotesk','Inter',sans-serif;
-  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
-  --letter-tight:-.03em; --letter-normal:-.01em;
-  --ease:cubic-bezier(.4,0,.2,1);
-}
-</style>
-<style>
-/* ============================================================
-   BASE + SLIDE SYSTEM — horizontal scroll-snap deck.
-   One <section class="slide"> = exactly one viewport screen.
-   Designed at 16:9 (1280×720 baseline), fluid to the viewport.
-   ============================================================ */
-*,*::before,*::after{box-sizing:border-box}
-html,body{margin:0;padding:0;height:100%}
-body{
-  /* signature: full-bleed 5-stop silver-metal canvas — never paint over it */
-  background:linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%);
-  color:var(--text-1);font-family:var(--font-sans);
-  font-weight:400;line-height:1.6;letter-spacing:var(--letter-normal);
-  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}
-img,svg,video{max-width:100%;display:block}
-code,kbd,pre,samp{font-family:var(--font-mono)}
-.deck{display:flex;width:100vw;height:100vh;overflow-x:auto;overflow-y:hidden;
-  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
-.deck::-webkit-scrollbar{display:none}
-.slide{position:relative;flex:0 0 100vw;height:100vh;scroll-snap-align:start;
-  display:flex;flex-direction:column;justify-content:center;
-  padding:72px 96px;overflow:hidden}
-/* ============ TYPOGRAPHY ============ */
-.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-1);margin:0}
-.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
-.h1{font-family:var(--font-display);font-size:clamp(44px,5.6vw,72px);line-height:1.05;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 18px}
-.h2{font-family:var(--font-display);font-size:clamp(34px,4.2vw,54px);line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px;color:var(--text-1)}
-.h3{font-size:clamp(22px,2.5vw,32px);line-height:1.2;font-weight:600;margin:0 0 10px}
-.h4{font-size:clamp(17px,1.7vw,22px);line-height:1.3;font-weight:600;margin:0 0 8px}
-.lede{font-size:clamp(17px,1.7vw,22px);line-height:1.55;color:var(--text-1);font-weight:400;max-width:62ch;margin:0}
-.dim{color:var(--text-2)}
-.dim2{color:var(--text-3)}
-.mono{font-family:var(--font-mono)}
-/* signature: white→steel→gunmetal chrome-clipped display type */
-.h1,.chrome-text,.stat-big{background:var(--chrome-text);
-  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
-  filter:drop-shadow(0 2px 3px rgba(40,55,85,.38))}
-.gradient-text{background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 55%,var(--accent-2) 82%,var(--accent-3) 100%);
-  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
-  filter:drop-shadow(0 1px 2px rgba(40,55,85,.25))}
-/* ============ LAYOUT PRIMITIVES ============ */
-.row{display:flex;gap:24px;align-items:center}
-.row.wrap{flex-wrap:wrap}
-.grid{display:grid;gap:24px}
-.g2{grid-template-columns:repeat(2,1fr)}
-.g3{grid-template-columns:repeat(3,1fr)}
-.g4{grid-template-columns:repeat(4,1fr)}
-.center{display:flex;align-items:center;justify-content:center;text-align:center}
-.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
-/* ============ CARDS / PILLS — frosted glass ============ */
-.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
-  padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden;
-  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
-.card-soft{background:var(--surface-2)}
-.card-accent{border-top:3px solid var(--accent)}
-.pill{display:inline-block;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:500;
-  background:linear-gradient(180deg,#fff,#d4dcec);color:var(--text-2);border:1px solid rgba(120,135,170,.4);
-  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
-.pill-accent{background:linear-gradient(180deg,#f3edff,#ddd0ff);color:var(--accent);border-color:rgba(138,92,255,.35)}
-.divider-accent{height:3px;width:72px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px}
-/* ============ Y2K DECOR — glossy orbs + chrome sparkles ============ */
-.orb{position:absolute;border-radius:50%;z-index:0;pointer-events:none;
-  box-shadow:0 18px 40px rgba(70,90,130,.25),inset 0 -10px 24px rgba(80,100,140,.25)}
-.orb::after{content:"";position:absolute;left:18%;top:10%;width:38%;height:30%;border-radius:50%;
-  background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
-.orb-purple{background:radial-gradient(circle at 32% 28%,#d8c6ff,#8a5cff 60%,#5c34c4)}
-.orb-aqua{background:radial-gradient(circle at 32% 28%,#d2fbff,#3ccfd8 60%,#1e93a3)}
-.orb-pink{background:radial-gradient(circle at 32% 28%,#ffe1f1,#ff84c4 60%,#d6488f)}
-.orb-chrome{background:radial-gradient(circle at 32% 28%,#ffffff,#b8c4d8 55%,#6b7a95)}
-.sparkle{position:absolute;z-index:0;pointer-events:none}
-.slide>*{position:relative;z-index:1}
-.slide>.orb,.slide>.sparkle{position:absolute;z-index:0}
-/* ============ DECK CHROME ============ */
-.deck-header{position:fixed;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
-  font-size:12px;color:var(--text-2);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
-.deck-footer{position:fixed;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
-  font-size:12px;color:var(--text-2);z-index:10;pointer-events:none}
-.theme-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:none}
-.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:20;pointer-events:none}
-.progress-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s var(--ease)}
-/* ============ SLIDE-LOCAL COMPONENTS ============ */
-.section-num{position:absolute;right:72px;bottom:56px;font-size:clamp(120px,17vw,220px);font-weight:700;line-height:.9;
-  letter-spacing:-.05em;z-index:0;pointer-events:none;
-  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;
-  -webkit-text-fill-color:transparent;color:transparent}
-.kpi .num{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:var(--letter-tight);line-height:1.1}
-.kpi .lbl{font-size:14px;color:var(--text-2);margin-top:6px}
-.stat-big{font-size:clamp(110px,15vw,200px);font-weight:700;line-height:1;letter-spacing:-.05em;margin:0}
-.bar-chart{display:flex;align-items:flex-end;gap:18px;height:240px;margin-top:40px;max-width:820px}
-.bar-chart .bar{flex:1;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:14px 14px 6px 6px;
-  position:relative;min-height:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 10px 24px rgba(70,90,130,.25)}
-.bar-chart .bar.alt{background:linear-gradient(180deg,#f5f7fb,#8a9ab8 70%,#6b7a95)}
-.bar-chart .bar span{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-size:13px;color:var(--text-1)}
-.bar-chart .bar em{position:absolute;top:-30px;left:0;right:0;text-align:center;font-size:14px;font-weight:700;font-style:normal;color:var(--text-1)}
-.steps{counter-reset:step}
-.steps .card{padding-top:34px}
-.steps .card::before{counter-increment:step;content:counter(step,decimal-leading-zero);
-  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);
-  position:absolute;top:14px;left:28px;letter-spacing:.08em}
-.quote{font-family:var(--font-display);font-size:clamp(30px,3.6vw,48px);line-height:1.3;font-weight:600;max-width:26ch;margin:0;color:var(--text-1)}
-/* semantic mini-orb dots: carry good/bad color on a glossy sphere (token colors only)
-   so eyebrow text can stay --text-1 and keep WCAG AA contrast on frosted cards */
-.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:-1px;
-  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 4px rgba(80,100,140,.28)}
-.dot-good{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),var(--good) 70%)}
-.dot-bad{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),var(--bad) 70%)}
-.check{list-style:none;padding:0;margin:0;font-size:clamp(15px,1.5vw,19px)}
-.check li{padding:9px 0 9px 34px;position:relative;color:var(--text-1)}
-.check li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;border-radius:8px;
-  background:linear-gradient(180deg,#f3edff,#ddd0ff);border:1.5px solid var(--accent);
-  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
-.check li::after{content:"";position:absolute;left:4.5px;top:17px;width:9px;height:5px;
-  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
-/* ============ SPEAKER NOTES (hidden from audience) ============ */
-.notes{display:none!important}
-/* ============ ANIMATIONS (entry effects, upstream subset) ============ */
-@keyframes kf-rise{from{opacity:0;transform:translateY(60px) scale(.97)}to{opacity:1;transform:none}}
-@keyframes kf-fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
-.anim-rise-in{animation:kf-rise .9s var(--ease) both}
-.anim-fade-up{animation:kf-fade-up .7s var(--ease) both}
-.anim-stagger-list>*{opacity:0;animation:kf-rise .65s var(--ease) both}
-.anim-stagger-list>*:nth-child(1){animation-delay:.05s}
-.anim-stagger-list>*:nth-child(2){animation-delay:.15s}
-.anim-stagger-list>*:nth-child(3){animation-delay:.25s}
-.anim-stagger-list>*:nth-child(4){animation-delay:.35s}
-.anim-stagger-list>*:nth-child(5){animation-delay:.45s}
-.anim-stagger-list>*:nth-child(n+6){animation-delay:.55s}
-/* Reduced-motion degrade: entry effects resolve instantly, content stays visible */
-@media (prefers-reduced-motion:reduce){
-  .anim-rise-in,.anim-fade-up,.anim-stagger-list>*{animation:none;opacity:1;transform:none}
-  .progress-bar>span{transition:none}
-}
-/* ============ PRINT ============ */
-@media print{
-  body{overflow:visible}
-  .deck{display:block;width:auto;height:auto;overflow:visible}
-  .slide{width:100vw;height:100vh;page-break-after:always}
-  .deck-header,.deck-footer,.progress-bar{display:none!important}
-}
-</style>
-<style id="od-no-pager">.deck-controls,#counter,.deck-counter{display:none!important}</style>
-</head>
-<body>
-<div class="deck-header"><span>OPEN DESIGN · 2026</span><span class="theme-chip">y2k-chrome</span></div>
-<div class="deck" id="deck">
-  <!-- 1 · layout: cover -->
-  <section class="slide" data-title="Cover">
-    <div class="orb orb-purple" style="width:180px;height:180px;right:14%;top:12%"></div>
-    <div class="orb orb-aqua" style="width:90px;height:90px;right:8%;top:46%"></div>
-    <div class="orb orb-pink" style="width:60px;height:60px;right:24%;bottom:18%"></div>
-    <svg class="sparkle" style="left:55%;top:18%" width="44" height="44" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#f5f7fb" stroke="#8a9ab8" stroke-width="1"/></svg>
-    <svg class="sparkle" style="left:46%;bottom:22%" width="26" height="26" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#ff84c4" opacity=".85"/></svg>
-    <p class="kicker">github.com/nexu-io/open-design</p>
-    <h1 class="h1 anim-rise-in">OPEN DESIGN<br>the agent-driven<br>design platform</h1>
-    <p class="lede">From idea to prototypes, web pages, slides, and HTML video — the full product-design workflow, open source and on your own machine.</p>
-    <div class="row wrap mt-l" style="gap:8px">
-      <span class="pill pill-accent">Apache-2.0</span>
-      <span class="pill">runs locally</span>
-      <span class="pill">BYOK</span>
-      <span class="pill">no sign-up</span>
-    </div>
-    <div class="notes">Cover slide for Open Design — the open-source, local, agent-driven design platform. Point out the chrome-clipped headline and the glossy orbs: both are signature devices of this theme.</div>
-  </section>
-  <!-- 2 · layout: toc -->
-  <section class="slide" data-title="Agenda">
-    <svg class="sparkle" style="right:10%;top:14%" width="34" height="34" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#3ccfd8" opacity=".8"/></svg>
-    <p class="kicker">Agenda</p>
-    <h2 class="h2">Three tracks, one platform</h2>
-    <div class="grid g3 mt-l anim-stagger-list">
-      <div class="card card-accent"><h4 class="h4">① Why open</h4><p class="dim">Frontier AI design exists — but it's closed, paid and cloud-only. Time to set it free.</p></div>
-      <div class="card card-accent"><h4 class="h4">② The product</h4><p class="dim">The workflow, the numbers and the agents already on your machine.</p></div>
-      <div class="card card-accent"><h4 class="h4">③ Get started</h4><p class="dim">Open vs closed, what the community says, and where to download.</p></div>
-    </div>
-    <div class="notes">Standard toc layout: three frosted-glass cards with a stagger entry. Note the inset top highlight on each card — that is the glass signature.</div>
-  </section>
-  <!-- 3 · layout: section-divider -->
-  <section class="slide" data-title="Section · Why now">
-    <span class="section-num">01</span>
-    <div class="orb orb-chrome" style="width:120px;height:120px;left:62%;top:16%"></div>
-    <p class="eyebrow">Track one</p>
-    <h2 class="h2">Frontier AI design,<br>set free</h2>
-    <div class="divider-accent mt-m"></div>
-    <div class="notes">Section divider: the oversized number is chrome-clipped, same gradient as the H1. One chrome orb keeps the page from feeling empty.</div>
-  </section>
-  <!-- 4 · layout: two-column -->
-  <section class="slide" data-title="Insight">
-    <p class="kicker">The insight</p>
-    <h2 class="h2">AI can truly design now — it should be <span class="gradient-text">open</span></h2>
-    <div class="grid g2 mt-l">
-      <div>
-        <p class="lede">In April 2026, Claude Design proved an LLM can produce real design artifacts. But it's closed, paid and cloud-only. Open Design rebuilds it in the open.</p>
-        <ul class="check mt-m">
-          <li>Desktop-native: local files, Figma, repos</li>
-          <li>Plugs in Claude Code, Codex, Cursor</li>
-          <li>Memory compounds with every choice</li>
-          <li>Apache-2.0 — fork, self-host, go commercial</li>
-        </ul>
-      </div>
-      <div class="card">
-        <p class="eyebrow" style="color:var(--accent)">Engineering manager</p>
-        <h3 class="h3">“Compared to Claude Design, our monthly bill dropped from $500 to ~$73.”</h3>
-        <p class="dim mt-m">That is <b>over 80% less</b>, with bring-your-own-key across model and media providers. Same frontier capability, your own machine.</p>
-      </div>
-    </div>
-    <div class="notes">Two-column layout: claim plus checklist on the left, a glass evidence card on the right. Accent colors only ever appear on small surfaces — checks, eyebrows, highlight words.</div>
-  </section>
-  <!-- 5 · layout: kpi-grid -->
-  <section class="slide" data-title="Community KPIs">
-    <p class="kicker">Open ecosystem</p>
-    <h2 class="h2">Built in the open</h2>
-    <div class="grid g4 mt-l anim-stagger-list">
-      <div class="card kpi"><div class="num chrome-text">60K+</div><div class="lbl">GitHub stars, Apache-2.0 open source</div></div>
-      <div class="card kpi"><div class="num chrome-text">300+</div><div class="lbl">contributors across the project</div></div>
-      <div class="card kpi"><div class="num chrome-text">217+</div><div class="lbl">plugins, official and community</div></div>
-      <div class="card kpi"><div class="num chrome-text">129</div><div class="lbl">design systems ready to import</div></div>
-    </div>
-    <div class="notes">KPI grid: four numbers, one line of context each. Display numerals are always chrome-clipped, never flat accent color.</div>
-  </section>
-  <!-- 6 · layout: stat-highlight -->
-  <section class="slide center" data-title="Big number">
-    <div class="orb orb-purple" style="width:70px;height:70px;left:16%;top:24%"></div>
-    <div class="orb orb-aqua" style="width:46px;height:46px;right:18%;bottom:26%"></div>
-    <p class="kicker">One number to remember</p>
-    <p class="stat-big anim-rise-in">-80%</p>
-    <p class="lede mt-m" style="max-width:46ch">monthly cost vs. Claude Design — from $500 down to ~$73 with bring-your-own-key, by design.</p>
-    <div class="notes">Stat-highlight: one giant chrome number carries the slide. The -80% framing lands the BYOK cost story.</div>
-  </section>
-  <!-- 7 · layout: chart-bar (pure CSS bars — no chart library) -->
-  <section class="slide" data-title="Plugin chart">
-    <p class="kicker">Ecosystem</p>
-    <h2 class="h2">217+ plugins by artifact type</h2>
-    <div class="bar-chart">
-      <div class="bar alt" style="height:24%"><em>17</em><span>Video</span></div>
-      <div class="bar" style="height:36%"><em>28</em><span>HyperFrames</span></div>
-      <div class="bar" style="height:44%"><em>34</em><span>Image</span></div>
-      <div class="bar" style="height:64%"><em>52</em><span>Slides</span></div>
-      <div class="bar" style="height:100%"><em>86</em><span>Prototype</span></div>
-    </div>
-    <p style="margin-top:56px;color:var(--text-1)">Demo split of the 217+ plugin catalog · chrome bar = cinematic generative video. Pure CSS, no chart library.</p>
-    <div class="notes">Bar chart rebuilt in pure CSS: aqua-to-purple gradient bars with an inset gloss line, one chrome bar for the video category. Works inside any sandboxed iframe.</div>
-  </section>
-  <!-- 8 · layout: process-steps -->
-  <section class="slide" data-title="Workflow">
-    <p class="kicker">The workflow</p>
-    <h2 class="h2">Idea to delivery in four moves</h2>
-    <div class="grid g4 mt-l steps anim-stagger-list">
-      <div class="card"><h4 class="h4">Pick</h4><p class="dim">Describe your goal in one sentence, or start from a template or plugin.</p></div>
-      <div class="card"><h4 class="h4">Style</h4><p class="dim">Set the visual direction — palette, type and spacing flow into generation.</p></div>
-      <div class="card"><h4 class="h4">Generate</h4><p class="dim">The agent produces real runnable files, previewed and edited in a sandbox.</p></div>
-      <div class="card"><h4 class="h4">Ship</h4><p class="dim">Hand off to engineering or film it with HyperFrames — every choice becomes memory.</p></div>
-    </div>
-    <div class="notes">Process steps: the counter pseudo-element numbers each card 01–04 automatically in mono accent type.</div>
-  </section>
-  <!-- 9 · layout: comparison -->
-  <section class="slide" data-title="Before / After">
-    <p class="kicker">Comparison</p>
-    <h2 class="h2">Closed cloud vs an open desktop</h2>
-    <div class="grid g2 mt-l">
-      <div class="card card-soft">
-        <p class="eyebrow"><span class="dot dot-bad"></span>Closed cloud tools</p>
-        <h3 class="h3">Locked, metered, cloud-only</h3>
-        <ul class="check"><li>One model, no agent choice</li><li>No self-hosting, no BYOK</li><li>Your design context lives on their servers</li></ul>
-      </div>
-      <div class="card card-accent">
-        <p class="eyebrow"><span class="dot dot-good"></span>Open Design</p>
-        <h3 class="h3">Open, local, agent-native</h3>
-        <ul class="check"><li>21 coding agents, auto-detected, zero config</li><li>Full-stack BYOK across model and media providers</li><li>Apache-2.0 — fork, self-host, commercial use</li></ul>
-      </div>
-    </div>
-    <div class="notes">Comparison layout: soft glass card vs accent-topped glass card; semantic red/green eyebrows mark the sides.</div>
-  </section>
-  <!-- 10 · layout: big-quote -->
-  <section class="slide center" data-title="Quote">
-    <svg class="sparkle" style="left:18%;top:20%" width="40" height="40" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#f5f7fb" stroke="#8a9ab8" stroke-width="1"/></svg>
-    <svg class="sparkle" style="right:16%;bottom:24%" width="28" height="28" viewBox="0 0 44 44"><path d="M22 0c2 12 8 18 22 22-14 4-20 10-22 22-2-12-8-18-22-22C14 18 20 12 22 0z" fill="#8a5cff" opacity=".75"/></svg>
-    <p class="quote anim-fade-up">“Markdown design systems stop <span class="chrome-text">token drift</span> — brand consistency is finally enforceable.”</p>
-    <p class="eyebrow mt-l">— Designer, Open Design community</p>
-    <div class="notes">Big-quote layout: Space Grotesk pull quote with one chrome-clipped word, framed by two sparkles. Nothing else competes on the page.</div>
-  </section>
-  <!-- 11 · layout: thanks / cta -->
-  <section class="slide center" data-title="Thanks">
-    <div class="orb orb-pink" style="width:120px;height:120px;left:12%;top:18%"></div>
-    <div class="orb orb-chrome" style="width:80px;height:80px;right:12%;top:14%"></div>
-    <div class="orb orb-aqua" style="width:54px;height:54px;left:24%;bottom:20%"></div>
-    <p class="kicker">Open · Local · Agent-native</p>
-    <h1 class="h1">Frontier AI design,<br>back on your desk</h1>
-    <p class="lede mt-m" style="max-width:52ch">Download for macOS / Windows · Star on <span class="mono" style="color:var(--accent)">github.com/nexu-io/open-design</span></p>
-    <div class="row wrap mt-l" style="gap:8px;justify-content:center">
-      <span class="pill pill-accent">← → navigate</span>
-      <span class="pill">Space next</span>
-      <span class="pill">#/6 deep link</span>
-      <span class="pill">print → PDF</span>
-    </div>
-    <div class="notes">Closer: restate the CTA and the GitHub link, then the keyboard hints. The orbs return to bookend the cover.</div>
-  </section>
-</div>
-<div class="deck-footer"><span>hps-y2k-chrome · MIT · based on lewislulu/html-ppt-skill</span><span id="counter">1 / 11</span></div>
-<div class="progress-bar"><span id="bar"></span></div>
-<script>
-(function () {
-  var deck = document.getElementById('deck');
-  var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
-  var counter = document.getElementById('counter');
-  var bar = document.getElementById('bar');
-  var active = 0;
-  var lastKeyEvent = null;
-  function clamp(i) { return Math.max(0, Math.min(slides.length - 1, i)); }
-  function paint(i) {
-    counter.textContent = (i + 1) + ' / ' + slides.length;
-    bar.style.width = (((i + 1) / slides.length) * 100) + '%';
-  }
-  // Hash routing: #/N (1-based). replaceState keeps back-button clean and
-  // never throws inside a srcdoc iframe thanks to the try/catch.
-  function setHash(i) {
-    try { history.replaceState(null, '', '#/' + (i + 1)); } catch (_) { /* sandboxed */ }
-  }
-  function fromHash() {
-    var m = (location.hash || '').match(/^#\/(\d+)/);
-    return m ? clamp(parseInt(m[1], 10) - 1) : 0;
-  }
-  function go(i, instant) {
-    active = clamp(i);
-    deck.scrollTo({ left: active * deck.clientWidth, behavior: instant ? 'auto' : 'smooth' });
-    paint(active);
-    setHash(active);
-  }
-  function syncFromScroll() {
-    var i = Math.round(deck.scrollLeft / deck.clientWidth);
-    if (i !== active && i >= 0 && i < slides.length) { active = i; paint(i); setHash(i); }
-  }
-  function onKey(e) {
-    if (e === lastKeyEvent) return; // dedupe: same Event passes both listeners
-    lastKeyEvent = e;
-    var t = e.target;
-    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return;
-    if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
-    else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
-    else if (e.key === 'Home') { e.preventDefault(); go(0); }
-    else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
-  }
-  // Listen on both window and document in capture phase so keys work no
-  // matter which element holds focus inside a host iframe.
-  window.addEventListener('keydown', onKey, true);
-  document.addEventListener('keydown', onKey, true);
-  deck.addEventListener('scroll', function () { window.requestAnimationFrame(syncFromScroll); }, { passive: true });
-  window.addEventListener('hashchange', function () { go(fromHash()); });
-  window.addEventListener('resize', function () { go(active, true); });
-  // Auto-focus so arrow keys work without a click.
-  document.body.setAttribute('tabindex', '-1');
-  document.body.style.outline = 'none';
-  function focusDeck() {
-    try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) { /* sandboxed */ }
-  }
-  document.addEventListener('mousedown', focusDeck);
-  window.addEventListener('load', focusDeck);
-  go(fromHash(), true);
-  paint(active);
-  focusDeck();
-})();
-</script>
-</body>
-</html>

package/runtime/vendor/plugins/open-design/_official/examples/hps-y2k-chrome/open-design.json DELETED Viewed

@@ -1,145 +0,0 @@
-{
-  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
-  "specVersion": "1.0.0",
-  "name": "example-hps-y2k-chrome",
-  "title": "Y2K Chrome",
-  "title_i18n": {
-    "en": "Y2K Chrome",
-    "zh-CN": "千禧银铬"
-  },
-  "version": "1.0.0",
-  "description": "Y2K chrome deck — full-bleed 5-stop silver-metal gradient canvas, white→steel→gunmetal chrome-clipped H1 headlines, 72% white frosted-glass cards with inset top highlights, 26–36px mega-radius corners, candy purple #8a5cff / aqua #3ccfd8 / pink #ff84c4 accents, glossy orb and sparkle decor, Space Grotesk type. Single-file HTML, keyboard navigation, zero dependencies. Based on lewislulu/html-ppt-skill y2k-chrome. Use for product launches, consumer-app pitches, music/fashion/creator decks, or anything that wants millennium-bug-era metallic shine.",
-  "description_i18n": {
-    "en": "Y2K chrome deck — full-bleed 5-stop silver-metal gradient canvas, white→steel→gunmetal chrome-clipped H1 headlines, 72% white frosted-glass cards with inset top highlights, 26–36px mega-radius corners, candy purple #8a5cff / aqua #3ccfd8 / pink #ff84c4 accents, glossy orb and sparkle decor, Space Grotesk type. Single-file HTML, keyboard navigation, zero dependencies. Based on lewislulu/html-ppt-skill y2k-chrome. Use for product launches, consumer-app pitches, music/fashion/creator decks, or anything that wants millennium-bug-era metallic shine.",
-    "zh-CN": "千禧银铬幻灯片——5 段银铬金属渐变满版底，H1 白→钢→枪灰铬色裁切字，72% 白磨砂玻璃卡带 inset 顶部高光，26–36px 巨圆角，糖果紫 #8a5cff / 水蓝 #3ccfd8 / 粉 #ff84c4 accent，光泽圆球与星芒装饰，Space Grotesk 字体。单文件 HTML、键盘翻页、零依赖。基于 lewislulu/html-ppt-skill 的 y2k-chrome 主题。适合产品发布、消费级 App 路演、音乐/时尚/创作者主题等想要千禧年金属光泽的演示。"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "lewislulu",
-    "url": "https://github.com/lewislulu"
-  },
-  "homepage": "https://github.com/lewislulu/html-ppt-skill",
-  "plugin": {
-    "repo": "https://github.com/lewislulu/html-ppt-skill"
-  },
-  "tags": [
-    "community",
-    "deck",
-    "slides",
-    "ppt",
-    "presentation",
-    "y2k",
-    "chrome",
-    "metallic",
-    "frosted-glass",
-    "retro-2000s",
-    "html-ppt"
-  ],
-  "compat": {
-    "agentSkills": [
-      {
-        "path": "./SKILL.md"
-      }
-    ]
-  },
-  "od": {
-    "kind": "scenario",
-    "taskKind": "new-generation",
-    "mode": "deck",
-    "scenario": "product",
-    "surface": "web",
-    "preview": {
-      "type": "html",
-      "entry": "./example.html",
-      "motion": "deck"
-    },
-    "useCase": {
-      "query": {
-        "en": "Create a {{deckType}} for {{audience}} about {{topic}}, {{slideCount}}, as a single-file HTML deck locked to the Y2K Chrome theme (upstream lewislulu/html-ppt-skill `y2k-chrome`). Start from the seed `example.html` and replace slide content only — never rewrite the design system, the token sheet, or the runtime script. Locked visual spec: full-bleed 5-stop silver-metal body gradient `linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%)` on `--bg:#dfe4ec` — keep it on every slide, never paint an opaque slide background over it; every `.h1`/`.chrome-text` headline and display numeral is chrome-clipped with `linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%)` via background-clip:text; cards are 72% white frosted glass `--surface:rgba(255,255,255,.72)` with `backdrop-filter:blur(16px) saturate(140%)`, `--shadow:0 12px 30px rgba(70,90,130,.22), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(80,100,140,.2)` (the inset top highlight is the signature — never drop it) and mega radii `--radius:26px / --radius-sm:16px / --radius-lg:36px`; candy purple `--accent:#8a5cff` leads, aqua `--accent-2:#3ccfd8` and pink `--accent-3:#ff84c4` support; chrome gradient `--grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%)` and pastel `--grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa)` for bars and washes; pills are chrome capsules `linear-gradient(180deg,#fff,#d4dcec)`; text `--text-1:#1a1f2e / --text-2:#4a536a / --text-3:#8590a6` on borders `rgba(120,135,170,.32)` / `rgba(80,100,140,.55)`; 'Space Grotesk' for both display and body (with 'Noto Sans SC' fallback), 'JetBrains Mono' for code. Reuse only the Y2K decor devices already in the seed: glossy candy orbs (radial-gradient spheres with a white specular highlight), 4-point chrome sparkle SVGs, chrome capsule pills, and gradient-washed stat bars — no dark mode, no neon-on-black, no hard offset shadows, no colors or fonts outside this spec. Keep the seed's horizontal scroll-snap `section.slide` scaffold (one 100vw×100vh screen per slide, no internal scrolling, 72px 96px padding), the fixed header/footer chrome with the N / total counter and progress bar, and the keyboard runtime (←/→/Space/PageUp/PageDown/Home/End navigation, #/N hash deep links). Compose pages from the upstream 31-layout catalog (cover → toc → section dividers → content layouts → big-number / chart / quote pages → thanks); rebuild any charts in pure CSS or inline SVG (no chart libraries, no external images or scripts); write real content with no lorem ipsum; put 1–3 sentences of speaker notes in each slide's hidden `.notes` block.",
-        "zh-CN": "为 {{audience}} 制作一套关于 {{topic}} 的 {{deckType}}（{{slideCount}}）：锁定千禧银铬主题的单文件 HTML 幻灯片。从种子 example.html 出发，只替换内容，绝不重写设计系统和运行时脚本。锁定规格：5 段银铬金属渐变满版底（永不覆盖）；H1 与大数字一律白→钢→枪灰铬色裁切字；72% 白磨砂玻璃卡 + blur(16px) + inset 顶部高光（签名元素，不可去掉），巨圆角 26/16/36px；糖果紫 #8a5cff 主 accent，水蓝 #3ccfd8、粉 #ff84c4 辅助；铬渐变 --grad 与粉彩 --grad-soft 只用于图表与高光；Space Grotesk/Noto Sans SC 字体。装饰只用种子里已有的光泽圆球、四角星芒 SVG、铬胶囊 pill。版式从上游 31 版式目录选取，一屏一页不滚动，图表用纯 CSS/SVG 重建，真实内容不用 lorem ipsum，每页在隐藏 .notes 写演讲备注。其余细节遵循英文 query。"
-      },
-      "exampleOutputs": [
-        {
-          "path": "./example.html",
-          "title": "Y2K Chrome · ORBITONE Launch Demo Deck"
-        }
-      ]
-    },
-    "inputs": [
-      {
-        "name": "deckType",
-        "label": "Deck type",
-        "type": "select",
-        "required": true,
-        "options": [
-          "product launch deck",
-          "consumer-app pitch",
-          "brand intro deck",
-          "creator/music deck",
-          "event recap",
-          "tech-sharing deck"
-        ],
-        "default": "product launch deck"
-      },
-      {
-        "name": "topic",
-        "label": "Topic",
-        "type": "string",
-        "required": true,
-        "placeholder": "What the deck is about",
-        "default": "the user's brief"
-      },
-      {
-        "name": "audience",
-        "label": "Audience",
-        "type": "string",
-        "required": true,
-        "placeholder": "Customers, VCs, community, teammates…",
-        "default": "a general audience"
-      },
-      {
-        "name": "slideCount",
-        "label": "Pages",
-        "type": "select",
-        "required": true,
-        "options": [
-          "8-10 pages",
-          "10-15 pages",
-          "15-20 pages"
-        ],
-        "default": "8-10 pages"
-      }
-    ],
-    "context": {
-      "skills": [
-        {
-          "path": "./SKILL.md"
-        }
-      ],
-      "assets": [
-        "./example.html"
-      ]
-    },
-    "pipeline": {
-      "stages": [
-        {
-          "id": "discovery",
-          "atoms": [
-            "discovery-question-form"
-          ]
-        },
-        {
-          "id": "generate",
-          "atoms": [
-            "file-write",
-            "live-artifact"
-          ]
-        }
-      ]
-    },
-    "capabilities": [
-      "prompt:inject",
-      "fs:write"
-    ]
-  }
-}

package/runtime/vendor/plugins/open-design/_official/examples/hr-onboarding/SKILL.md DELETED Viewed

@@ -1,52 +0,0 @@
----
-name: hr-onboarding
-description: |
-  A new-hire onboarding plan as a single page — first week schedule,
-  buddy + manager intro, learning track, equipment checklist, and "you're
-  set when…" outcomes. Use when the brief mentions "onboarding",
-  "new hire", "first week plan", or "入职".
-triggers:
-  - "onboarding"
-  - "new hire"
-  - "first week"
-  - "入职"
-  - "新员工"
-od:
-  mode: prototype
-  platform: desktop
-  scenario: hr
-  preview:
-    type: html
-    entry: index.html
-  design_system:
-    requires: true
-    sections: [color, typography, layout, components]
-  craft:
-    requires: [accessibility-baseline]
-  example_prompt: "Build a 30-day onboarding plan for a new product designer joining a 40-person startup."
----
-# HR Onboarding Skill
-Produce a single-screen onboarding plan in HTML.
-## Workflow
-1. Read the active DESIGN.md.
-2. Identify the role + tenure expectations from the brief. Default to a
-   30/60/90-day shape if unspecified.
-3. Layout:
-   - Cover banner: name placeholder, role, start date, manager + buddy.
-   - "Day 1" panel with the literal schedule (kickoff time, lunch, 1:1 slot).
-   - First-week timeline (Mon → Fri, two activities per day).
-   - 30 / 60 / 90 day milestone cards with three concrete outcomes each.
-   - Resource list: handbook, Slack channels, key dashboards, payroll setup.
-   - "You're set when…" checklist — five outcomes with checkboxes.
-4. Single inline `<style>`, semantic HTML.
-## Output contract
-```
-<artifact identifier="onboarding-plan" type="text/html" title="Onboarding Plan">
-<!doctype html>...</artifact>
-```