npm - @tienne/gestalt - Versions diffs - 0.17.0 → 0.18.0 - Mend

@tienne/gestalt 0.17.0 → 0.18.0

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

package/role-agents/presentation-designer/templates/studio.html ADDED Viewed

@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Studio — Reveal.js</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=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    /* ── DESIGN TOKENS ────────────────────────────────────────────── */
+    :root {
+      --c-bg:           #1c1c1c;
+      --c-bg-alt:       #242422;
+      --c-bg-light:     #f5d200;
+      --c-bg-light-alt: #f0cc00;
+      --c-fg:           #f5d200;
+      --c-fg-2:         rgba(245, 210, 0, 0.58);
+      --c-fg-3:         rgba(245, 210, 0, 0.32);
+      --c-fg-light:     #1c1c1c;
+      --c-fg-light-2:   rgba(28, 28, 28, 0.62);
+      --c-fg-light-3:   rgba(28, 28, 28, 0.35);
+      --c-accent:       #f5d200;
+      --c-border:       #2e2e2c;
+      --c-border-light: rgba(28, 28, 28, 0.18);
+      --f-display: "Barlow", sans-serif;
+      --f-body:    "Barlow", sans-serif;
+      --f-mono:    "IBM Plex Mono", monospace;
+      --sz-display: 12vw;
+      --sz-h1:  7.5vw;
+      --sz-h2:  4.8vw;
+      --sz-h3:  2.8vw;
+      --sz-lead:  1.6vw;
+      --sz-body:  1.15vw;
+      --sz-caption: 0.85vw;
+      --sz-label:   0.72vw;
+      --pad-x: 5vw;
+      --pad-y: 5vh;
+      --gap-lg: 3.5vh;
+      --gap-md: 2vh;
+      --gap-sm: 1vh;
+      --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    /* ── REVEAL RESET ─────────────────────────────────────────────── */
+    .reveal { font-family: var(--f-body); }
+    .reveal .slides { text-align: left; }
+    .reveal .slides section {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: var(--pad-y) var(--pad-x);
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      overflow: hidden;
+      top: 0 !important;
+      left: 0 !important;
+    }
+    .reveal h1, .reveal h2, .reveal h3, .reveal h4,
+    .reveal p, .reveal ul, .reveal ol { margin: 0; }
+    .reveal .slides section.dark  { background: var(--c-bg);    color: var(--c-fg); }
+    .reveal .slides section.light { background: var(--c-bg-light); color: var(--c-fg-light); }
+    /* ── CHROME / FOOTER ──────────────────────────────────────────── */
+    .slide-chrome, .slide-foot {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+    .dark  .slide-chrome { border-bottom: 1px solid var(--c-border);       padding-bottom: var(--gap-sm); margin-bottom: var(--gap-md); }
+    .dark  .slide-foot   { border-top:    1px solid var(--c-border);       padding-top:    var(--gap-sm); margin-top:    var(--gap-md); }
+    .light .slide-chrome { border-bottom: 1px solid var(--c-border-light); padding-bottom: var(--gap-sm); margin-bottom: var(--gap-md); }
+    .light .slide-foot   { border-top:    1px solid var(--c-border-light); padding-top:    var(--gap-sm); margin-top:    var(--gap-md); }
+    .slide-body { min-height: 0; }
+    /* ── SLIDE VARIANTS ───────────────────────────────────────────── */
+    .slide--cover, .slide--chapter, .slide--quote, .slide--end, .slide--statement {
+      display: flex !important;
+      flex-direction: column;
+    }
+    .slide--cover   .slide-chrome, .slide--cover   .slide-foot,
+    .slide--chapter .slide-chrome, .slide--chapter .slide-foot,
+    .slide--quote   .slide-chrome, .slide--quote   .slide-foot,
+    .slide--end     .slide-chrome, .slide--end     .slide-foot,
+    .slide--statement .slide-chrome, .slide--statement .slide-foot { display: none; }
+    .slide--cover     { justify-content: flex-end; }
+    .slide--chapter   { justify-content: flex-end; }
+    .slide--statement { justify-content: center; }
+    .slide--quote     { justify-content: center; }
+    .slide--end       { justify-content: space-between; }
+    .slide--split   .slide-body { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--gap-md); align-items: center; }
+    .slide--stats   .slide-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-md); }
+    .slide--list    .slide-body { display: grid; grid-template-columns: 2fr 3fr;     gap: var(--gap-md); }
+    .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr;     height: 100%; }
+    /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
+    .display { font-size: var(--sz-display); font-weight: 900; line-height: 0.9;  letter-spacing: -0.02em; text-transform: uppercase; }
+    .h1      { font-size: var(--sz-h1);      font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
+    .h2      { font-size: var(--sz-h2);      font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
+    .h3      { font-size: var(--sz-h3);      font-weight: 700; line-height: 1.1;  text-transform: uppercase; }
+    .lead    { font-size: var(--sz-lead);    font-weight: 500; line-height: 1.45; }
+    .body    { font-size: var(--sz-body);    font-weight: 400; line-height: 1.6; }
+    .caption { font-size: var(--sz-caption); line-height: 1.5; }
+    .label   { font-family: var(--f-mono); font-size: var(--sz-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
+    .kicker  { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
+    .dark  .kicker { color: var(--c-accent); }
+    .light .kicker { color: var(--c-fg-light-2); }
+    .muted  { opacity: 0.55; }
+    .accent { color: var(--c-accent); }
+    /* ── COMPONENTS ───────────────────────────────────────────────── */
+    .rule { width: 36px; height: 2px; background: var(--c-accent); margin: var(--gap-sm) 0; }
+    .light .rule { background: var(--c-fg-light); }
+    .img-placeholder {
+      background: var(--c-bg-alt);
+      width: 100%; height: 100%; min-height: 25vh;
+      display: flex; align-items: center; justify-content: center;
+      font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.1em;
+      color: var(--c-fg-3);
+    }
+    .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
+    .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.6; }
+    .dark  .bullet-list li::before { content: "—"; color: var(--c-accent); flex-shrink: 0; }
+    .light .bullet-list li::before { content: "—"; color: var(--c-fg-light); flex-shrink: 0; }
+    .stat-val  { font-size: 6vw; font-weight: 900; line-height: 1; }
+    .stat-unit { font-size: 2.5vw; font-weight: 900; }
+    /* ── BAR CHART ────────────────────────────────────────────────── */
+    .bar-chart { display: flex; align-items: flex-end; gap: 1.5vw; height: 22vh; }
+    .bar-col   { display: flex; flex-direction: column; align-items: center; gap: 0.5vh; flex: 1; }
+    .bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-left: 2px solid var(--c-fg-3); }
+    .bar-fill  { width: 100%; background: var(--c-fg-3); transition: height 0.6s var(--ease-enter); }
+    .bar-fill.hi { background: var(--c-accent); }
+    .bar-label { font-family: var(--f-mono); font-size: 0.65vw; text-align: center; opacity: 0.6; }
+    /* ── ANIMATIONS ───────────────────────────────────────────────── */
+    [data-anim] { opacity: 0; animation-fill-mode: forwards; animation-timing-function: var(--ease-enter); animation-duration: 0.55s; }
+    [data-anim][data-delay="0"] { animation-delay: 0s; }
+    [data-anim][data-delay="1"] { animation-delay: 0.08s; }
+    [data-anim][data-delay="2"] { animation-delay: 0.18s; }
+    [data-anim][data-delay="3"] { animation-delay: 0.3s; }
+    [data-anim][data-delay="4"] { animation-delay: 0.44s; }
+    [data-anim][data-delay="5"] { animation-delay: 0.6s; }
+    .reveal .present [data-anim="fade-up"]      { animation-name: kFadeUp; }
+    .reveal .present [data-anim="fade-in"]      { animation-name: kFadeIn; }
+    .reveal .present [data-anim="reveal-right"] { animation-name: kRevealRight; opacity: 1; }
+    .reveal .present [data-anim="scale-in"]     { animation-name: kScaleIn; }
+    @keyframes kFadeUp      { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
+    @keyframes kFadeIn      { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes kRevealRight { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
+    @keyframes kScaleIn     { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
+    /* ── REVEAL UI OVERRIDES ──────────────────────────────────────── */
+    .reveal .controls { color: var(--c-accent); }
+    .reveal .progress { color: var(--c-accent); }
+    .reveal .slide-number { font-family: var(--f-mono); background: transparent; color: var(--c-fg-3); font-size: 0.6em; }
+  </style>
+</head>
+<body style="margin:0;background:#111">
+<div class="reveal">
+  <div class="slides">
+    <!-- ════════════════════════════════════════════════
+         COVER — image + overlay text
+         ════════════════════════════════════════════════ -->
+    <section class="dark slide--cover">
+      <div style="flex:1;position:relative">
+        <div class="img-placeholder">IMAGE</div>
+      </div>
+      <div class="slide-body" style="padding-top:var(--gap-md)">
+        <span class="kicker" data-anim="fade-in"      data-delay="0">{{ORGANIZATION}}</span>
+        <div  class="display" data-anim="fade-up"      data-delay="1">{{TITLE}}</div>
+        <div  class="rule"    data-anim="reveal-right" data-delay="2" style="margin-top:1.5vh"></div>
+        <div style="display:flex;justify-content:space-between;margin-top:1.5vh" data-anim="fade-in" data-delay="3">
+          <span class="label muted">{{DATE}}</span>
+          <span class="label muted">{{AUTHOR}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         CHAPTER DIVIDER (light background)
+         ════════════════════════════════════════════════ -->
+    <section class="light slide--chapter">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:flex-end;gap:var(--gap-sm)">
+        <span class="kicker"      data-anim="fade-in"    data-delay="0">01 — 섹션명</span>
+        <div  class="h1"          data-anim="fade-up"    data-delay="1">챕터<br>제목</div>
+        <div  class="rule"        data-anim="reveal-right" data-delay="2"></div>
+        <p    class="body muted"  data-anim="fade-up"    data-delay="3">서브 설명</p>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         STATS — 3-column (dark)
+         ════════════════════════════════════════════════ -->
+    <section class="dark">
+      <div class="slide-chrome">
+        <span class="label muted">{{SECTION_LABEL}}</span>
+        <span class="label muted">01 / 지표</span>
+      </div>
+      <div class="slide-body slide--stats">
+        <div style="border-top:1px solid var(--c-border);padding-top:var(--gap-sm)" data-anim="fade-up" data-delay="1">
+          <div class="stat-val accent">98<span class="stat-unit">%</span></div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명</p>
+          <p class="caption muted">전기 대비 +12%p</p>
+        </div>
+        <div style="border-top:1px solid var(--c-border);padding-top:var(--gap-sm)" data-anim="fade-up" data-delay="2">
+          <div class="stat-val accent">2.4<span class="stat-unit">s</span></div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명</p>
+          <p class="caption muted">목표치 3s 달성</p>
+        </div>
+        <div style="border-top:1px solid var(--c-border);padding-top:var(--gap-sm)" data-anim="fade-up" data-delay="3">
+          <div class="stat-val accent">41</div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명</p>
+          <p class="caption muted">누적 총 186개</p>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         SPLIT — text + list (light)
+         ════════════════════════════════════════════════ -->
+    <section class="light">
+      <div class="slide-chrome">
+        <span class="label" style="color:var(--c-fg-light-2)">{{SECTION_LABEL}}</span>
+        <span class="label" style="color:var(--c-fg-light-3)">01 / 분석</span>
+      </div>
+      <div class="slide-body slide--split">
+        <div data-anim="fade-up" data-delay="1">
+          <span class="kicker">Topic</span>
+          <div class="h2">슬라이드<br>제목</div>
+          <div class="rule"></div>
+        </div>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list">
+            <li>항목 1 — 설명</li>
+            <li>항목 2 — 설명</li>
+            <li>항목 3 — 설명</li>
+            <li>항목 4 — 설명</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot" style="border-color:var(--c-border-light)">
+        <span class="label" style="color:var(--c-fg-light-3)">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         BAR CHART (dark)
+         ════════════════════════════════════════════════ -->
+    <section class="dark">
+      <div class="slide-chrome">
+        <span class="label muted">{{SECTION_LABEL}}</span>
+        <span class="label muted">01 / 데이터</span>
+      </div>
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:flex-end;gap:var(--gap-lg)">
+        <div data-anim="fade-up" data-delay="0">
+          <span class="kicker">Chart Title</span>
+          <div class="h2">데이터 비교</div>
+        </div>
+        <div class="bar-chart" data-anim="scale-in" data-delay="2">
+          <div class="bar-col"><div class="bar-track"><div class="bar-fill"    style="height:85%"></div></div><span class="bar-label">항목 A</span></div>
+          <div class="bar-col"><div class="bar-track"><div class="bar-fill hi" style="height:60%"></div></div><span class="bar-label">항목 B</span></div>
+          <div class="bar-col"><div class="bar-track"><div class="bar-fill"    style="height:48%"></div></div><span class="bar-label">항목 C</span></div>
+          <div class="bar-col"><div class="bar-track"><div class="bar-fill"    style="height:38%"></div></div><span class="bar-label">항목 D</span></div>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         LIST — heading + bullets (dark)
+         ════════════════════════════════════════════════ -->
+    <section class="dark">
+      <div class="slide-chrome">
+        <span class="label muted">{{SECTION_LABEL}}</span>
+        <span class="label muted">02 / 계획</span>
+      </div>
+      <div class="slide-body slide--list">
+        <div data-anim="fade-up" data-delay="1">
+          <span class="kicker">{{PERIOD}}</span>
+          <div class="h2">주요<br>과제</div>
+          <div class="rule"></div>
+        </div>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list">
+            <li>할 일 1</li>
+            <li>할 일 2</li>
+            <li>할 일 3</li>
+            <li>할 일 4</li>
+            <li>할 일 5</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         STATEMENT — full-screen (dark)
+         ════════════════════════════════════════════════ -->
+    <section class="dark slide--statement">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center">
+        <div class="display" data-anim="fade-up"      data-delay="0">선언문<br>또는 테제</div>
+        <div class="rule"    data-anim="reveal-right" data-delay="2" style="margin-top:2vh"></div>
+        <p   class="body muted" data-anim="fade-up"   data-delay="3" style="margin-top:var(--gap-sm)">— 출처 / 맥락</p>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         QUOTE (dark)
+         ════════════════════════════════════════════════ -->
+    <section class="dark slide--quote">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center;gap:var(--gap-md)">
+        <div class="rule"      data-anim="reveal-right" data-delay="0"></div>
+        <div class="h1"        data-anim="fade-up"      data-delay="1">"인용문을<br>크게 보여줄 때"</div>
+        <p   class="label muted" data-anim="fade-in"   data-delay="3">— 발언자, 맥락</p>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         END / Q&A (light)
+         ════════════════════════════════════════════════ -->
+    <section class="light slide--end">
+      <div style="padding-top:var(--pad-y)" data-anim="fade-up" data-delay="0">
+        <span class="kicker">감사합니다</span>
+        <div class="display">Q&amp;A</div>
+        <div class="rule" style="margin-top:2vh"></div>
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md);padding-bottom:var(--pad-y)" data-anim="fade-up" data-delay="2">
+        <div>
+          <p class="label" style="color:var(--c-fg-light-2)">이메일</p>
+          <p class="body">{{EMAIL}}</p>
+        </div>
+        <div>
+          <p class="label" style="color:var(--c-fg-light-2)">소속</p>
+          <p class="body">{{ORG}}</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js"></script>
+<script>
+  Reveal.initialize({
+    hash: true,
+    width: 1600,
+    height: 900,
+    margin: 0,
+    minScale: 0.1,
+    maxScale: 1.5,
+    controls: true,
+    progress: true,
+    slideNumber: 'c/t',
+    transition: 'fade',
+    backgroundTransition: 'fade',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>

package/skills/agent/SKILL.md CHANGED Viewed

@@ -35,6 +35,7 @@ Invoke any Gestalt Role or Review agent directly, outside the Gestalt pipeline.
 /agent backend-developer "is this REST API design consistent?"
 /agent qa-engineer "what edge cases am I missing for this login flow?"
 /agent frontend-developer "review this React component for accessibility issues"
+/agent presentation-designer "분기 실적 발표용 Reveal.js 슬라이드 구조 설계해줘"
 # Run a Review Agent
 /agent security-reviewer "check this authentication code for vulnerabilities"
@@ -53,6 +54,7 @@ Invoke any Gestalt Role or Review agent directly, outside the Gestalt pipeline.
 | `backend-developer` | API, database, authentication, server |
 | `frontend-developer` | UI, React, accessibility |
 | `designer` | UX/UI, design systems, interaction |
+| `presentation-designer` | Reveal.js slides, storytelling, visual design for decks |
 | `qa-engineer` | Testing, edge cases, quality |
 | `devops-engineer` | CI/CD, infrastructure, monitoring |
 | `product-planner` | Requirements, roadmap, user stories |