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

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

package/skills/doc-gist/references/examples/02-exploration-visual-designs.html DELETED Viewed

@@ -1,515 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Empty state — four visual directions</title>
-  <style>
-    :root {
-      --ivory:    #FAF9F5;
-      --slate:    #141413;
-      --clay:     #D97757;
-      --oat:      #E3DACC;
-      --olive:    #788C5D;
-      --gray-150: #F0EEE6;
-      --gray-300: #D1CFC5;
-      --gray-500: #87867F;
-      --gray-700: #3D3D3A;
-      --white:    #FFFFFF;
-      --serif: ui-serif, Georgia, 'Times New Roman', serif;
-      --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-      --mono:  ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: var(--sans);
-      background: var(--ivory);
-      color: var(--gray-700);
-      line-height: 1.55;
-      -webkit-font-smoothing: antialiased;
-      padding-bottom: 96px;
-    }
-    /* ---------- sticky toolbar ---------- */
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      background: var(--ivory);
-      border-bottom: 1.5px solid var(--gray-300);
-      padding: 14px 32px;
-      display: flex;
-      align-items: center;
-      gap: 18px;
-      font-size: 13px;
-    }
-    .toolbar .title {
-      font-family: var(--mono);
-      font-size: 12px;
-      letter-spacing: 0.04em;
-      color: var(--gray-500);
-      margin-right: auto;
-    }
-    .toolbar .field {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .toolbar .field > span {
-      color: var(--gray-700);
-      font-weight: 500;
-    }
-    .seg {
-      display: inline-flex;
-      border: 1.5px solid var(--gray-300);
-      border-radius: 8px;
-      overflow: hidden;
-      background: var(--white);
-    }
-    .seg label {
-      padding: 6px 14px;
-      cursor: pointer;
-      font-size: 13px;
-      color: var(--gray-700);
-      user-select: none;
-    }
-    .seg label + label {
-      border-left: 1.5px solid var(--gray-300);
-    }
-    .seg input { display: none; }
-    .seg input:checked + span {
-      color: var(--slate);
-      font-weight: 600;
-    }
-    .seg label:has(input:checked) {
-      background: var(--oat);
-    }
-    /* ---------- page header ---------- */
-    .page {
-      max-width: 1240px;
-      margin: 0 auto;
-      padding: 48px 32px 0;
-    }
-    header.page-head {
-      max-width: 720px;
-      margin-bottom: 40px;
-    }
-    .eyebrow {
-      font-size: 12px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--gray-500);
-      margin-bottom: 12px;
-    }
-    h1 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 38px;
-      line-height: 1.15;
-      color: var(--slate);
-      margin-bottom: 18px;
-      letter-spacing: -0.01em;
-    }
-    .prompt-box {
-      background: var(--gray-150);
-      border: 1.5px solid var(--gray-300);
-      border-radius: 12px;
-      padding: 16px 20px;
-      font-size: 14.5px;
-    }
-    .prompt-box .label {
-      font-family: var(--mono);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--gray-500);
-      display: block;
-      margin-bottom: 6px;
-    }
-    /* ---------- artboard grid ---------- */
-    .board {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 32px;
-    }
-    @media (max-width: 960px) {
-      .board { grid-template-columns: 1fr; }
-    }
-    .artboard {
-      background: var(--white);
-      border: 1.5px solid var(--gray-300);
-      border-radius: 12px;
-      padding: 20px;
-      position: relative;
-    }
-    .tag {
-      position: absolute;
-      top: 14px;
-      left: 14px;
-      font-family: var(--mono);
-      font-size: 11px;
-      letter-spacing: 0.02em;
-      background: var(--oat);
-      color: var(--slate);
-      padding: 4px 10px;
-      border-radius: 8px;
-      z-index: 2;
-    }
-    .stage {
-      height: 280px;
-      border-radius: 8px;
-      border: 1.5px solid var(--gray-300);
-      background: var(--ivory);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 24px;
-      transition: background 0.15s, border-color 0.15s;
-      overflow: hidden;
-    }
-    .stage.dark {
-      background: var(--slate);
-      border-color: var(--slate);
-    }
-    .rationale {
-      margin-top: 16px;
-      font-size: 13px;
-      color: var(--gray-500);
-      line-height: 1.5;
-    }
-    /* =========================================================
-       Empty-state variants — each scoped under .es-*
-       Theme tokens flip when .stage.dark is present.
-       ========================================================= */
-    .stage        { --fg: var(--slate); --muted: var(--gray-500); --line: var(--gray-300); --panel: var(--white); }
-    .stage.dark   { --fg: #F0EEE6;      --muted: #9C9A93;         --line: #3D3D3A;         --panel: #1F1E1B;     }
-    /* ---- A · Minimal ---- */
-    .es-a {
-      text-align: center;
-      max-width: 300px;
-    }
-    .es-a h3 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 19px;
-      color: var(--fg);
-      margin-bottom: 6px;
-    }
-    .es-a p {
-      font-size: 13px;
-      color: var(--muted);
-      margin-bottom: 18px;
-    }
-    .es-a .btn {
-      display: inline-block;
-      font-size: 13px;
-      color: var(--fg);
-      border: 1.5px solid var(--line);
-      border-radius: 8px;
-      padding: 8px 16px;
-      background: transparent;
-    }
-    /* ---- B · Illustrated ---- */
-    .es-b {
-      text-align: center;
-      max-width: 320px;
-    }
-    .es-b svg {
-      display: block;
-      margin: 0 auto 18px;
-    }
-    .es-b h3 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 19px;
-      color: var(--fg);
-      margin-bottom: 6px;
-    }
-    .es-b p {
-      font-size: 13px;
-      color: var(--muted);
-      margin-bottom: 16px;
-    }
-    .es-b .btn {
-      display: inline-block;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--white);
-      background: var(--clay);
-      border-radius: 8px;
-      padding: 8px 16px;
-    }
-    .stage.dark .es-b .btn { color: var(--slate); background: var(--oat); }
-    /* ---- C · Playful ---- */
-    .es-c {
-      text-align: center;
-      max-width: 300px;
-    }
-    .es-c .float {
-      width: 56px;
-      height: 56px;
-      margin: 0 auto 20px;
-      position: relative;
-      animation: bob 3.2s ease-in-out infinite;
-    }
-    .es-c .float .card {
-      position: absolute;
-      inset: 0;
-      border-radius: 10px;
-      background: var(--panel);
-      border: 1.5px solid var(--line);
-    }
-    .es-c .float .card:nth-child(1) { transform: rotate(-8deg) translate(-6px, 4px); opacity: 0.5; }
-    .es-c .float .card:nth-child(2) { transform: rotate( 6deg) translate( 6px, 2px); opacity: 0.75; }
-    .es-c .float .card:nth-child(3) { background: var(--oat); border-color: var(--oat); }
-    .stage.dark .es-c .float .card:nth-child(3) { background: var(--clay); border-color: var(--clay); }
-    .es-c .shadow {
-      width: 44px;
-      height: 8px;
-      margin: -8px auto 22px;
-      border-radius: 50%;
-      background: rgba(0,0,0,0.12);
-      filter: blur(2px);
-      animation: shadow 3.2s ease-in-out infinite;
-    }
-    .stage.dark .es-c .shadow { background: rgba(0,0,0,0.5); }
-    .es-c h3 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 19px;
-      color: var(--fg);
-      margin-bottom: 6px;
-    }
-    .es-c p {
-      font-size: 13px;
-      color: var(--muted);
-    }
-    @keyframes bob {
-      0%, 100% { transform: translateY(0); }
-      50%      { transform: translateY(-10px); }
-    }
-    @keyframes shadow {
-      0%, 100% { transform: scaleX(1);   opacity: 0.9; }
-      50%      { transform: scaleX(0.8); opacity: 0.5; }
-    }
-    /* ---- D · Instructional ---- */
-    .es-d {
-      width: 100%;
-      max-width: 360px;
-    }
-    .es-d h3 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 18px;
-      color: var(--fg);
-      margin-bottom: 14px;
-    }
-    .es-d ol {
-      list-style: none;
-      counter-reset: step;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .es-d li {
-      counter-increment: step;
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      background: var(--panel);
-      border: 1.5px solid var(--line);
-      border-radius: 8px;
-      padding: 10px 14px;
-      font-size: 13px;
-      color: var(--fg);
-    }
-    .es-d li::before {
-      content: counter(step);
-      font-family: var(--mono);
-      font-size: 11px;
-      flex: 0 0 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: var(--oat);
-      color: var(--slate);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 1px;
-    }
-    .es-d li span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
-  </style>
-</head>
-<body>
-  <div class="toolbar">
-    <div class="title">Birchline · design exploration</div>
-    <div class="field">
-      <span>Background:</span>
-      <div class="seg" id="bg-seg">
-        <label><input type="radio" name="bg" value="light" checked><span>Light</span></label>
-        <label><input type="radio" name="bg" value="dark"><span>Dark</span></label>
-      </div>
-    </div>
-  </div>
-  <div class="page">
-    <header class="page-head">
-      <div class="eyebrow">Exploration · Empty states</div>
-      <h1>Four visual directions for the “no tasks yet” state</h1>
-      <div class="prompt-box">
-        <span class="label">Prompt</span>
-        Explore four visual directions for our empty-state component. Render each
-        live so we can compare tone, density, and how well they hold up on light
-        and dark surfaces.
-      </div>
-    </header>
-    <section class="board">
-      <!-- ================= A — Minimal ================= -->
-      <article class="artboard">
-        <span class="tag">A — Minimal</span>
-        <div class="stage">
-          <div class="es-a">
-            <h3>No tasks yet</h3>
-            <p>When you create a task it will show up here.</p>
-            <span class="btn">New task</span>
-          </div>
-        </div>
-        <p class="rationale">
-          Pure typography, single quiet action. Reads as calm and confident;
-          assumes the surrounding UI already carries enough personality.
-        </p>
-      </article>
-      <!-- ================= B — Illustrated ================= -->
-      <article class="artboard">
-        <span class="tag">B — Illustrated</span>
-        <div class="stage">
-          <div class="es-b">
-            <svg width="120" height="90" viewBox="0 0 120 90" aria-hidden="true">
-              <rect x="14" y="20" width="72" height="54" rx="8"
-                    fill="var(--panel)" stroke="var(--line)" stroke-width="1.5"/>
-              <rect x="34" y="10" width="72" height="54" rx="8"
-                    fill="var(--oat)"/>
-              <line x1="46" y1="26" x2="92" y2="26"
-                    stroke="var(--slate)" stroke-width="2" stroke-linecap="round"/>
-              <line x1="46" y1="38" x2="80" y2="38"
-                    stroke="var(--slate)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
-              <circle cx="98" cy="60" r="12" fill="var(--clay)"/>
-              <path d="M98 55 v10 M93 60 h10"
-                    stroke="white" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            <h3>Start your first list</h3>
-            <p>Group related work and watch progress roll up automatically.</p>
-            <span class="btn">Create a task</span>
-          </div>
-        </div>
-        <p class="rationale">
-          A small geometric spot illustration anchors the eye and explains the
-          object model (lists contain tasks) without a wall of copy.
-        </p>
-      </article>
-      <!-- ================= C — Playful ================= -->
-      <article class="artboard">
-        <span class="tag">C — Playful</span>
-        <div class="stage">
-          <div class="es-c">
-            <div class="float">
-              <div class="card"></div>
-              <div class="card"></div>
-              <div class="card"></div>
-            </div>
-            <div class="shadow"></div>
-            <h3>Nothing on your plate</h3>
-            <p>Enjoy the quiet, or add something to get moving.</p>
-          </div>
-        </div>
-        <p class="rationale">
-          A gently bobbing stack adds life to an otherwise static screen. Motion
-          is subtle enough to loop indefinitely without drawing complaints.
-        </p>
-      </article>
-      <!-- ================= D — Instructional ================= -->
-      <article class="artboard">
-        <span class="tag">D — Instructional</span>
-        <div class="stage">
-          <div class="es-d">
-            <h3>Set up this project</h3>
-            <ol>
-              <li>
-                Create your first task
-                <span>Give it a name and an owner.</span>
-              </li>
-              <li>
-                Add a due date
-                <span>Birchline will surface it on the timeline.</span>
-              </li>
-              <li>
-                Invite a teammate
-                <span>Shared projects stay in sync automatically.</span>
-              </li>
-            </ol>
-          </div>
-        </div>
-        <p class="rationale">
-          Treats the empty state as onboarding. Higher density, but every line is
-          actionable — best when the user is new to the product, not just the view.
-        </p>
-      </article>
-    </section>
-  </div>
-  <script>
-    const stages = document.querySelectorAll('.stage');
-    document.getElementById('bg-seg').addEventListener('change', (e) => {
-      const dark = e.target.value === 'dark';
-      stages.forEach((s) => s.classList.toggle('dark', dark));
-    });
-  </script>
-</body>
-</html>