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/SKILL.md DELETED Viewed

@@ -1,97 +0,0 @@
----
-name: doc-gist
-description: >-
-  Use when the user asks to share, publish, preview, or open as a webpage any HTML doc,
-  writeup, report, plan, runbook, or interactive artifact. Triggers on /doc-gist,
-  "publish this", "share as a gist", "open this as a webpage", "make me a writeup", or
-  any request ending in a shareable HTML preview URL. Provides the gist_upload transport
-  script, the <!-- @publish-as-gist --> auto-publish hook, and an HTML pattern gallery.
----
-# doc-gist
-Design fresh HTML for the artifact at hand, mark it for publishing, write it. The rest is automatic — a hook spots the marker, uploads to a secret gist, and prints the htmlpreview URL into your output for the user to click.
-## Principle (and what this skill deliberately does not ship)
-This skill ships **transport, not shape**. There are no document templates here. There is no markdown-to-HTML converter. There is no rebase-report mode. The shape of every artifact is your fresh design per request, drawing on the gallery in [`references/examples/`](references/examples/) for inspiration.
-Per Thariq's html-effectiveness thesis: *"twenty self-contained .html files an agent produced — each one trades a document you'd skim for one you'd actually read."* Every doc-gist invocation produces a fresh design appropriate to the work, not a template fill.
-## How auto-publish works
-1. You write HTML to any path (no directory rule, no naming rule).
-2. The HTML contains the marker comment `<!-- @publish-as-gist -->` — typically as the first child of `<head>` or just inside `<body>`.
-3. The PostToolUse hook ([`workflow/doc_gist_auto_publish.py`](../../hooks/workflow/doc_gist_auto_publish.py)) fires after the Write/Edit completes, sees the marker, and runs [`skills/doc-gist/scripts/gist_upload.py`](scripts/gist_upload.py) against the file.
-4. The upload script's gist + preview URLs print into your tool output. Quote them back to the user.
-The hook is a no-op for any HTML that lacks the marker — React components, test fixtures, scraped pages, partial fragments. The marker is the *intent signal*; absent marker means "this HTML isn't for sharing."
-## Gotchas
-- **`gh` must be authenticated.** The upload runs `gh gist create`. If `gh auth status` is failing, the hook surfaces the error to stderr and exits 0 (does not block the write). Run `gh auth login` and re-trigger by editing the HTML once more.
-- **The marker is a literal HTML comment, not a meta tag.** `<!-- @publish-as-gist -->` exactly. `<meta name="publish-as-gist">` does not match. Whitespace inside the marker breaks it.
-- **htmlpreview render delay.** First load of the preview URL takes 5–10 seconds while htmlpreview.github.io fetches the raw gist content. A blank page on first visit means refresh once.
-- **Filenames carry into the gist.** The gist filename is the same as the source file's name. Name your files for the artifact, not for filesystem convenience — `auth-migration-plan.html` reads better in the gist UI than `tmp_plan_v3_final.html`.
-- **Markers in code samples need escaping.** If you embed an example HTML snippet inside `<pre><code>` and that snippet contains the literal marker text, the hook will publish on first save. Either escape the comment angle brackets in the embedded sample, or write the marker as `<!- - @publish-as-gist - ->` in the embedded version.
-- **Self-contained HTML only.** The upload sends a single file. External CSS/JS via `<link href="./style.css">` or `<script src="./app.js">` will fail to load in the htmlpreview view. Inline everything — `<style>`, `<script>`, base64 images, SVG.
-- **Secret gist, not private.** `gh gist create` defaults to "secret" (anyone with the URL can view; not indexed; not on your public profile). Treat the preview URL like a shareable Google Doc — share with intent.
-## When to include the marker
-Include `<!-- @publish-as-gist -->` when **the artifact is for sharing or reading**: writeups, plans, reports, explainers, decision records, runbooks, status updates, prototypes the user will look at. Skip the marker for: HTML that's part of a code change (React components, test fixtures), HTML you're authoring as a one-off scratch file you'll delete, embedded HTML samples inside other artifacts.
-The user's prompt is the strongest signal. *"Make me a writeup of this PR"* → publish. *"Add this React component"* → don't publish.
-## The transport script — `skills/doc-gist/scripts/gist_upload.py`
-For manual invocation when the marker route doesn't apply (an existing file you want to publish, HTML piped from another tool, a one-off):
-```
-python3 skills/doc-gist/scripts/gist_upload.py --input <path-or-stdin>
-                              [--filename gist-file.html]
-                              [--description "short label"]
-                              [--no-open]
-```
-Reads HTML from `--input <path>` or stdin (`--input -`), runs `gh gist create`, prints `Gist:` and `Preview:` URLs to stderr, prints the preview URL to stdout (so callers can pipe), opens the preview in the default browser unless `--no-open`.
-## Designing fresh — the example gallery
-The skill ships [`references/examples/`](references/examples/) with 21 html-effectiveness examples: Thariq's 20 prototypes verbatim from [thariqs.github.io/html-effectiveness](https://thariqs.github.io/html-effectiveness/) (`01`–`20`), plus one original addition (`21-decision-signoff.html`). They are *examples to learn from, not templates to fill.*
-When the user requests an artifact, decide the shape that fits. Use the gallery for grounding:
-| User wants | Gallery entries to study |
-|---|---|
-| PR writeup with file-by-file tour | `17-pr-writeup.html` |
-| Annotated diff or code review | `03-code-review-pr.html` |
-| Code-explainer with module map | `04-code-understanding.html` |
-| Implementation plan with timeline + risks | `16-implementation-plan.html` |
-| Side-by-side approach exploration | `01-exploration-code-approaches.html` |
-| Visual design comparison | `02-exploration-visual-designs.html` |
-| Design system swatches | `05-design-system.html` |
-| Component variants matrix | `06-component-variants.html` |
-| Animation tuning sandbox with sliders | `07-prototype-animation.html` |
-| Multi-screen interaction mockup | `08-prototype-interaction.html` |
-| Slide deck (keyboard-navigable) | `09-slide-deck.html` |
-| SVG illustration | `10-svg-illustrations.html` |
-| Status report (visual) | `11-status-report.html` |
-| Incident timeline / post-mortem | `12-incident-report.html` |
-| Flowchart / pipeline diagram | `13-flowchart-diagram.html` |
-| Feature explainer with collapsibles | `14-research-feature-explainer.html` |
-| Concept explainer (interactive learning) | `15-research-concept-explainer.html` |
-| Triage / kanban board (drag-drop) | `18-editor-triage-board.html` |
-| Feature flag toggles with deps | `19-editor-feature-flags.html` |
-| Live-updating template editor | `20-editor-prompt-tuner.html` |
-| Decision / sign-off doc (accept-or-change each call, export digest) | `21-decision-signoff.html` |
-Read the matching example for the artifact you're designing. Crib palette, typography, spatial idioms, component patterns. **Adapt — do not copy.** A PR writeup for a hooks PR shouldn't look identical to one for a notification-queue PR. The gallery teaches what shapes work; the request decides which shape fits.
-## Folder map
-- `SKILL.md` — this file.
-- `skills/doc-gist/scripts/gist_upload.py` — transport: HTML in, gist + preview URLs out.
-- `skills/doc-gist/scripts/doc_gist_scripts_constants/gist_upload_constants.py` — the URL prefixes and template strings.
-- `references/examples/` — Thariq's 20 html-effectiveness prototypes (`01`–`20`) plus one original addition (`21-decision-signoff.html`).
-- (PostToolUse hook lives in `packages/claude-dev-env/hooks/workflow/doc_gist_auto_publish.py` — wired into the plugin's `hooks.json`.)

package/skills/doc-gist/references/CLAUDE.md DELETED Viewed

@@ -1,9 +0,0 @@
-# doc-gist/references
-Reference material for the `doc-gist` skill.
-## Subdirectories
-| Directory | Role |
-|---|---|
-| `examples/` | A gallery of 21 self-contained HTML artifact examples that show distinct shapes — annotated PR diff, design system swatches, slide deck, incident timeline, prompt tuner, decision sign-off, and more. Study these when designing a fresh artifact; do not copy them verbatim. |

package/skills/doc-gist/references/examples/01-exploration-code-approaches.html DELETED Viewed

@@ -1,453 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Debounced search — three approaches</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;
-      padding: 56px 32px 96px;
-      -webkit-font-smoothing: antialiased;
-    }
-    .page {
-      max-width: 1360px;
-      margin: 0 auto;
-    }
-    /* ---------- header ---------- */
-    header.page-head {
-      margin-bottom: 48px;
-      max-width: 760px;
-    }
-    .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;
-      color: var(--gray-700);
-    }
-    .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;
-    }
-    /* ---------- approach grid ---------- */
-    .approaches {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 28px;
-      margin-bottom: 56px;
-    }
-    @media (max-width: 1100px) {
-      .approaches { grid-template-columns: 1fr; }
-    }
-    .approach {
-      background: var(--white);
-      border: 1.5px solid var(--gray-300);
-      border-radius: 12px;
-      padding: 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }
-    .approach-head h2 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 21px;
-      color: var(--slate);
-      margin-bottom: 6px;
-    }
-    .approach-head .num {
-      display: inline-block;
-      font-family: var(--mono);
-      font-size: 12px;
-      background: var(--oat);
-      color: var(--slate);
-      padding: 2px 8px;
-      border-radius: 8px;
-      margin-right: 8px;
-      vertical-align: 3px;
-    }
-    .approach-head p {
-      font-size: 14px;
-      color: var(--gray-500);
-    }
-    /* ---------- code panel ---------- */
-    .code {
-      background: var(--slate);
-      border-radius: 12px;
-      padding: 18px 20px;
-      overflow-x: auto;
-    }
-    .code pre {
-      font-family: var(--mono);
-      font-size: 12.5px;
-      line-height: 1.65;
-      color: #E8E6DE;
-      white-space: pre;
-    }
-    .code .kw  { color: var(--clay); }     /* keywords */
-    .code .str { color: var(--olive); }    /* strings  */
-    .code .cm  { color: var(--gray-500); } /* comments */
-    .code .fn  { color: #C9B98A; }         /* identifiers, subtle warm */
-    /* ---------- tradeoffs table ---------- */
-    .tradeoffs {
-      border: 1.5px solid var(--gray-300);
-      border-radius: 8px;
-      overflow: hidden;
-      font-size: 13px;
-    }
-    .tradeoffs .row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-    }
-    .tradeoffs .row + .row {
-      border-top: 1.5px solid var(--gray-300);
-    }
-    .tradeoffs .cell {
-      padding: 10px 14px;
-    }
-    .tradeoffs .cell:first-child {
-      border-right: 1.5px solid var(--gray-300);
-    }
-    .tradeoffs .head {
-      background: var(--gray-150);
-      font-weight: 600;
-      color: var(--slate);
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-    .tradeoffs .pro::before,
-    .tradeoffs .con::before {
-      content: '';
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      margin-right: 8px;
-      vertical-align: 2px;
-    }
-    .tradeoffs .pro::before { background: var(--olive); }
-    .tradeoffs .con::before { background: var(--clay); }
-    /* ---------- chip footer ---------- */
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .chip {
-      font-family: var(--mono);
-      font-size: 11.5px;
-      background: var(--gray-150);
-      border: 1.5px solid var(--gray-300);
-      color: var(--gray-700);
-      padding: 5px 10px;
-      border-radius: 8px;
-      white-space: nowrap;
-    }
-    .chip strong { color: var(--slate); font-weight: 600; }
-    /* ---------- recommendation ---------- */
-    .reco {
-      border-left: 4px solid var(--clay);
-      background: var(--white);
-      border-radius: 0 12px 12px 0;
-      padding: 24px 28px;
-      max-width: 860px;
-    }
-    .reco h2 {
-      font-family: var(--serif);
-      font-weight: 500;
-      font-size: 22px;
-      color: var(--slate);
-      margin-bottom: 10px;
-    }
-    .reco p {
-      font-size: 15px;
-      margin-bottom: 8px;
-    }
-    .reco code {
-      font-family: var(--mono);
-      font-size: 0.92em;
-      background: var(--gray-150);
-      padding: 1px 6px;
-      border-radius: 4px;
-    }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <header class="page-head">
-      <div class="eyebrow">Exploration · Birchline web client</div>
-      <h1>Three ways to implement debounced search</h1>
-      <div class="prompt-box">
-        <span class="label">Prompt</span>
-        Show me three different ways to implement debounced search for the task
-        filter input in our React codebase, with tradeoffs for each.
-      </div>
-    </header>
-    <!-- ============================================================= -->
-    <section class="approaches">
-      <!-- ---------- Approach 1 ---------- -->
-      <article class="approach">
-        <header class="approach-head">
-          <h2><span class="num">01</span>Inline useEffect + setTimeout</h2>
-          <p>Debounce logic lives directly inside the component that owns the input.</p>
-        </header>
-        <div class="code"><pre><span class="kw">export function</span> <span class="fn">TaskSearch</span>() {
-  <span class="kw">const</span> [draft, setDraft] = <span class="fn">useState</span>(<span class="str">''</span>);
-  <span class="kw">const</span> [query, setQuery] = <span class="fn">useState</span>(<span class="str">''</span>);
-  <span class="fn">useEffect</span>(() <span class="kw">=&gt;</span> {
-    <span class="kw">const</span> id = <span class="fn">setTimeout</span>(() <span class="kw">=&gt;</span> setQuery(draft), <span class="str">300</span>);
-    <span class="kw">return</span> () <span class="kw">=&gt;</span> <span class="fn">clearTimeout</span>(id);
-  }, [draft]);
-  <span class="kw">const</span> { data } = <span class="fn">useTasks</span>({ search: query });
-  <span class="kw">return</span> (
-    &lt;<span class="fn">input</span>
-      value={draft}
-      onChange={(e) <span class="kw">=&gt;</span> setDraft(e.target.value)}
-      placeholder=<span class="str">"Filter tasks…"</span>
-    /&gt;
-  );
-}</pre></div>
-        <div class="tradeoffs">
-          <div class="row head">
-            <div class="cell">Pro</div>
-            <div class="cell">Con</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Zero new abstractions to learn</div>
-            <div class="cell con">Logic duplicated everywhere search exists</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Easy to step through in devtools</div>
-            <div class="cell con">Two pieces of state for one conceptual value</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">No dependency or bundle change</div>
-            <div class="cell con">Delay constant is buried in component body</div>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Bundle impact: <strong>+0 kb</strong></span>
-          <span class="chip">Testability: <strong>medium</strong></span>
-          <span class="chip">Reuse: <strong>low</strong></span>
-          <span class="chip">SSR safe: <strong>yes</strong></span>
-        </div>
-      </article>
-      <!-- ---------- Approach 2 ---------- -->
-      <article class="approach">
-        <header class="approach-head">
-          <h2><span class="num">02</span>Custom useDebounce hook</h2>
-          <p>Extract the timer into a shared hook under <code style="font-family:var(--mono)">src/hooks/</code>.</p>
-        </header>
-        <div class="code"><pre><span class="cm">// src/hooks/useDebounce.ts</span>
-<span class="kw">export function</span> <span class="fn">useDebounce</span>&lt;T&gt;(value: T, ms = <span class="str">300</span>): T {
-  <span class="kw">const</span> [debounced, setDebounced] = <span class="fn">useState</span>(value);
-  <span class="fn">useEffect</span>(() <span class="kw">=&gt;</span> {
-    <span class="kw">const</span> id = <span class="fn">setTimeout</span>(() <span class="kw">=&gt;</span> setDebounced(value), ms);
-    <span class="kw">return</span> () <span class="kw">=&gt;</span> <span class="fn">clearTimeout</span>(id);
-  }, [value, ms]);
-  <span class="kw">return</span> debounced;
-}
-<span class="cm">// TaskSearch.tsx</span>
-<span class="kw">const</span> [draft, setDraft] = <span class="fn">useState</span>(<span class="str">''</span>);
-<span class="kw">const</span> query = <span class="fn">useDebounce</span>(draft, <span class="str">300</span>);
-<span class="kw">const</span> { data } = <span class="fn">useTasks</span>({ search: query });</pre></div>
-        <div class="tradeoffs">
-          <div class="row head">
-            <div class="cell">Pro</div>
-            <div class="cell">Con</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Single import reused across filter, command bar, board search</div>
-            <div class="cell con">One more file to maintain and document</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Trivial to unit test with fake timers</div>
-            <div class="cell con">Generic <code style="font-family:var(--mono)">T</code> hides intent slightly</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Delay is a visible, tunable argument</div>
-            <div class="cell con">Still re-renders on every keystroke</div>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Bundle impact: <strong>+0.2 kb</strong></span>
-          <span class="chip">Testability: <strong>high</strong></span>
-          <span class="chip">Reuse: <strong>high</strong></span>
-          <span class="chip">SSR safe: <strong>yes</strong></span>
-        </div>
-      </article>
-      <!-- ---------- Approach 3 ---------- -->
-      <article class="approach">
-        <header class="approach-head">
-          <h2><span class="num">03</span>Tiny external library</h2>
-          <p>Adopt <code style="font-family:var(--mono)">use-debounce</code> for both values and callbacks.</p>
-        </header>
-        <div class="code"><pre><span class="kw">import</span> { useDebouncedCallback }
-  <span class="kw">from</span> <span class="str">'use-debounce'</span>;
-<span class="kw">export function</span> <span class="fn">TaskSearch</span>() {
-  <span class="kw">const</span> [query, setQuery] = <span class="fn">useState</span>(<span class="str">''</span>);
-  <span class="kw">const</span> onChange = <span class="fn">useDebouncedCallback</span>(
-    (next: <span class="kw">string</span>) <span class="kw">=&gt;</span> setQuery(next),
-    <span class="str">300</span>,
-    { leading: <span class="kw">false</span>, maxWait: <span class="str">1000</span> },
-  );
-  <span class="kw">const</span> { data } = <span class="fn">useTasks</span>({ search: query });
-  <span class="kw">return</span> (
-    &lt;<span class="fn">input</span>
-      defaultValue=<span class="str">""</span>
-      onChange={(e) <span class="kw">=&gt;</span> onChange(e.target.value)}
-    /&gt;
-  );
-}</pre></div>
-        <div class="tradeoffs">
-          <div class="row head">
-            <div class="cell">Pro</div>
-            <div class="cell">Con</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">leading / trailing / maxWait handled for us</div>
-            <div class="cell con">New runtime dependency to audit and update</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Callback form skips intermediate re-renders</div>
-            <div class="cell con">Uncontrolled input diverges from Birchline form patterns</div>
-          </div>
-          <div class="row">
-            <div class="cell pro">Well-tested edge cases (unmount, flush, cancel)</div>
-            <div class="cell con">~1.4 kb gzipped for something we could own</div>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Bundle impact: <strong>+1.4 kb</strong></span>
-          <span class="chip">Testability: <strong>high</strong></span>
-          <span class="chip">Reuse: <strong>high</strong></span>
-          <span class="chip">SSR safe: <strong>yes</strong></span>
-        </div>
-      </article>
-    </section>
-    <!-- ============================================================= -->
-    <aside class="reco">
-      <h2>Recommendation</h2>
-      <p>
-        Go with <strong>approach 02, the custom <code>useDebounce</code> hook</strong>.
-        Birchline already has three places that hand-roll the inline pattern
-        (task filter, command palette, member picker), so extracting one
-        shared hook removes duplication without taking on a new dependency.
-      </p>
-      <p>
-        Revisit approach 03 only if we later need <code>maxWait</code> or
-        <code>flush()</code> semantics — the library earns its bundle cost
-        once the requirements outgrow a ten-line hook.
-      </p>
-    </aside>
-  </div>
-</body>
-</html>