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

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

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

package/dist/__w3kits/assets/design-templates/simple-deck/references/layouts.md ADDED Viewed

@@ -0,0 +1,201 @@
+# Simple deck slide layouts
+**8 paste-ready slide skeletons.** Drop into `<body>` of `assets/template.html`. Don't write slides from scratch — pick the closest layout, paste, swap copy.
+## Pre-flight
+1. **Read `assets/template.html`** end-to-end — every class below is defined in its `<style>` block. The fixed counter, progress bar, hint, and the 5-rule nav script at the bottom are already wired up; do not re-implement them.
+2. **Plan the slide list AND theme rhythm before pasting any slide.** See "Theme rhythm" below — this is the single biggest determinant of whether the deck feels alive or sleepy.
+3. **Read the active DESIGN.md** — map its tokens to the six `:root` variables in the seed.
+## Theme rhythm — the rule that prevents 6-slide sleep
+Every `<section class="slide">` MUST include exactly one of:
+- `light` — default white-paper surface
+- `dark` — inverted, fg-on-bg
+- `hero light` — same as light + extra padding (for cover, big stat, big quote)
+- `hero dark` — same as dark + extra padding
+**Rules:**
+- No 3+ same-theme slides in a row. `light light light` → boring.
+- For decks with **8+ slides**: at least one `hero dark` AND at least one `hero light`.
+- A `dark` slide every 3–4 slides creates the "breath" that makes the next light slide hit harder.
+- The cover is almost always `hero light`. The closing is often `hero dark` or `hero light`.
+Before emitting, run mentally: list every slide's class. If you see `light × 5 in a row`, change one to `dark`.
+## Class inventory
+> `slide` `light` `dark` `hero` `center` `eyebrow` `h-hero` `h-xl` `h-md` `lead` `meta` `stat-num` `unit` `stat-caption` `quote-mark` `quote-text` `quote-author` `pt-grid` `pt` `pipeline` `step` `nb` `ba-grid` `ba-col` `ba-label` `ph-img` `wide` `tall`
+If you reach for a class not on this list, define it in the seed's `<style>` first.
+---
+## Layout 1 — Cover (slide 1)
+`hero light center`. One eyebrow with date/context, one big serif headline (≤ 8 words for the punch), one lead sentence.
+```html
+<section class="slide hero light center" data-screen-label="01 Cover">
+  <div class="eyebrow">Filebase · Series B · Q2 2026</div>
+  <h1 class="h-hero">The bandwidth bill is the bug.</h1>
+  <p class="lead">A sync engine that ships only what changed. Backed by 3,184 paying teams.</p>
+</section>
+```
+## Layout 2 — Body slide (eyebrow + headline + lead)
+The workhorse. Use 3–6× per deck. Vary `light` / `dark` for rhythm.
+```html
+<section class="slide light" data-screen-label="04 Why now">
+  <p class="eyebrow">Why now</p>
+  <h2 class="h-xl">Three shifts make this market real.</h2>
+  <p class="lead">Remote post-production. AI workflows. Bandwidth pricing up 4× since 2022. Storage is cheap; movement is expensive.</p>
+</section>
+```
+## Layout 3 — Big stat (data billboard)
+`hero light center` or `hero dark center`. One number. Don't put 3 numbers on one slide — split into 3 stat slides.
+```html
+<section class="slide hero dark center" data-screen-label="05 Big stat">
+  <div class="stat-num">38<span class="unit">×</span></div>
+  <p class="stat-caption">less data moved over the wire vs. naive sync, on real customer workloads.</p>
+</section>
+```
+## Layout 4 — Three-point row
+A small headline above three rule-topped points. Each point ≤ 2 sentences.
+```html
+<section class="slide light" data-screen-label="04 Why now">
+  <p class="eyebrow">Why now</p>
+  <h2 class="h-xl">Three shifts make this market real.</h2>
+  <div class="pt-grid">
+    <div class="pt">
+      <h3>Remote post-production</h3>
+      <p>Editors don't sit in one room any more. Cloud sync went from convenient to load-bearing.</p>
+    </div>
+    <div class="pt">
+      <h3>AI workflows</h3>
+      <p>Diffusion checkpoints are 7 GB. Engineers iterate on them daily. Existing tools choke.</p>
+    </div>
+    <div class="pt">
+      <h3>Bandwidth pricing</h3>
+      <p>Egress costs 4× what it did in 2022. Storage is cheap; movement is expensive.</p>
+    </div>
+  </div>
+</section>
+```
+## Layout 5 — Pipeline (numbered steps)
+Workflow / process / how-it-works. Up to 4 steps; if you need more, split across two slides.
+```html
+<section class="slide dark" data-screen-label="06 Pipeline">
+  <p class="eyebrow">How it works</p>
+  <h2 class="h-md">Four passes, end to end.</h2>
+  <div class="pipeline">
+    <div class="step">
+      <span class="nb">01</span>
+      <h3>Watch</h3>
+      <p>FS events from kernel, debounced 50ms.</p>
+    </div>
+    <div class="step">
+      <span class="nb">02</span>
+      <h3>Chunk</h3>
+      <p>Content-defined splitting, ~64KB target.</p>
+    </div>
+    <div class="step">
+      <span class="nb">03</span>
+      <h3>Diff</h3>
+      <p>Bloom-filtered hash compare against remote.</p>
+    </div>
+    <div class="step">
+      <span class="nb">04</span>
+      <h3>Ship</h3>
+      <p>Only the chunks the remote doesn't have.</p>
+    </div>
+  </div>
+</section>
+```
+## Layout 6 — Big quote / pull quote
+`hero light center`. One quote, one attribution. Italic-feel via the serif display, not actual `<em>`.
+```html
+<section class="slide hero light center" data-screen-label="07 Quote">
+  <div class="quote-mark">"</div>
+  <p class="quote-text">Filebase pays for itself in the first month. We were going to hire a dedicated DevOps person — instead we just switched.</p>
+  <p class="quote-author">— Mira Hassan, CTO at Northwind Studios</p>
+</section>
+```
+## Layout 7 — Before / after (comparison)
+Two columns, same shape, contrasting state. Don't decorate the columns — the contrast comes from copy and from picking one column to tint with the accent.
+```html
+<section class="slide light" data-screen-label="08 Before / after">
+  <p class="eyebrow">The shift</p>
+  <h2 class="h-md">From whole-file sync to chunk-level sync.</h2>
+  <div class="ba-grid">
+    <div class="ba-col">
+      <p class="ba-label">Before · 2022</p>
+      <h3>Edit one frame, ship the whole 4 GB project.</h3>
+      <p>$1,800 / month bandwidth bill on a single Final Cut workflow. Editors waiting 12 minutes per save.</p>
+    </div>
+    <div class="ba-col">
+      <p class="ba-label" style="color: var(--accent);">After · 2026</p>
+      <h3>Edit one frame, ship 240 KB.</h3>
+      <p>$200 / month on the same workflow. Save-to-remote completes inside the editor's auto-save window.</p>
+    </div>
+  </div>
+</section>
+```
+## Layout 8 — Closing / CTA
+`hero dark center` or `hero light center`. One sentence on the ask, one supporting line. The audience leaves remembering this.
+```html
+<section class="slide hero dark center" data-screen-label="09 Ask">
+  <div class="eyebrow">Ask</div>
+  <h2 class="h-hero">$22M to ship the next sync engine.</h2>
+  <p class="lead">18-month runway, hire 14, expand to enterprise on-prem.</p>
+</section>
+```
+---
+## Default arcs
+**6-slide pitch (the minimum):**
+1. `hero light center` — Cover (Layout 1)
+2. `light`            — Problem body (Layout 2)
+3. `hero dark center` — Big stat (Layout 3)
+4. `light`            — Three points (Layout 4)
+5. `hero light center`— Quote (Layout 6)
+6. `hero dark center` — Ask (Layout 8)
+**10-slide narrative:**
+1. `hero light center` — Cover
+2. `light`            — Problem
+3. `hero dark center` — Big stat 1
+4. `light`            — Three points
+5. `dark`             — Pipeline (Layout 5)
+6. `hero light center`— Quote
+7. `light`            — Before / after (Layout 7)
+8. `hero dark center` — Big stat 2
+9. `light`            — Team / metrics
+10. `hero dark center`— Ask
+After laying out, mentally read the class list — `light dark light dark` should show alternation, not blocks of the same theme.

