@drunkcoding/agents-and-skills 0.0.45 → 0.0.46

package/plugins/html-effectiveness/scripts/render.js

@@ -1,176 +0,0 @@
-#!/usr/bin/env node
-// CLI + library: render a template + data into a self-contained HTML file.
-// Exit codes: 0 ok, 1 generic, 2 template-not-found, 3 slot schema mismatch, 4 fs write error.
-
-import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
-import { dirname, resolve, join } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import { parseArgs } from 'node:util';
-import { render as mustache } from './mustache.js';
-
-const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
-const PLUGIN_ROOT = dirname(SCRIPT_DIR);
-
-const ASSET_BUNDLES = {
-  base: { css: 'assets/base.css', js: 'assets/base.js' },
-  components: { css: 'assets/components.css' },
-  charts: { js: 'assets/charts.js' },
-};
-
-function validateSlot(templateId, slotPath, schema, value) {
-  if (schema.required && (value === undefined || value === null)) {
-    const err = new Error(`${templateId}:${slotPath} required but missing`);
-    err.code = 3;
-    throw err;
-  }
-  if (value === undefined || value === null) return;
-  const type = schema.type;
-  if (type === 'string' || type === 'html') {
-    if (typeof value !== 'string') {
-      const err = new Error(`${templateId}:${slotPath} expected string got ${typeof value}`);
-      err.code = 3;
-      throw err;
-    }
-  } else if (type === 'number') {
-    if (typeof value !== 'number') {
-      const err = new Error(`${templateId}:${slotPath} expected number got ${typeof value}`);
-      err.code = 3;
-      throw err;
-    }
-  } else if (type === 'boolean') {
-    if (typeof value !== 'boolean') {
-      const err = new Error(`${templateId}:${slotPath} expected boolean got ${typeof value}`);
-      err.code = 3;
-      throw err;
-    }
-  } else if (type === 'array') {
-    if (!Array.isArray(value)) {
-      const err = new Error(`${templateId}:${slotPath} expected array got ${typeof value}`);
-      err.code = 3;
-      throw err;
-    }
-    if (schema.of) {
-      value.forEach((item, i) => {
-        for (const [k, subType] of Object.entries(schema.of)) {
-          const subSchema = typeof subType === 'string' ? { type: subType } : subType;
-          validateSlot(templateId, `${slotPath}[${i}].${k}`, subSchema, item?.[k]);
-        }
-      });
-    }
-  } else if (type === 'object') {
-    if (typeof value !== 'object' || Array.isArray(value)) {
-      const err = new Error(`${templateId}:${slotPath} expected object got ${typeof value}`);
-      err.code = 3;
-      throw err;
-    }
-  }
-}
-
-function validate(templateId, slots, data) {
-  for (const [name, schemaRaw] of Object.entries(slots)) {
-    const schema = typeof schemaRaw === 'string' ? { type: schemaRaw } : schemaRaw;
-    validateSlot(templateId, name, schema, data[name]);
-  }
-}
-
-function loadAssets(pluginRoot, bundles, extraJs) {
-  const css = [];
-  const js = [];
-  for (const name of bundles || []) {
-    const b = ASSET_BUNDLES[name];
-    if (!b) continue;
-    if (b.css) css.push(readFileSync(join(pluginRoot, b.css), 'utf8'));
-    if (b.js) js.push(readFileSync(join(pluginRoot, b.js), 'utf8'));
-  }
-  if (extraJs) js.push(readFileSync(join(pluginRoot, extraJs), 'utf8'));
-  return { css: css.join('\n'), js: js.join('\n') };
-}
-
-function escapeForTitle(s) {
-  return String(s).replace(/[&<>"']/g, (c) => ({
-    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-  }[c]));
-}
-
-export function renderReport({ templateId, data, outPath, manifestPath, pluginRoot }) {
-  const root = pluginRoot || PLUGIN_ROOT;
-  const mPath = manifestPath || join(root, 'templates/manifest.json');
-  const manifest = JSON.parse(readFileSync(mPath, 'utf8'));
-  const entry = manifest[templateId];
-  if (!entry) {
-    const ids = Object.keys(manifest).filter((k) => k !== '_meta');
-    const err = new Error(`template not found: ${templateId}. valid: ${ids.join(', ')}`);
-    err.code = 2;
-    throw err;
-  }
-
-  validate(templateId, entry.slots, data);
-
-  const tmplRelPath = entry.tmpl || `templates/${templateId}.html.tmpl`;
-  const tmpl = readFileSync(join(root, tmplRelPath), 'utf8');
-  const body = mustache(tmpl, data);
-
-  const { css, js } = loadAssets(root, entry.asset_bundles, entry.extra_js);
-  const title = escapeForTitle(data.title || entry.title || 'Report');
-
-  const html = `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>${title}</title>
-<style>${css}</style>
-</head>
-<body>
-${body}
-<script>${js}</script>
-</body>
-</html>
-`;
-
-  try {
-    mkdirSync(dirname(outPath), { recursive: true });
-    writeFileSync(outPath, html, 'utf8');
-    const sidecar = {
-      template: templateId,
-      rendered_at: new Date().toISOString(),
-      render_version: '0.1.0',
-      data,
-    };
-    writeFileSync(outPath + '.data.json', JSON.stringify(sidecar, null, 2), 'utf8');
-  } catch (e) {
-    const err = new Error(`failed to write ${outPath}: ${e.message}`);
-    err.code = 4;
-    throw err;
-  }
-
-  return outPath;
-}
-
-function cli() {
-  const { values } = parseArgs({
-    options: {
-      template: { type: 'string' },
-      data: { type: 'string' },
-      out: { type: 'string' },
-    },
-  });
-  if (!values.template || !values.data || !values.out) {
-    process.stderr.write('usage: render.js --template=<id> --data=<json-path> --out=<html-path>\n');
-    process.exit(1);
-  }
-  try {
-    const data = JSON.parse(readFileSync(resolve(values.data), 'utf8'));
-    const finalPath = renderReport({
-      templateId: values.template,
-      data,
-      outPath: resolve(values.out),
-    });
-    process.stdout.write(finalPath + '\n');
-  } catch (e) {
-    process.stderr.write((e.stack || e.message) + '\n');
-    process.exit(e.code ?? 1);
-  }
-}
-
-if (import.meta.url === pathToFileURL(process.argv[1]).href) cli();

