@drunkcoding/agents-and-skills 0.0.13 → 0.0.14

package/plugins/html-effectiveness/templates/05-design-system.html.tmpl

@@ -0,0 +1,578 @@
+<!--
+template: 05-design-system
+upstream: 05-design-system.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<div class="page">
+
+  <header>
+    <h1>{{title}}</h1>
+    <p class="sub">
+      Generated from <code>src/styles/tokens.ts</code> and <code>src/components/</code> &mdash; use as a portable reference when prompting.
+    </p>
+  </header>
+
+  <!-- ===================== COLOR ===================== -->
+  <section id="color">
+    <h2>Color</h2>
+    <hr class="rule">
+
+    <div class="swatch-group">
+      <div class="swatch-group-label">Primary</div>
+      <div class="swatch-grid">
+        <div class="swatch">
+          <div class="chip no-border" style="background:#D97757"></div>
+          <span class="hex">#D97757</span>
+          <span class="token">--clay</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#141413"></div>
+          <span class="hex">#141413</span>
+          <span class="token">--slate</span>
+        </div>
+        <div class="swatch">
+          <div class="chip" style="background:#FAF9F5"></div>
+          <span class="hex">#FAF9F5</span>
+          <span class="token">--ivory</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#E3DACC"></div>
+          <span class="hex">#E3DACC</span>
+          <span class="token">--oat</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="swatch-group">
+      <div class="swatch-group-label">Neutral</div>
+      <div class="swatch-grid">
+        <div class="swatch">
+          <div class="chip" style="background:#FFFFFF"></div>
+          <span class="hex">#FFFFFF</span>
+          <span class="token">--white</span>
+        </div>
+        <div class="swatch">
+          <div class="chip" style="background:#F0EEE6"></div>
+          <span class="hex">#F0EEE6</span>
+          <span class="token">--gray-100</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#D1CFC5"></div>
+          <span class="hex">#D1CFC5</span>
+          <span class="token">--gray-300</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#87867F"></div>
+          <span class="hex">#87867F</span>
+          <span class="token">--gray-500</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#3D3D3A"></div>
+          <span class="hex">#3D3D3A</span>
+          <span class="token">--gray-700</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="swatch-group">
+      <div class="swatch-group-label">Semantic</div>
+      <div class="swatch-grid">
+        <div class="swatch">
+          <div class="chip no-border" style="background:#788C5D"></div>
+          <span class="hex">#788C5D</span>
+          <span class="token">--success</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#C78E3F"></div>
+          <span class="hex">#C78E3F</span>
+          <span class="token">--warning</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#B04A4A"></div>
+          <span class="hex">#B04A4A</span>
+          <span class="token">--danger</span>
+        </div>
+        <div class="swatch">
+          <div class="chip no-border" style="background:#5C7CA3"></div>
+          <span class="hex">#5C7CA3</span>
+          <span class="token">--info</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===================== TYPOGRAPHY ===================== -->
+  <section id="typography">
+    <h2>Typography</h2>
+    <hr class="rule">
+
+    <div class="type-scale">
+      <div class="type-row">
+        <div class="type-specimen t-display">Plan the week ahead</div>
+        <div class="type-meta">
+          <span class="name">Display</span>
+          48 / 1.1 / 500
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="type-specimen t-h1">Plan the week ahead</div>
+        <div class="type-meta">
+          <span class="name">Heading 1</span>
+          32 / 1.2 / 500
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="type-specimen t-h2">Plan the week ahead</div>
+        <div class="type-meta">
+          <span class="name">Heading 2</span>
+          24 / 1.3 / 500
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="type-specimen t-body">Review milestones, assign owners, and surface blockers before they cascade.</div>
+        <div class="type-meta">
+          <span class="name">Body</span>
+          16 / 1.55 / 430
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="type-specimen t-small">Review milestones, assign owners, and surface blockers before they cascade.</div>
+        <div class="type-meta">
+          <span class="name">Small</span>
+          14 / 1.5 / 430
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="type-specimen t-caption">UPDATED 2 HOURS AGO</div>
+        <div class="type-meta">
+          <span class="name">Caption</span>
+          12 / 1.4 / 500
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===================== SPACING ===================== -->
+  <section id="spacing">
+    <h2>Spacing</h2>
+    <hr class="rule">
+
+    <div class="spacing-ruler">
+      <div class="space-token">
+        <div class="space-bar" style="width:4px"></div>
+        <div class="space-label">4<span>--sp-1</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:8px"></div>
+        <div class="space-label">8<span>--sp-2</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:12px"></div>
+        <div class="space-label">12<span>--sp-3</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:16px"></div>
+        <div class="space-label">16<span>--sp-4</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:24px"></div>
+        <div class="space-label">24<span>--sp-5</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:32px"></div>
+        <div class="space-label">32<span>--sp-6</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:48px"></div>
+        <div class="space-label">48<span>--sp-7</span></div>
+      </div>
+      <div class="space-token">
+        <div class="space-bar" style="width:64px"></div>
+        <div class="space-label">64<span>--sp-8</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===================== RADIUS & ELEVATION ===================== -->
+  <section id="shape">
+    <h2>Radius &amp; Elevation</h2>
+    <hr class="rule">
+
+    <div class="token-row">
+      <div class="radius-card" style="border-radius:4px">
+        <div class="lbl">4px<span>--r-xs</span></div>
+      </div>
+      <div class="radius-card" style="border-radius:8px">
+        <div class="lbl">8px<span>--r-sm</span></div>
+      </div>
+      <div class="radius-card" style="border-radius:12px">
+        <div class="lbl">12px<span>--r-md</span></div>
+      </div>
+      <div class="radius-card" style="border-radius:20px">
+        <div class="lbl">20px<span>--r-lg</span></div>
+      </div>
+    </div>
+
+    <div class="token-row">
+      <div class="shadow-card" style="box-shadow:0 1px 2px rgba(20,20,19,0.06)">
+        <div class="lbl">--shadow-sm<span>0 1px 2px / 6%</span></div>
+      </div>
+      <div class="shadow-card" style="box-shadow:0 4px 10px rgba(20,20,19,0.08)">
+        <div class="lbl">--shadow-md<span>0 4px 10px / 8%</span></div>
+      </div>
+      <div class="shadow-card" style="box-shadow:0 12px 28px rgba(20,20,19,0.12)">
+        <div class="lbl">--shadow-lg<span>0 12px 28px / 12%</span></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===================== CORE COMPONENTS ===================== -->
+  <section id="components">
+    <h2>Core components</h2>
+    <hr class="rule">
+
+    <div class="component">
+      <div class="component-name">&lt;Button /&gt;</div>
+      <div class="component-stage">
+        <button class="btn btn-primary">Create task</button>
+        <button class="btn btn-secondary">Cancel</button>
+        <button class="btn btn-ghost">Skip</button>
+        <button class="btn btn-danger">Delete</button>
+      </div>
+    </div>
+
+    <div class="component">
+      <div class="component-name">&lt;Input /&gt;</div>
+      <div class="component-stage">
+        <input class="input" type="text" placeholder="Search tasks&hellip;">
+        <input class="input" type="text" value="Weekly planning">
+      </div>
+    </div>
+
+    <div class="component">
+      <div class="component-name">&lt;Checkbox /&gt;</div>
+      <div class="component-stage">
+        <label class="checkbox">
+          <input type="checkbox">
+          Notify assignees
+        </label>
+        <label class="checkbox">
+          <input type="checkbox" checked>
+          Archive on complete
+        </label>
+      </div>
+    </div>
+
+    <div class="component">
+      <div class="component-name">&lt;Badge /&gt;</div>
+      <div class="component-stage">
+        <span class="badge badge-neutral">Draft</span>
+        <span class="badge badge-accent">In review</span>
+        <span class="badge badge-success">Done</span>
+        <span class="badge badge-warning">Overdue</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+
+<style>
+* { box-sizing: border-box; }
+.page {
+    max-width: 980px;
+    margin: 0 auto;
+  }
+header h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 40px;
+    letter-spacing: -0.01em;
+    margin: 0 0 6px;
+  }
+header .sub {
+    color: var(--gray-500);
+    font-size: 14px;
+    margin: 0 0 48px;
+  }
+header .sub code {
+    font-family: var(--mono);
+    font-size: 13px;
+    background: var(--gray-100);
+    padding: 1px 5px;
+    border-radius: 4px;
+  }
+section { margin-bottom: 64px; }
+h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 26px;
+    margin: 0 0 8px;
+    letter-spacing: -0.01em;
+  }
+hr.rule {
+    border: none;
+    border-top: 1px solid var(--gray-300);
+    margin: 0 0 28px;
+  }
+/* ---------- Color ---------- */
+  .swatch-group {
+    margin-bottom: 28px;
+  }
+.swatch-group-label {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--gray-500);
+    margin-bottom: 12px;
+  }
+.swatch-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+    gap: 20px 16px;
+  }
+.swatch {}
+.swatch .chip {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-row);
+    border: var(--border);
+    margin-bottom: 8px;
+  }
+.swatch .chip.no-border { border-color: transparent; }
+.swatch .hex {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-700);
+    display: block;
+  }
+.swatch .token {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    display: block;
+  }
+/* ---------- Typography ---------- */
+  .type-scale {
+    border: var(--border);
+    border-radius: var(--radius-panel);
+    background: var(--white);
+    overflow: hidden;
+  }
+.type-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--gray-100);
+  }
+.type-row:last-child { border-bottom: none; }
+.type-specimen {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--slate);
+  }
+.type-meta {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    text-align: right;
+    flex-shrink: 0;
+  }
+.type-meta .name {
+    color: var(--gray-700);
+    display: block;
+    margin-bottom: 2px;
+  }
+.t-display { font-family: var(--serif); font-size: 48px; line-height: 1.1;  font-weight: 500; letter-spacing: -0.02em; }
+.t-h1 { font-family: var(--serif); font-size: 32px; line-height: 1.2;  font-weight: 500; letter-spacing: -0.01em; }
+.t-h2 { font-family: var(--serif); font-size: 24px; line-height: 1.3;  font-weight: 500; }
+.t-body { font-family: var(--sans);  font-size: 16px; line-height: 1.55; font-weight: 430; }
+.t-small { font-family: var(--sans);  font-size: 14px; line-height: 1.5;  font-weight: 430; }
+.t-caption { font-family: var(--sans);  font-size: 12px; line-height: 1.4;  font-weight: 500; color: var(--gray-500); }
+/* ---------- Spacing ---------- */
+  .spacing-ruler {
+    display: flex;
+    align-items: flex-end;
+    gap: 28px;
+    padding: 28px 24px;
+    background: var(--white);
+    border: var(--border);
+    border-radius: var(--radius-panel);
+    overflow-x: auto;
+  }
+.space-token {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+.space-bar {
+    background: var(--clay);
+    border-radius: 3px;
+    height: 14px;
+  }
+.space-label {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-700);
+    text-align: center;
+  }
+.space-label span {
+    display: block;
+    color: var(--gray-500);
+  }
+/* ---------- Radius & Elevation ---------- */
+  .token-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 28px;
+  }
+.radius-card {
+    width: 120px;
+    height: 88px;
+    background: var(--oat);
+    border: var(--border);
+    display: flex;
+    align-items: flex-end;
+    padding: 10px 12px;
+  }
+.radius-card .lbl {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-700);
+  }
+.radius-card .lbl span { color: var(--gray-500); display: block; }
+.shadow-card {
+    width: 160px;
+    height: 96px;
+    background: var(--white);
+    border-radius: var(--radius-panel);
+    display: flex;
+    align-items: flex-end;
+    padding: 12px 14px;
+  }
+.shadow-card .lbl {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-700);
+  }
+.shadow-card .lbl span { color: var(--gray-500); display: block; }
+/* ---------- Core components ---------- */
+  .component {
+    margin-bottom: 32px;
+  }
+.component-name {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    margin-bottom: 12px;
+  }
+.component-stage {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+    padding: 24px;
+    background: var(--white);
+    border: var(--border);
+    border-radius: var(--radius-panel);
+  }
+/* Button */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    padding: 0 16px;
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: var(--radius-row);
+    border: 1.5px solid transparent;
+    cursor: pointer;
+    transition: background 0.12s ease, border-color 0.12s ease;
+  }
+.btn-primary { background: var(--clay); color: var(--white); }
+.btn-primary:hover { background: #C7684C; }
+.btn-secondary { background: var(--white); color: var(--slate); border-color: var(--gray-300); }
+.btn-secondary:hover { background: var(--gray-100); }
+.btn-ghost { background: transparent; color: var(--gray-700); }
+.btn-ghost:hover { background: var(--gray-100); }
+.btn-danger { background: #B04A4A; color: var(--white); }
+.btn-danger:hover { background: #9A3F3F; }
+/* Input */
+  .input {
+    height: 38px;
+    padding: 0 12px;
+    font-family: var(--sans);
+    font-size: 14px;
+    color: var(--slate);
+    background: var(--white);
+    border: var(--border);
+    border-radius: var(--radius-row);
+    width: 260px;
+    outline: none;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  }
+.input::placeholder { color: var(--gray-500); }
+.input:focus {
+    border-color: var(--clay);
+    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
+  }
+/* Checkbox */
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 14px;
+    cursor: pointer;
+    user-select: none;
+  }
+.checkbox input {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: var(--border);
+    border-radius: 5px;
+    background: var(--white);
+    margin: 0;
+    cursor: pointer;
+    position: relative;
+    transition: background 0.12s ease, border-color 0.12s ease;
+  }
+.checkbox input:checked {
+    background: var(--clay);
+    border-color: var(--clay);
+  }
+.checkbox input:checked::after {
+    content: "";
+    position: absolute;
+    left: 5px; top: 1px;
+    width: 5px; height: 10px;
+    border: solid var(--white);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+/* Badge */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 9px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 999px;
+  }
+.badge-neutral { background: var(--gray-100); color: var(--gray-700); }
+.badge-accent { background: rgba(217, 119, 87, 0.14); color: var(--clay); }
+.badge-success { background: rgba(120, 140, 93, 0.16); color: var(--olive); }
+.badge-warning { background: rgba(199, 142, 63, 0.16); color: #A06A2A; }
+</style>