package/dist/__w3kits/assets/design-templates/social-carousel/SKILL.md ADDED Viewed

@@ -0,0 +1,92 @@
+---
+name: social-carousel
+description: |
+  A three-card social-media carousel laid out as 1080×1080 squares —
+  three cinematic, on-brand panels with display headlines that connect
+  across the series ("onwards." → "to the next one." → "looking ahead.").
+  Each card has a brand mark, a number / total, a caption, and a "loop"
+  affordance. Use when the brief asks for a "carousel post", "social
+  carousel", "Instagram carousel", "LinkedIn series", "X thread cards",
+  or "三连发".
+triggers:
+  - "social carousel"
+  - "carousel post"
+  - "instagram carousel"
+  - "linkedin carousel"
+  - "x thread cards"
+  - "social series"
+  - "三连发"
+  - "轮播图"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  featured: 7
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready."
+---
+# Social Carousel Skill
+Produce a 3-panel social carousel on a single dark stage. Each panel is a
+1080×1080 cinematic still — connected as a series, but each readable on its
+own.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Pick the loudest serif
+   token for the headline lockups and a mono token for stamps / counters.
+2. **Pick the theme + 3 captions** from the brief. The captions must read
+   as one sentence when stacked: ("onwards." → "to the next one." →
+   "looking ahead." or "input." → "iterate." → "ship.").
+3. **Stage** — full-bleed dark page. Top header strip:
+   - Left: serif italic display "Three posts. One beat."
+   - Just below the title: a one-line description in muted mono ("1080×1080
+     · cinematic video loops · minimal type. Drop into Instagram, LinkedIn,
+     or X — each post stands on its own or runs as a three-part series.").
+   - Right: small mono badge "SERIES · 01 → 03".
+4. **Cards** — 3 squares in a horizontal row (wraps to stack on narrow
+   viewports). Each card is `aspect-ratio: 1 / 1` with rounded 12px corners
+   and a subtle 1px border, plus a soft drop shadow.
+   - Background: a layered gradient that *suggests* a cinematic photo — for
+     example, panel 1 = warm dawn meadow (stacked greens with a cyan sky
+     wash); panel 2 = forest dusk (warm oranges fading into deep teals);
+     panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky).
+     Use `radial-gradient` + `linear-gradient` only — no images.
+   - Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a
+     small accent dot.
+   - Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).
+   - Bottom-left: the headline lockup in white serif display, italic accent
+     on one word.
+   - Bottom-right corner: a `1× LOOP` mono stamp inside a thin border.
+   - Bottom strip caption: small caps mono describing the imagined frame
+     ("Man, walking forward — close.", "Woman, stepping into frame.",
+     "Woman, overlooking the city.").
+5. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, CSS inline.
+   - Cards are sized via `width: clamp(280px, 30vw, 380px)` so 3 fit
+     comfortably across most desktops and stack at < 1100px.
+   - `data-od-id` on stage, each card, each headline.
+6. **Self-check**:
+   - The three headlines together form one sentence and feel cinematic.
+   - Mono is used only for the wordmark index, the loop stamp, and the
+     bottom captions. The headlines stay serif.
+   - Each panel's color story is distinct — no two share a dominant hue.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.

