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

@tienne/gestalt 0.17.0 → 0.18.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 (173) 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/role-agents/technical-writer/AGENT.md CHANGED Viewed

@@ -274,6 +274,44 @@ Apply these principles when structuring any document:
 위반 항목이 있으면 해당 구간만 수정 후 재검증.
+## Collaboration Protocol — presentation-designer와 협업
+프레젠테이션 작성 요청 시 `technical-writer`는 **Phase 1 (워딩 초안)** 을 담당한다.
+### 프레젠테이션 워딩 초안 작성 원칙
+일반 문서와 다른 슬라이드 카피의 규칙:
+**제목 작성:**
+- ❌ "Q2 성과" → ✅ "Q2에서 증명한 것"
+- ❌ "번들 최적화" → ✅ "번들을 32% 줄인 세 가지 결정"
+- 제목은 명사형이 아니라 주장·결론형으로
+**수치 작성:**
+- ❌ "98%" → ✅ "목표 90% 대비 98% — 8%p 초과 달성"
+- ❌ "2.4s" → ✅ "LCP 2.4s, 업계 권고 기준(3s) 달성"
+- 숫자는 반드시 기준값과 함께
+**슬라이드 밀도:**
+- 슬라이드당 핵심 포인트 최대 1개
+- 불릿 3개 초과 시 슬라이드 분리 권고
+- 청중이 읽는 시간: 슬라이드당 20초 이내
+### 워딩 초안 출력 형식
+`presentation-designer`에게 전달할 워딩 초안은 아래 형식으로 구조화:
+```
+[슬라이드 N] {슬라이드 타입 제안: cover/stats/split/statement/...}
+제목: "제목 텍스트"
+핵심 포인트:
+  - 포인트 1 (수치 있으면 맥락 포함)
+  - 포인트 2
+발표자 노트: 청중에게 강조할 말, 슬라이드에 없는 맥락
+```
+---
 ## Output Format
 When writing documentation, produce:

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 |