package/plugins/html-effectiveness/skills/html-effectiveness/SKILL.md

@@ -1,94 +0,0 @@
----
-name: html-effectiveness
-description: Use when the user wants dense information, status, comparison, plan, code review, or research output rendered as a self-contained interactive HTML report instead of plain markdown. Renders via plugin templates and scripts/render.js into a single HTML file under docs/reports/ (overridable via CLAUDE.md).
----
-
-# HTML Effectiveness — Interactive Output
-
-Turn dense information into a self-contained, browser-based HTML document the user can explore interactively. Markdown is a wall of text; HTML is a spatial, interactive document. Zero dependencies, single file, opens anywhere.
-
-## When to invoke
-
-Invoke this skill when the user asks for any of:
-
-- "Make a report", "render as HTML", "interactive view"
-- Status updates: weekly status, monthly recap, project digest
-- Incident: post-mortem, outage writeup
-- Code: PR review, code understanding, exploration of implementation approaches
-- Design: design system, component variants, prototypes
-- Research: feature explainer, concept explainer, tutorial
-- Planning: implementation plan, rollout, roadmap
-- Decisions: comparison board, decision matrix
-- Visual: slide deck, flowchart, SVG illustration
-- Editor tooling: triage board, feature flags, prompt tuner
-
-If the request fits a report-style output and rendering as HTML would be clearer than markdown, invoke the skill and delegate to the `report-builder` agent.
-
-## Template catalog
-
-20 templates ship with this plugin. Full table in `plugins/html-effectiveness/docs/template-gallery.md` (regen via `node plugins/html-effectiveness/scripts/catalog.js`). Highlights:
-
-- `01` / `02` — exploration comparisons (code approaches, visual designs)
-- `03` — code review board
-- `04` — code understanding / architecture walk-through
-- `05` / `06` — design system, component variants
-- `07` / `08` — prototype animation, prototype interaction
-- `09` — slide deck (arrow-key nav)
-- `10` — SVG illustrations
-- `11` — status report
-- `12` — incident report
-- `13` — flowchart diagram
-- `14` / `15` — research explainers (feature, concept)
-- `16` — implementation plan (annotated timeline)
-- `17` — PR writeup
-- `18` / `19` / `20` — editor tools (triage board, feature flags, prompt tuner)
-
-## Render contract
-
-Always uphold these invariants:
-
-1. **Inline-bundle** — the final HTML is single-file, self-contained. No `<link>` or `<script src>` references. The render script inlines `base.css`, `components.css`, `base.js`, plus any per-template extras.
-2. **Escape strings** — string slots are HTML-escaped. Raw-HTML slots are only allowed when the manifest flags the slot as `"html"`.
-3. **Output path** — read repo `CLAUDE.md` for `html-effectiveness.reportDir`; fallback to `docs/reports/`. Filename: `YYYY-MM-DD-<slug>.html`; slug derived from title (kebab-case, ASCII-only, max 60 chars).
-4. **Sidecar** — `<report>.html.data.json` is always written alongside the HTML so the report can be regenerated by re-running `render.js` on the sidecar.
-
-## Workflow
-
-1. Pick template via `manifest.json` (match user intent against `use_cases` and `pattern`).
-2. Fill slot data from the conversation; record it as JSON.
-3. Invoke render script:
-
-   ```bash
-   node plugins/html-effectiveness/scripts/render.js \
-     --template=<id> \
-     --data=<data.json> \
-     --out=<reportDir>/YYYY-MM-DD-<slug>.html
-   ```
-
-4. Confirm output path to the user; offer `snip render --format html < <path>` to preview in browser.
-
-## Design principles
-
-Preserved from upstream `ThariqS/html-effectiveness`:
-
-- Avoid purple/blue gradient backgrounds, generic feature grids, center-everything layouts, decorative patterns.
-- Prioritize real data, scannable hierarchy, spatial grouping, progressive disclosure over decoration.
-
-## Technical requirements
-
-- Single `.html` file, fully self-contained.
-- CSS variables for theming (light-only baseline, matching upstream palette).
-- System font stack and 150ms smooth transitions.
-- Responsive design 375px–1440px.
-- Semantic HTML5 with ARIA labels.
-- Print styles that expand all hidden content.
-
-## Failure modes
-
-- **No template fits**: present the top 2 closest matches with one-line summaries; ask the user to confirm, or offer plain-markdown fallback. Never silently force a poor fit.
-- **Missing slot data**: ask one question at a time; respect the cap of 6 questions before forcing render with best-guess defaults plus a note of what was assumed.
-- **Render error**: surface `template:slot expected <type> got <type>` to the user; fix the slot value; retry.
-
-## Vendored templates
-
-Templates are vendored, not auto-synced. The pinned upstream SHA lives at `templates/manifest.json` → `_meta.upstream_sha`. To refresh a single template: `node plugins/html-effectiveness/scripts/extract.js fetch <id>.html` then `split <id>.html`. Files land in `.tmp/html-effectiveness/extract/` (gitignored). Hand-merge the diff back into `templates/<id>.html.tmpl` and update `_meta.upstream_sha` if pinning a new revision.

package/plugins/html-effectiveness/templates/01-exploration-code-approaches.html.tmpl

@@ -1,400 +0,0 @@
-<!--
-template: 01-exploration-code-approaches
-upstream: 01-exploration-code-approaches.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<div class="page">
-
-    <header class="page-head">
-      <div class="eyebrow">Exploration · Acme web client</div>
-      <h1>{{title}}</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 Acme 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>.
-        Acme 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>
-
-<style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
-.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>