package/dist/__w3kits/assets/design-templates/social-carousel/example.html ADDED Viewed

@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Three posts. One beat. — social carousel</title>
+  <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=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --stage: #0a0a0a;
+      --stage-2: #141414;
+      --paper: #f4ede0;
+      --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,255,255,0.04), transparent 70%),
+        var(--stage);
+      color: #f4ede0;
+      font: 14px/1.5 -apple-system, system-ui, sans-serif;
+    }
+    .stage {
+      max-width: 1280px; margin: 0 auto; padding: 60px 32px 80px;
+    }
+    .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
+    .stage-head h1 { margin: 0; font: italic 700 36px/1 var(--serif); letter-spacing: -0.005em; }
+    .stage-head h1 em { font-style: normal; }
+    .stage-head h1 .dot { color: #a4a09a; }
+    .stage-head .lede { margin: 8px 0 0; font: 11px/1.6 var(--mono); color: rgba(244,237,224,0.5); letter-spacing: 0.06em; max-width: 60ch; text-transform: uppercase; }
+    .stage-head .badge { font: 10.5px/1 var(--mono); padding: 7px 10px; border: 1px solid rgba(244,237,224,0.3); color: rgba(244,237,224,0.7); letter-spacing: 0.18em; flex-shrink: 0; }
+    .row { display: flex; gap: 22px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
+    .card {
+      width: clamp(280px, 30vw, 380px);
+      aspect-ratio: 1 / 1;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,0.06);
+      box-shadow: 0 30px 60px rgba(0,0,0,0.45);
+      position: relative;
+      overflow: hidden;
+      color: #ffffff;
+    }
+    .card .scrim {
+      position: absolute; inset: 0;
+      background:
+        linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
+      pointer-events: none;
+    }
+    .card .top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
+    .card .brand { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border-radius: 999px; }
+    .card .brand .name { font: italic 700 13px/1 var(--serif); }
+    .card .brand .dot { width: 5px; height: 5px; background: var(--paper); border-radius: 50%; opacity: 0.9; }
+    .card .index { font: 11px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.16em; text-align: right; padding: 6px 10px; background: rgba(0,0,0,0.30); backdrop-filter: blur(4px); border-radius: 4px; }
+    .card .lockup { position: absolute; left: 22px; right: 22px; bottom: 78px; }
+    .card .lockup h2 { margin: 0; font: 700 60px/1 var(--serif); letter-spacing: -0.005em; color: #ffffff; }
+    .card .lockup h2 em { font-style: italic; }
+    .card .lockup h2 .accent { font-style: italic; }
+    .card .footer { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; }
+    .card .footer .caption { font: 10.5px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase; max-width: 70%; }
+    .card .loop { font: 10.5px/1 var(--mono); padding: 6px 8px; border: 1px solid rgba(255,255,255,0.55); border-radius: 4px; color: rgba(255,255,255,0.85); letter-spacing: 0.18em; }
+    /* Card 1 — dawn meadow, blue sky */
+    .card.c1 {
+      background:
+        linear-gradient(180deg, #5b8cb6 0%, #92aebd 32%, #b0a679 50%, #6f8a4d 70%, #2a4a2a 100%),
+        #4a6a8a;
+    }
+    .card.c1 .figure {
+      position: absolute; left: 50%; top: 56%;
+      width: 80px; height: 200px;
+      transform: translate(-50%, 0);
+      background:
+        radial-gradient(ellipse 30px 14px at 50% 30%, #2a1f15 0%, #2a1f15 60%, transparent 70%),
+        linear-gradient(180deg, #2a1f15 0%, #4a3018 22%, #6a3a1a 60%, transparent 100%);
+      filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
+      clip-path: polygon(35% 0%, 65% 0%, 78% 26%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 22% 26%);
+      opacity: 0.92;
+    }
+    /* Card 2 — forest dusk, warm orange center */
+    .card.c2 {
+      background:
+        radial-gradient(ellipse 80% 50% at 50% 100%, #f49255 0%, #c95a30 35%, transparent 60%),
+        radial-gradient(ellipse 80% 80% at 50% 90%, rgba(255,180,120,0.5), transparent 60%),
+        linear-gradient(180deg, #1c2a25 0%, #2a3a30 30%, #4a3a26 70%, #2a1a14 100%);
+    }
+    .card.c2 .trees {
+      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+    }
+    .card.c2 .trees::before, .card.c2 .trees::after {
+      content: ''; position: absolute; bottom: 0; width: 50%; height: 70%;
+      background:
+        radial-gradient(circle at 20% 90%, #0f1a14 6px, transparent 7px),
+        radial-gradient(circle at 50% 88%, #0f1a14 8px, transparent 9px),
+        radial-gradient(circle at 80% 92%, #0f1a14 6px, transparent 7px);
+    }
+    .card.c2 .trees::before { left: 0; background:
+      linear-gradient(180deg, transparent 0%, transparent 30%, rgba(15,26,20,0.85) 30%, #0f1a14 100%);
+      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
+    }
+    .card.c2 .trees::after { right: 0; background:
+      linear-gradient(180deg, transparent 0%, transparent 36%, rgba(15,26,20,0.85) 36%, #0f1a14 100%);
+      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
+    }
+    .card.c2 .figure {
+      position: absolute; left: 52%; top: 56%; width: 56px; height: 130px;
+      transform: translate(-50%, 0);
+      background: linear-gradient(180deg, #2a1810 0%, #4a2818 100%);
+      clip-path: polygon(40% 0%, 60% 0%, 70% 22%, 70% 56%, 65% 100%, 35% 100%, 30% 56%, 30% 22%);
+      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
+    }
+    /* Card 3 — pink ridge / mountain */
+    .card.c3 {
+      background:
+        linear-gradient(180deg, #1b1e3a 0%, #4a3956 28%, #c9627e 60%, #d57f86 75%, #b8d2d8 100%);
+    }
+    .card.c3 .ridge {
+      position: absolute; inset: 0;
+      background:
+        linear-gradient(180deg, transparent 60%, rgba(60,30,40,0.4) 80%, rgba(40,20,30,0.7) 100%);
+    }
+    .card.c3 .ridge::before {
+      content: ''; position: absolute; left: 0; right: 0; bottom: 24%;
+      height: 30%;
+      background:
+        linear-gradient(180deg, #b3526a 0%, #7a3148 100%);
+      clip-path: polygon(0% 60%, 12% 30%, 22% 50%, 36% 18%, 50% 40%, 60% 22%, 72% 48%, 86% 26%, 100% 50%, 100% 100%, 0% 100%);
+    }
+    .card.c3 .ridge::after {
+      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
+      height: 32%;
+      background: linear-gradient(180deg, #2a1f2a 0%, #1a1018 100%);
+      clip-path: polygon(0% 50%, 8% 20%, 18% 38%, 30% 8%, 44% 32%, 56% 12%, 68% 36%, 82% 18%, 100% 40%, 100% 100%, 0% 100%);
+    }
+    .card.c3 .figure {
+      position: absolute; right: 18%; bottom: 14%; width: 30px; height: 56px;
+      background: #1a0d12;
+      clip-path: polygon(35% 0%, 65% 0%, 75% 30%, 60% 100%, 40% 100%, 25% 30%);
+      filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
+    }
+    @media (max-width: 1180px) {
+      .row { flex-direction: column; align-items: center; }
+      .card { width: min(96vw, 480px); }
+      .card .lockup h2 { font-size: 56px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="stage" data-od-id="stage">
+    <div class="stage-head">
+      <div>
+        <h1>Three posts<span class="dot">.</span> One <em>beat</em><span class="dot">.</span></h1>
+        <p class="lede">1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.</p>
+      </div>
+      <span class="badge">SERIES · 01 → 03</span>
+    </div>
+    <div class="row" data-od-id="cards">
+      <article class="card c1" data-od-id="card-1">
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">01 · ONWARDS</div>
+        </div>
+        <div class="lockup"><h2>onwards<em>.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Man, walking forward — close.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+      <article class="card c2" data-od-id="card-2">
+        <div class="trees"></div>
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">02 · TO THE NEXT ONE</div>
+        </div>
+        <div class="lockup"><h2><span class="accent">to the</span><br/><em>next one.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Woman, stepping into frame.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+      <article class="card c3" data-od-id="card-3">
+        <div class="ridge"></div>
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">03 · LOOKING AHEAD</div>
+        </div>
+        <div class="lockup"><h2>looking<br/><em>ahead.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Woman, overlooking the city.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+    </div>
+  </div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/social-media-dashboard/.preview/hero.png ADDED Viewed

Binary file

package/dist/__w3kits/assets/design-templates/social-media-dashboard/SKILL.md ADDED Viewed

@@ -0,0 +1,118 @@
+---
+name: social-media-dashboard
+description: |
+  Creator-facing social media analytics dashboard in a single HTML file.
+  A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI
+  cards (followers, engagement rate, likes, reposts), a follower-growth
+  chart, a "top post this week" preview, and a trending topics / top
+  comments side panel. Use when the brief mentions a "social media
+  dashboard", "creator analytics", "social analytics", or names specific
+  platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together
+  with metrics like followers, engagement, likes, reposts.
+triggers:
+  - "social media dashboard"
+  - "social analytics"
+  - "creator dashboard"
+  - "creator analytics"
+  - "social media analytics"
+  - "社媒后台"
+  - "创作者后台"
+  - "社交媒体仪表盘"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: creator
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments."
+---
+# Social Media Dashboard Skill
+Produce a single-screen, creator-facing social media analytics dashboard.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Colors, typography,
+   spacing, radii, and component styling all come from it. Do not invent
+   new tokens; do not hard-code brand colors of the platforms — let the
+   DESIGN.md carry the visual identity, and reference platforms only by
+   name and monogram.
+2. **Identify** which platforms the brief calls out. Default to
+   X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform
+   switcher to a single row, max 5 entries.
+3. **Generate plausible data**, never `Metric A / Metric B` placeholders.
+   Pick a creator persona (default: "AI / design indie creator") and
+   derive consistent numbers across the page — e.g. follower counts on
+   the switcher must match the KPI row when X is selected.
+4. **Lay out** the page top-to-bottom:
+   - **Header bar**: brand mark + section label ("ANALYTICS"), a
+     dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a
+     creator avatar block on the right.
+   - **Hero strip**: a one-sentence summary in display type
+     ("You shipped 14 posts on X this week."), one supporting line of
+     metadata, and two CTAs ("Export report", "New post →").
+   - **Ask bar**: a single-line input styled as a search field, with
+     ghost-text suggestions ("top performing last week",
+     "comments from verified accounts").
+   - **Platform switcher**: 4 cards in one row, each with platform
+     monogram, name, follower count, and a `+X.XK this week` delta. The
+     active platform uses an elevated surface from DESIGN.md.
+   - **KPI row**: 4 cards — Followers · Engagement Rate · Likes (7D) ·
+     Reposts (7D). Each card has a label (uppercase, label-md), a big
+     value (display or headline-lg), a delta vs prior period, and a
+     small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
+   - **Main grid (2/3 + 1/3)**:
+     - Left: **Follower Growth · 30D** — a full-width inline SVG line
+       chart with a soft area fill underneath, axis ticks at start /
+       midpoint / end, and two labelled annotation dots
+       ("Newsletter drop +842", "Viral thread +1.2K").
+     - Right: **Top Post · This Week** — a card showing the rendered
+       post (avatar, handle, post body, optional 16:9 media block), with
+       a header tag "click-through rate 5.6%" in the DS accent.
+   - **Lower grid (1/2 + 1/2)**:
+     - **Trending topics on this platform**: 5–7 chip-style rows with
+       topic name + post count + 24h delta sparkline (10 polyline
+       points, no labels).
+     - **Top comments**: 3 cards, each with avatar, handle (verified
+       check if relevant), comment body (2 lines max, ellipsised), and
+       a small `❤ 312 · 💬 18` row in muted text.
+5. **Write** one self-contained HTML document:
+   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
+   - CSS Grid for page-level layout; Flexbox inside cards.
+   - Semantic HTML: `<header>`, `<main>`, `<section>`, `<article>`.
+   - Tag each logical region with `data-od-id="slug"` for comment mode:
+     `header`, `hero`, `ask`, `platform-switcher`, `kpis`,
+     `follower-growth`, `top-post`, `trending`, `top-comments`.
+6. **Charts**: inline SVG only, no JS libraries.
+   - Line chart: `<path>` for the curve, a second `<path>` with low-alpha
+     fill for the area, two `<circle>` annotation dots with text labels.
+   - Sparklines: `<polyline>` with 10 points, no axes, ~16px tall.
+   - Use the DS accent for highlights and the DS `on-surface-variant` for
+     muted text. Accent appears at most three times on the page.
+7. **Self-check**:
+   - Every color resolves to a DESIGN.md token (or a documented
+     `rgba(token, alpha)` for glass surfaces).
+   - Numbers are internally consistent (switcher follower count matches
+     the active platform's KPI).
+   - Header bar and hero strip are sticky; main content scrolls.
+   - Density follows the DS mood: glass / cosmic DSes get more breathing
+     room and ambient glow on the active platform; clean / corporate DSes
+     tighten gaps and drop the glow.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.