npm - claude-dev-env - Versions diffs - 1.83.0 → 1.84.0 - Mend

claude-dev-env 1.83.0 → 1.84.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 (165) hide show

package/skills/doc-gist/references/examples/05-design-system.html DELETED Viewed

@@ -1,629 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Birchline — Design System Reference</title>
-<style>
-  :root {
-    --ivory: #FAF9F5;
-    --slate: #141413;
-    --clay: #D97757;
-    --oat: #E3DACC;
-    --olive: #788C5D;
-    --gray-100: #F0EEE6;
-    --gray-300: #D1CFC5;
-    --gray-500: #87867F;
-    --gray-700: #3D3D3A;
-    --white: #FFFFFF;
-    --serif: ui-serif, Georgia, serif;
-    --sans: system-ui, -apple-system, sans-serif;
-    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
-    --radius-panel: 12px;
-    --radius-row: 8px;
-    --border: 1.5px solid var(--gray-300);
-  }
-  * { box-sizing: border-box; }
-  body {
-    margin: 0;
-    padding: 56px 24px 96px;
-    background: var(--ivory);
-    color: var(--slate);
-    font-family: var(--sans);
-    font-size: 15px;
-    line-height: 1.55;
-    -webkit-font-smoothing: antialiased;
-  }
-  .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>
-</head>
-<body>
-<div class="page">
-  <header>
-    <h1>Birchline design system</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>
-</body>
-</html>