npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.0 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

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

package/skills/design-templates/flowai-live-dashboard-template/assets/template.html ADDED Viewed

@@ -0,0 +1,387 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FlowAI Team Dashboard Template</title>
+  <style>
+    :root {
+      --bg: #d9d9de;
+      --app: #f8f8fa;
+      --panel: #fff;
+      --line: #e9e9ed;
+      --text: #1f2128;
+      --muted: #8b8f9a;
+      --hover: #f3f4f7;
+      --accent: #1f2937;
+      --chart-stroke: #1f2937;
+      --chart-fill: rgba(31, 41, 55, 0.16);
+      --chart-axis: #6b7280;
+      --chart-bar-label: #677084;
+      --chart-bar-value: #1f2937;
+    }
+    body.dark {
+      --bg: #0f1218;
+      --app: #171b23;
+      --panel: #1d2430;
+      --line: #2c3442;
+      --text: #ecf0f7;
+      --muted: #9aa3b6;
+      --hover: #242c3a;
+      --accent: #ecf0f7;
+      --chart-stroke: #ecf0f7;
+      --chart-fill: rgba(236, 240, 247, 0.18);
+      --chart-axis: #9aa3b6;
+      --chart-bar-label: #9aa3b6;
+      --chart-bar-value: #ecf0f7;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: Inter, system-ui, sans-serif;
+      background: linear-gradient(180deg, var(--bg), var(--bg));
+      color: var(--text);
+      padding: 22px;
+    }
+    .shell { max-width: 1320px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
+    .top { height: 48px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 12px; background: var(--app); }
+    .top button, .chip { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; height: 30px; padding: 0 10px; cursor: pointer; }
+    .top .actions { display: flex; gap: 6px; }
+    .wrap { padding: 12px; display: grid; gap: 10px; }
+    .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
+    .tab { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); color: var(--muted); }
+    .tab.active { color: var(--text); background: var(--hover); }
+    .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+    .card, .panel { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
+    .card { padding: 10px; cursor: zoom-in; }
+    .card .k { color: var(--muted); font-size: 11px; }
+    .card .v { font-size: 28px; font-weight: 650; margin-top: 4px; }
+    .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
+    .panel { padding: 10px; cursor: zoom-in; }
+    .panel-title { margin-bottom: 8px; font-size: 12px; color: var(--muted); }
+    .table-wrap { overflow-x: auto; }
+    .table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 480px; }
+    .table th, .table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; }
+    .badge { border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; font-size: 11px; }
+    .canvas { width: 100%; height: 180px; border: 1px solid var(--line); border-radius: 8px; background: var(--app); display: block; }
+    .avatars { display: grid; gap: 7px; }
+    .who { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
+    .name { display: flex; align-items: center; gap: 8px; }
+    .av { width: 22px; height: 22px; border-radius: 50%; background: #ced4e6; color: #202431; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
+    .view { display: none; }
+    .view.active { display: block; }
+    .zoomed { position: fixed !important; inset: 8vh 8vw !important; z-index: 99; overflow: auto; cursor: zoom-out; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); }
+    .backdrop { position: fixed; inset: 0; background: rgba(10, 12, 18, 0.55); z-index: 98; }
+    .tooltip { position: fixed; z-index: 120; pointer-events: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; font-size: 11px; padding: 6px 8px; opacity: 0; transition: opacity 0.12s ease; }
+    .tooltip.show { opacity: 1; }
+    @media (max-width: 1300px) {
+      .grid { grid-template-columns: 1fr; }
+      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    @media (max-width: 720px) {
+      body { padding: 12px; }
+      .stats { grid-template-columns: 1fr; }
+      .tabs { gap: 4px; }
+      .tab { flex: 1 1 auto; text-align: center; }
+      .table { font-size: 11px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <div class="top">
+      <b>FlowAI · Team Dashboard</b>
+      <div class="actions">
+        <button id="themeBtn" type="button" aria-label="Toggle theme">Theme</button>
+        <button id="exportBtn" type="button">Export CSV</button>
+      </div>
+    </div>
+    <div class="wrap">
+      <div class="tabs" role="tablist">
+        <button class="tab active" data-view="members" role="tab" aria-selected="true">Team Members</button>
+        <button class="tab" data-view="details" role="tab" aria-selected="false">Team Details</button>
+        <button class="tab" data-view="activity" role="tab" aria-selected="false">Activity Log</button>
+      </div>
+      <div class="stats">
+        <div class="card zoomable"><div class="k">Total Members</div><div class="v">35</div></div>
+        <div class="card zoomable"><div class="k">Active Now</div><div class="v">15</div></div>
+        <div class="card zoomable"><div class="k">Runs Today</div><div class="v">4,210</div></div>
+        <div class="card zoomable"><div class="k">Success Rate</div><div class="v">98.6%</div></div>
+      </div>
+      <section id="members" class="view active">
+        <div class="grid">
+          <div class="panel zoomable">
+            <div class="table-wrap">
+              <table class="table" id="teamTable">
+                <thead>
+                  <tr><th>Name</th><th>Role</th><th>Status</th><th>Workflow</th></tr>
+                </thead>
+                <tbody>
+                  <tr><td>Alexander Montgomery</td><td>Editor</td><td><span class="badge">Active</span></td><td>33%</td></tr>
+                  <tr><td>Nathaniel Richardson</td><td>Owner</td><td><span class="badge">Active</span></td><td>24%</td></tr>
+                  <tr><td>Theodore Whitmore</td><td>Editor</td><td><span class="badge">Pending</span></td><td>--</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="panel zoomable">
+            <div class="panel-title">Online Presence</div>
+            <canvas id="presenceChart" class="canvas" width="360" height="180"></canvas>
+          </div>
+        </div>
+      </section>
+      <section id="details" class="view">
+        <div class="grid">
+          <div class="panel zoomable">
+            <div class="panel-title">Role Distribution</div>
+            <canvas id="roleChart" class="canvas" width="680" height="180"></canvas>
+          </div>
+          <div class="panel zoomable">
+            <div class="panel-title">Top Contributors</div>
+            <div class="avatars">
+              <div class="who"><div class="name"><span class="av">WP</span>William Prescott</div><b>28</b></div>
+              <div class="who"><div class="name"><span class="av">EK</span>Edward Kensington</div><b>24</b></div>
+              <div class="who"><div class="name"><span class="av">OR</span>Oliver Remington</div><b>19</b></div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="activity" class="view">
+        <div class="grid">
+          <div class="panel zoomable">
+            <div class="panel-title">Activity Trend</div>
+            <canvas id="riskChart" class="canvas" width="680" height="180"></canvas>
+          </div>
+          <div class="panel zoomable">
+            <div class="panel-title">Risk Radar</div>
+            <div class="avatars">
+              <div class="who">5 Failed Logins</div>
+              <div class="who">API key Age Exceeded Policy</div>
+              <div class="who">SSO Scope Changed</div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+  <div id="tt" class="tooltip" role="status" aria-live="polite"></div>
+  <script>
+    const charts = {
+      presence: { id: "presenceChart", labels: ["04-25","04-26","04-27","04-28","04-29","04-30","05-01","05-02"], values: [8,11,9,12,14,13,15,12] },
+      risk:     { id: "riskChart",     labels: ["04-26","04-27","04-28","04-29","04-30","05-01","05-02"],         values: [7,10,6,8,11,9,5] },
+      role:     { id: "roleChart",     labels: ["Owner","Admin","Editor","Viewer","Devops"],                       values: [3,14,37,34,6], colors: ["#fac6cd","#d7e5ff","#89b5ff","#c8ccff","#f0dbff"] }
+    };
+    const pts = {};
+    const tt = document.getElementById("tt");
+    let detailsAnimated = false;
+    function chartColors() {
+      const cs = getComputedStyle(document.body);
+      return {
+        stroke: cs.getPropertyValue("--chart-stroke").trim() || "#1f2937",
+        fill:   cs.getPropertyValue("--chart-fill").trim()   || "rgba(31,41,55,.16)",
+        axis:   cs.getPropertyValue("--chart-axis").trim()   || "#6b7280",
+        barLabel: cs.getPropertyValue("--chart-bar-label").trim() || "#677084",
+        barValue: cs.getPropertyValue("--chart-bar-value").trim() || "#1f2937"
+      };
+    }
+    function spark(cfg) {
+      const c = document.getElementById(cfg.id);
+      if (!c) return;
+      const ctx = c.getContext("2d"), w = c.width, h = c.height;
+      const cc = chartColors();
+      const min = Math.min(...cfg.values), max = Math.max(...cfg.values), pad = 18;
+      ctx.clearRect(0, 0, w, h);
+      ctx.beginPath();
+      pts[cfg.id] = [];
+      cfg.values.forEach((v, i) => {
+        const x = pad + (i / (cfg.values.length - 1)) * (w - pad * 2);
+        const y = h - pad - ((v - min) / Math.max(max - min, 1)) * (h - pad * 2);
+        pts[cfg.id].push({ x, y, label: cfg.labels[i], value: v });
+        if (!i) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+      });
+      ctx.strokeStyle = cc.stroke;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+      ctx.lineTo(w - pad, h - pad);
+      ctx.lineTo(pad, h - pad);
+      ctx.closePath();
+      ctx.fillStyle = cc.fill;
+      ctx.fill();
+      pts[cfg.id].forEach((p) => {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 2.5, 0, Math.PI * 2);
+        ctx.fillStyle = cc.stroke;
+        ctx.fill();
+        ctx.fillStyle = cc.axis;
+        ctx.font = "10px Inter";
+        ctx.fillText(String(p.value), p.x - 8, p.y - 8);
+      });
+    }
+    function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
+    function drawBars(progress) {
+      const c = document.getElementById(charts.role.id);
+      if (!c) return;
+      const ctx = c.getContext("2d"), w = c.width, h = c.height;
+      const cc = chartColors();
+      const vals = charts.role.values, labels = charts.role.labels, colors = charts.role.colors, max = Math.max(...vals);
+      const x0 = 28, y0 = 142, bw = 88, gap = 20;
+      ctx.clearRect(0, 0, w, h);
+      pts[c.id] = [];
+      vals.forEach((v, i) => {
+        const hh = (v / max) * 100 * progress;
+        const x = x0 + i * (bw + gap);
+        const cv = Math.round(v * progress);
+        ctx.fillStyle = colors[i];
+        ctx.beginPath();
+        if (typeof ctx.roundRect === "function") ctx.roundRect(x, y0 - hh, bw, hh, 8);
+        else ctx.rect(x, y0 - hh, bw, hh);
+        ctx.fill();
+        ctx.fillStyle = cc.barLabel;
+        ctx.font = "11px Inter";
+        ctx.fillText(labels[i], x + 8, 165);
+        ctx.fillStyle = cc.barValue;
+        ctx.fillText(cv + "%", x + 27, y0 - hh - 8);
+        pts[c.id].push({ x: x + bw / 2, y: y0 - hh, label: labels[i], value: v + "%" });
+      });
+    }
+    function animateBars() {
+      const dur = 800, start = performance.now();
+      function frame(ts) {
+        const p = easeOutCubic(Math.min((ts - start) / dur, 1));
+        drawBars(p);
+        if (p < 1) requestAnimationFrame(frame);
+      }
+      requestAnimationFrame(frame);
+    }
+    function redrawAll() {
+      spark(charts.presence);
+      spark(charts.risk);
+      if (detailsAnimated) drawBars(1);
+    }
+    function showTip(txt, x, y) {
+      tt.textContent = txt;
+      const pad = 12;
+      const tw = tt.offsetWidth || 120, th = tt.offsetHeight || 24;
+      let left = x + 10, top = y + 10;
+      if (left + tw + pad > window.innerWidth)  left = x - tw - 10;
+      if (top  + th + pad > window.innerHeight) top  = y - th - 10;
+      tt.style.left = left + "px";
+      tt.style.top  = top  + "px";
+      tt.classList.add("show");
+    }
+    function hideTip() { tt.classList.remove("show"); }
+    function bindTooltip(id) {
+      const c = document.getElementById(id);
+      if (!c) return;
+      c.addEventListener("mousemove", (e) => {
+        const p = pts[id] || [];
+        if (!p.length) return;
+        const r = c.getBoundingClientRect();
+        const x = (e.clientX - r.left) * (c.width / r.width);
+        const y = (e.clientY - r.top)  * (c.height / r.height);
+        let hit = null, d = 999;
+        p.forEach((pt) => {
+          const dd = Math.hypot(pt.x - x, pt.y - y);
+          if (dd < d) { d = dd; hit = pt; }
+        });
+        if (hit && d < 20) showTip(`${hit.label} · ${hit.value}`, e.clientX, e.clientY);
+        else hideTip();
+      });
+      c.addEventListener("mouseleave", hideTip);
+    }
+    function setView(v) {
+      document.querySelectorAll(".view").forEach((el) => el.classList.remove("active"));
+      const target = document.getElementById(v);
+      if (target) target.classList.add("active");
+      document.querySelectorAll(".tab").forEach((t) => {
+        const on = t.dataset.view === v;
+        t.classList.toggle("active", on);
+        t.setAttribute("aria-selected", on ? "true" : "false");
+      });
+      if (window.location.hash !== "#" + v) {
+        history.replaceState(null, "", "#" + v);
+      }
+      if (v === "details") {
+        if (!detailsAnimated) { animateBars(); detailsAnimated = true; }
+        else drawBars(1);
+      }
+    }
+    function bindZoom() {
+      let zoomed = null;
+      function unzoom() {
+        if (zoomed) zoomed.classList.remove("zoomed");
+        document.querySelector(".backdrop")?.remove();
+        zoomed = null;
+      }
+      document.querySelectorAll(".zoomable").forEach((el) => {
+        el.addEventListener("click", (e) => {
+          if (e.target.closest("button, input, select, a")) return;
+          if (zoomed === el) { unzoom(); return; }
+          unzoom();
+          const b = document.createElement("div");
+          b.className = "backdrop";
+          b.onclick = unzoom;
+          document.body.appendChild(b);
+          el.classList.add("zoomed");
+          zoomed = el;
+        });
+      });
+      document.addEventListener("keydown", (e) => { if (e.key === "Escape") unzoom(); });
+    }
+    function exportCsv() {
+      const table = document.getElementById("teamTable");
+      if (!table) return;
+      const rows = [];
+      const headerCells = table.querySelectorAll("thead th");
+      rows.push([...headerCells].map((th) => th.textContent.trim()));
+      table.querySelectorAll("tbody tr").forEach((tr) => {
+        rows.push([...tr.querySelectorAll("td")].map((td) => td.innerText.trim().replace(/\s+/g, " ")));
+      });
+      const csv = rows
+        .map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(","))
+        .join("\n");
+      const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = "flowai-team.csv";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(a.href);
+    }
+    document.querySelectorAll(".tab").forEach((t) => t.addEventListener("click", () => setView(t.dataset.view)));
+    document.getElementById("themeBtn").onclick = () => {
+      document.body.classList.toggle("dark");
+      redrawAll();
+    };
+    document.getElementById("exportBtn").onclick = exportCsv;
+    spark(charts.presence);
+    spark(charts.risk);
+    bindTooltip("presenceChart");
+    bindTooltip("riskChart");
+    bindTooltip("roleChart");
+    bindZoom();
+    const initial = (window.location.hash || "#members").slice(1);
+    setView(["members", "details", "activity"].includes(initial) ? initial : "members");
+  </script>
+</body>
+</html>

package/skills/design-templates/flowai-live-dashboard-template/example.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>FlowAI Team Dashboard Example</title>
+  <style>html,body{margin:0;height:100%}iframe{width:100%;height:100%;border:0}</style>
+</head>
+<body>
+  <!-- default showcase sample for template submission -->
+  <iframe src="./assets/template.html" title="FlowAI Team Dashboard Example"></iframe>
+</body>
+</html>

package/skills/design-templates/flowai-live-dashboard-template/references/checklist.md ADDED Viewed

@@ -0,0 +1,35 @@
+# Checklist
+## P0
+- `assets/template.html` exists and opens directly from disk in a browser.
+- `example.html` is a complete, hand-built sample with real labels, names, and values.
+- Skill frontmatter is `od.mode: prototype`, `od.scenario: operations`,
+  `od.preview.type: html`, `od.design_system.requires: true`.
+- All three tabs (`Team Members`, `Team Details`, `Activity Log`) switch
+  correctly; only one view is visible at a time.
+- Role bar chart animates with easing on first reveal of the details tab.
+- Chart hover tooltips show precise label and value.
+- Panels/cards zoom in/out via click; clicking the backdrop or pressing
+  Esc restores the layout.
+- Dark mode toggle works and chart strokes/labels remain legible (chart
+  colors are re-derived from CSS variables on toggle, not baked in).
+- No external avatar / photo CDN dependencies; avatars are inline SVG or
+  initial badges.
+## P1
+- "Export CSV" exports every row currently rendered in the team table,
+  including the `Workflow` column (driven by the table DOM, not a hardcoded
+  fixture).
+- Layout collapses gracefully on narrow viewports: under 1300px the main
+  grid stacks to a single column and stat cards fall back to two columns;
+  under 720px stat cards stack to one column and tabs wrap.
+- Colors and spacing inherit from root tokens / CSS variables; no
+  hardcoded hex values inside chart drawing code.
+## P2
+- Tooltip avoids viewport edge clipping.
+- Chart values animate smoothly on re-render after a theme switch.
+- Tab state is reflected in the URL hash and survives a refresh.

package/skills/design-templates/gamified-app/SKILL.md ADDED Viewed

@@ -0,0 +1,108 @@
+---
+name: gamified-app
+description: |
+  A multi-frame gamified mobile-app prototype — three phone frames on a dark
+  showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP
+  ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level
+  ribbon, bottom tab bar. Use when the brief asks for a "gamified app",
+  "habit tracker", "RPG-style life app", "level-up app", "daily quests",
+  "XP / streak app", or "ELI5-style explainer app".
+triggers:
+  - "gamified app"
+  - "habit tracker"
+  - "rpg app"
+  - "level up app"
+  - "daily quests"
+  - "xp app"
+  - "streak app"
+  - "life management app"
+  - "游戏化"
+  - "习惯打卡"
+od:
+  mode: prototype
+  platform: mobile
+  scenario: personal
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [state-coverage, animation-discipline]
+  example_prompt: "Design a gamified life-management app — multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail. ‘Daily quests for becoming a better human.’"
+---
+# Gamified App Skill
+Produce a multi-screen mobile prototype on a single dark showcase page.
+Three phone frames side-by-side, each one its own moment in the journey.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). For gamified apps, lean
+   on bold display type for headlines and a brighter, broader palette than
+   most products — quests look like quests because the colors do.
+2. **Pick the brand + value prop** from the brief. Generate real quest
+   names (e.g. "Body — 20-min strength: pushups & planks", "Read — Four
+   Thousand Weeks", "Listen — Huberman Lab · Sleep Architecture",
+   "Nourish — Cook a high-protein lunch", "Mind — 10-min focus
+   meditation", "Watch — The Bear · S3 E4").
+3. **Stage** — full-bleed dark page (near-black `#0e0d0c` or DS dark token)
+   with a soft top spotlight gradient. Above the phones, a small caption
+   row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
+4. **Phones** — three 360×780 phone frames in a horizontal row (wraps to
+   stack on narrow viewports). Each phone:
+   - 12px black bezel, 44px corner radius, dynamic-island notch.
+   - Status bar (time / signal / battery).
+   - Phone-specific content (below).
+   - Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA,
+     Profile). Active tab in accent.
+5. **Phone 1 — cover poster (sales/value prop)**:
+   - Status bar.
+   - HI-FI PROTOTYPE · IPHONE eyebrow.
+   - Big display headline ("Daily quests for becoming a better human."),
+     accent on "becoming".
+   - 1–2 sentence body in muted serif/sans.
+   - Mono tip line ("Tap quests to open detail. Toggle [theme] in the
+     toolbar to switch theme & layout.")
+   - Subtle scrolling teaser of the next screen at the bottom edge.
+6. **Phone 2 — today's quests dashboard** (the hero screen):
+   - Greeting "Good morning, Sam" + small XP-bell ringing.
+   - Level ribbon — "LV 14 · Level 14 · 1648 / 2480 XP" with a progress
+     bar inside a glassmorphic ribbon.
+   - Sub-line: "8 quests waiting · earn 430 XP today".
+   - 3×2 grid of quest tiles. Each tile: rounded corner, pastel accent
+     color, glyph chip in top-left, title, mini-meta line, "+NN XP" pill
+     in bottom-right.
+   - Bottom tab bar.
+7. **Phone 3 — quest detail**:
+   - Back arrow + screen title ("Quest").
+   - Hero block with the quest's accent color, big serif quest title
+     ("Body — strength"), short narrative body, "REWARD +90 XP" stamp.
+   - Steps checklist (3–4 micro-tasks, one done, two pending).
+   - Big primary CTA "Start quest" pill at the bottom in accent.
+8. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, CSS inline.
+   - All in CSS — no images. Use `linear-gradient` and inline SVG glyphs
+     for tile chips and tab icons.
+   - `data-od-id` on stage, each phone, each frame's regions.
+9. **Self-check**:
+   - Three frames, each with a distinct purpose. Not three copies of the
+     same screen.
+   - Tile colors don't overpower — each quest tile uses a different pastel
+     against the same neutral surface.
+   - Reads as gamified and adult — playful, not childish.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.