npm - aiblueprint-cli - Versions diffs - 1.4.73 → 1.4.75 - Mend

aiblueprint-cli 1.4.73 → 1.4.75

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 (23) hide show

package/README.md +7 -0
package/agents-config/skills/use-style/SKILL.md +54 -0
package/agents-config/skills/use-style/examples/anthropic.html +400 -0
package/agents-config/skills/use-style/examples/dusk.html +368 -0
package/agents-config/skills/use-style/examples/gumroad.html +396 -0
package/agents-config/skills/use-style/examples/linear.html +389 -0
package/agents-config/skills/use-style/examples/new-york-times.html +417 -0
package/agents-config/skills/use-style/examples/raycast.html +402 -0
package/agents-config/skills/use-style/examples/split-auth.html +366 -0
package/agents-config/skills/use-style/examples/stripe.html +386 -0
package/agents-config/skills/use-style/examples/vercel.html +379 -0
package/agents-config/skills/use-style/styles/anthropic.md +266 -0
package/agents-config/skills/use-style/styles/dusk.md +269 -0
package/agents-config/skills/use-style/styles/grid.md +284 -0
package/agents-config/skills/use-style/styles/gumroad.md +273 -0
package/agents-config/skills/use-style/styles/linear.md +355 -0
package/agents-config/skills/use-style/styles/new-york-times.md +277 -0
package/agents-config/skills/use-style/styles/raycast.md +285 -0
package/agents-config/skills/use-style/styles/split-auth.md +281 -0
package/agents-config/skills/use-style/styles/stripe.md +372 -0
package/agents-config/skills/use-style/styles/vercel-simple.md +322 -0
package/dist/cli.js +513 -42
package/package.json +1 -1

package/agents-config/skills/use-style/examples/vercel.html ADDED Viewed

@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Real Analysis · Is the $200 comparison honest?</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg:#fff; --fg:#000; --gray-1:#fafafa; --gray-2:#f2f2f2;
+    --border:#eaeaea; --border-2:#e0e0e0; --muted:#666; --faint:#999;
+    --s1:#000; --s2:#9a9a9a; --s3:#d4d4d4; --s4:#ececec;
+  }
+  * { box-sizing:border-box; margin:0; padding:0; }
+  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
+  body { font-family:'Geist',system-ui,sans-serif; background:var(--bg); color:var(--fg); line-height:1.5; -webkit-font-smoothing:antialiased; font-feature-settings:"cv01","cv02","ss01"; }
+  .wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
+  .mono { font-family:'Geist Mono',monospace; } .num { font-variant-numeric:tabular-nums; }
+  .eyebrow { font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
+  .topnav { display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-bottom:1px solid var(--border); }
+  .topnav a { color:var(--muted); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; gap:7px; }
+  .topnav a:hover { color:var(--fg); }
+  .topnav .right { display:flex; gap:20px; }
+  .topnav .active { color:var(--fg); font-weight:600; }
+  header { padding:72px 0 52px; border-bottom:1px solid var(--border); }
+  .tagline { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
+  .tagline .dot { width:6px; height:6px; border-radius:50%; background:var(--fg); }
+  h1 { font-size:clamp(32px,5.5vw,54px); font-weight:600; letter-spacing:-0.035em; line-height:1.05; max-width:18ch; }
+  h1 .muted2 { color:var(--faint); }
+  .lede { color:var(--muted); font-size:clamp(15px,2vw,18px); margin-top:22px; max-width:60ch; }
+  .stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
+  .stat { padding:34px 26px; border-right:1px solid var(--border); }
+  .stat:last-child { border-right:none; }
+  .stat .k { font-family:'Geist Mono',monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
+  .stat .v { font-size:38px; font-weight:600; letter-spacing:-0.03em; margin-top:14px; line-height:1; }
+  .stat .d { font-size:13px; color:var(--muted); margin-top:12px; }
+  section { padding:68px 0; border-bottom:1px solid var(--border); }
+  .sec-head { margin-bottom:38px; }
+  .sec-head h2 { font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:-0.025em; margin-top:14px; }
+  .sec-head .step { font-family:'Geist Mono',monospace; font-size:12px; color:var(--faint); }
+  .sec-head p { color:var(--muted); margin-top:14px; max-width:68ch; font-size:15px; }
+  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
+  .panel { border:1px solid var(--border); border-radius:12px; padding:24px; background:var(--bg); }
+  .panel .ptitle { font-size:14px; font-weight:600; }
+  .panel .psub { font-family:'Geist Mono',monospace; font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
+  .chart-box { position:relative; height:300px; margin-top:16px; }
+  .chart-box.tall { height:230px; }
+  .chart-box.sm { height:190px; }
+  .legend { display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; }
+  .legend span { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
+  .legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
+  .note { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); font-size:14px; color:var(--muted); }
+  .note b { color:var(--fg); font-weight:600; }
+  .big-callout { background:var(--fg); color:var(--bg); border-radius:16px; padding:34px 30px; margin-top:8px; }
+  .big-callout .lbl { font-family:'Geist Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); }
+  .big-callout .row { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 40px; margin-top:18px; }
+  .big-callout .row .v { font-size:46px; font-weight:600; letter-spacing:-0.03em; }
+  .big-callout .row .eq { font-size:30px; color:rgba(255,255,255,.5); }
+  .big-callout .cap { margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.8); max-width:60ch; }
+  .three { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
+  .mini { border:1px solid var(--border); border-radius:12px; padding:22px; }
+  .mini .mt { font-size:13.5px; font-weight:600; } .mini .ms { font-family:'Geist Mono',monospace; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }
+  .mini .cwrap { position:relative; height:150px; margin-top:14px; }
+  .verdict-table { width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
+  .verdict-table td { padding:18px 22px; font-size:15px; border-top:1px solid var(--border); vertical-align:top; }
+  .verdict-table tr:first-child td { border-top:none; }
+  .verdict-table td:first-child { color:var(--muted); width:42%; }
+  .verdict-table td:last-child { font-weight:500; }
+  .tag { font-family:'Geist Mono',monospace; font-size:10px; padding:2px 7px; border-radius:5px; vertical-align:middle; margin-right:8px; letter-spacing:.04em; }
+  .tag.no { background:var(--fg); color:var(--bg); } .tag.tie { background:var(--gray-2); color:var(--fg); border:1px solid var(--border-2); }
+  footer { padding:54px 0 90px; }
+  footer .eyebrow { margin-bottom:22px; display:block; }
+  footer ul { list-style:none; display:grid; gap:13px; max-width:82ch; }
+  footer li { font-size:14px; color:var(--muted); padding-left:22px; position:relative; }
+  footer li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--border-2); border-radius:50%; }
+  footer li .mono { color:var(--fg); }
+  footer a { color:var(--muted); } footer a:hover { color:var(--fg); }
+  footer .sig { margin-top:30px; font-size:13px; color:var(--faint); }
+  @media (max-width:860px){
+    .stats{grid-template-columns:1fr 1fr;} .stat:nth-child(2){border-right:none;}
+    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border);}
+    .grid-2{grid-template-columns:1fr;} .three{grid-template-columns:1fr;}
+  }
+  @media (max-width:480px){ .stats{grid-template-columns:1fr;} .stat{border-right:none;border-bottom:1px solid var(--border);} }
+  /* === responsive hardening (auto) === */
+  html, body { max-width:100%; overflow-x:hidden; }
+  img, canvas, svg, table { max-width:100%; }
+  .note, .mono, .lede, .big-callout .cap, .sec-head p, .stat .d, footer li { overflow-wrap:anywhere; word-break:break-word; }
+  @media (max-width:760px){
+    .grid-2, .three { grid-template-columns:1fr !important; }
+    .stats { grid-template-columns:1fr 1fr; }
+    .topnav, .nav, .topband .inner, .navpills, .hero { flex-wrap:wrap; }
+    .chart-box { height:260px; }
+    .chart-box.tall { height:240px; }
+    section { padding-top:40px; padding-bottom:40px; }
+  }
+  @media (max-width:560px){
+    .wrap { padding-left:16px; padding-right:16px; }
+    .stats { grid-template-columns:1fr; }
+    .big-callout { padding:24px 20px; }
+    .big-callout .row { gap:10px 22px; }
+    .big-callout .row .v { font-size:40px; }
+    .big-callout .row .eq { font-size:24px; }
+    .verdict-table, .verdict-table tbody, .verdict-table tr, .verdict-table td { display:block; width:100% !important; }
+    .verdict-table td { padding:14px 18px !important; }
+    .verdict-table td:first-child { padding-bottom:4px; }
+    .verdict-table td:last-child { padding-top:0; border-top:none !important; }
+    .chart-box { height:230px; }
+    .stat .v { font-size:32px; }
+    h1 { max-width:100% !important; }
+  }
+  /* === chart responsive fix (auto) === */
+  .grid-2, .three { min-width:0; }
+  .grid-2 > *, .three > *, .panel, .mini, .stat { min-width:0; }
+  .chart-box, .cwrap { position:relative; width:100%; }
+  .chart-box canvas, .cwrap canvas { max-width:100% !important; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <nav class="topnav">
+    <a href="index.html">← All reports</a>
+    <div class="right">
+      <a href="codex-max20/Codex-Max20-report.html">Codex $200</a>
+      <a href="claude-max20/Claude-Max20-report.html">Claude Max 20x</a>
+      <a class="active" href="#">Real analysis</a>
+    </div>
+  </nav>
+  <header>
+    <div class="tagline"><span class="dot"></span><span class="eyebrow">Methodology audit · is the comparison honest?</span></div>
+    <h1>Most of the "value" is <span class="muted2">cache, not work.</span></h1>
+    <p class="lede">The reports say Codex $200 is worth ~$8,600/mo and Claude $200 ~$18,900/mo. Here is the proof that comparing those two numbers as "Claude is worth 2× more" is misleading - and what is actually true.</p>
+  </header>
+  <div class="stats num">
+    <div class="stat"><div class="k">Your tokens today</div><div class="v">92.7%</div><div class="d">are cache reads, not new work</div></div>
+    <div class="stat"><div class="k">That are output</div><div class="v">0.6%</div><div class="d">the only real "work" line</div></div>
+    <div class="stat"><div class="k">Real output value</div><div class="v">≈ tie</div><div class="d">$977 vs $911 / mo</div></div>
+    <div class="stat"><div class="k">The 2× gap</div><div class="v">artifact</div><div class="d">cache pricing + extrapolation</div></div>
+  </div>
+  <!-- 1. TODAY: count vs value -->
+  <section>
+    <div class="sec-head">
+      <div class="step">01 / the symptom</div>
+      <h2>Your tokens today: where they go vs where the dollars go</h2>
+      <p>Measured from your own logs (<span class="mono">~/.claude/projects</span>, deduped by request, 2026-05-30). Almost everything is cache. Output - the actual work - is a sliver of the count and a small share of the dollars.</p>
+    </div>
+    <div class="grid-2">
+      <div class="panel">
+        <div class="ptitle">Token count</div>
+        <div class="psub">89.8M tokens today</div>
+        <div class="chart-box"><canvas id="countD"></canvas></div>
+      </div>
+      <div class="panel">
+        <div class="ptitle">API-equivalent dollars</div>
+        <div class="psub">$113 today, at Opus list</div>
+        <div class="chart-box"><canvas id="dollarD"></canvas></div>
+      </div>
+    </div>
+    <div class="legend">
+      <span><i style="background:var(--s3)"></i> Cache read</span>
+      <span><i style="background:var(--s2)"></i> Cache write</span>
+      <span><i style="background:var(--s1)"></i> Output (real work)</span>
+      <span><i style="background:var(--s4)"></i> Fresh input</span>
+    </div>
+    <p class="note"><b>~87% of the dollars are caching overhead; ~12% is output.</b> Caching does not stop the model re-reading the whole context on every call - it just makes the re-read cheap. The token count stays huge because it equals context size × number of calls (~110K re-read × 758 calls today).</p>
+  </section>
+  <!-- 2. DECOMPOSITION -->
+  <section>
+    <div class="sec-head">
+      <div class="step">02 / the core proof</div>
+      <h2>Both $200 plans, decomposed to the same monthly basis</h2>
+      <p>Each plan's value split into output vs cache, priced at its own provider's API list, scaled to 100% of monthly quota. The output slivers (black) are nearly identical. The entire headline gap is the gray cache bars.</p>
+    </div>
+    <div class="panel">
+      <div class="chart-box tall"><canvas id="decomp"></canvas></div>
+      <div class="legend">
+        <span><i style="background:var(--s1)"></i> Output (real work)</span>
+        <span><i style="background:var(--s3)"></i> Cache re-read ($0.50/1M)</span>
+        <span><i style="background:var(--s2)"></i> First read (input / cache-write)</span>
+      </div>
+      <p class="note">Codex total <b>$8,589</b> · Claude total <b>$18,891</b>. Output: <b>$977 vs $911</b>. Input/cache side: <b>$7,612 vs $17,980 (2.4×)</b> - that is where 100% of the gap lives.</p>
+    </div>
+  </section>
+  <!-- 3. OUTPUT TIE -->
+  <section>
+    <div class="sec-head">
+      <div class="step">03 / the punchline</div>
+      <h2>Strip away cache: the real work is a tie</h2>
+      <p>Output is the least gameable metric - the tokens the model actually generated for you. On a monthly, full-quota basis the two $200 plans are within ~7% of each other.</p>
+    </div>
+    <div class="big-callout">
+      <div class="lbl">Output value per month (real work)</div>
+      <div class="row num">
+        <div><div class="v">$977</div><div class="lbl" style="margin-top:6px">Codex $200</div></div>
+        <div class="eq">≈</div>
+        <div><div class="v">$911</div><div class="lbl" style="margin-top:6px">Claude $200</div></div>
+      </div>
+      <p class="cap">In raw output tokens: ~32.6M/mo (Codex) vs ~36.4M/mo (Claude) - a 1.12× edge, nowhere near the 2× the headline implies.</p>
+    </div>
+  </section>
+  <!-- 4. THREE ASYMMETRIES -->
+  <section>
+    <div class="sec-head">
+      <div class="step">04 / why the headline looks 2×</div>
+      <h2>Three calculation asymmetries inflate Claude's number</h2>
+      <p>None of these reflect more work delivered. They reflect how the number was built.</p>
+    </div>
+    <div class="three">
+      <div class="mini">
+        <div class="mt">Extrapolation multiplier</div>
+        <div class="ms">lower = more reliable</div>
+        <div class="cwrap"><canvas id="aExtrap"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px">Codex was measured at 99% quota. Claude was one day at 10%, multiplied ×10 - any error amplified 10×.</p>
+      </div>
+      <div class="mini">
+        <div class="mt">Price to cache context</div>
+        <div class="ms">first read, per 1M</div>
+        <div class="cwrap"><canvas id="aPrice"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px">Anthropic charges 2× for a "cache write" vs OpenAI's normal input. Same behavior, pricier meter.</p>
+      </div>
+      <div class="mini">
+        <div class="mt">Context re-reads</div>
+        <div class="ms">per output token</div>
+        <div class="cwrap"><canvas id="aReread"></canvas></div>
+        <p class="note" style="margin-top:14px;padding-top:14px">Claude re-reads ~2× more context per unit of output, bloating the cache-read line.</p>
+      </div>
+    </div>
+  </section>
+  <!-- 5. BRIDGE -->
+  <section>
+    <div class="sec-head">
+      <div class="step">05 / watch the gap melt</div>
+      <h2>Remove the artifacts and $18.9k slides toward $8.6k</h2>
+      <p>Starting from Claude's headline, undo each calculation artifact in turn. The gap to Codex's measured number shrinks at every step.</p>
+    </div>
+    <div class="panel">
+      <div class="chart-box tall"><canvas id="bridge"></canvas></div>
+      <p class="note">Re-pricing cache writes at Codex's rate: $18,891 → <b>$15,562</b>. Adjusting the one-day ×10 extrapolation for a plausibly heavy sample day (÷1.5): → <b>~$12,600</b>. Codex, essentially measured: <b>$8,589</b>. The residual is genuine extra context churn, not extra work.</p>
+    </div>
+  </section>
+  <!-- 6. VERDICT -->
+  <section>
+    <div class="sec-head">
+      <div class="step">06 / the honest answer</div>
+      <h2>What is actually true</h2>
+    </div>
+    <table class="verdict-table">
+      <tr>
+        <td>Which $200 plan does more real work?</td>
+        <td><span class="tag tie">tie</span>Roughly equal - output ~$977 vs ~$911 / mo.</td>
+      </tr>
+      <tr>
+        <td>Which API would bill more for this usage at full quota?</td>
+        <td>Claude - but because it charges more for the same caching and the figure is a ×10 extrapolation, not because you get more done.</td>
+      </tr>
+      <tr>
+        <td>Is "$9k vs $20k = Claude worth 2×" a fair comparison?</td>
+        <td><span class="tag no">no</span>It compares a measurement to a one-day ×10 guess, across two pricing models that treat caching differently, on a metric dominated by context overhead.</td>
+      </tr>
+    </table>
+    <p class="note">The deeper trap is the word <b>"value."</b> API-equivalent value measures what the provider's meter would charge, so it rewards verbose context, heavy cache re-reads, and a pricier cache-write rate. A plan can score "2× more valuable" while delivering identical output. That is exactly what happened here.</p>
+  </section>
+  <footer>
+    <span class="eyebrow">Confidence &amp; sources</span>
+    <ul>
+      <li><b style="color:var(--fg)">Proven from data</b> (high): your usage is 92.7% cache / 0.6% output; output value is ~equal; 100% of the gap is cache; first-read price is $5 (Codex) vs $10 (Claude); scale factors ×4.38 vs ×43.33.</li>
+      <li><b style="color:var(--fg)">Inferred from the math</b> (high): normalizing cache-write price drops Claude to ~$15.6k; the ×10 extrapolation makes the headline unreliable.</li>
+      <li><b style="color:var(--fg)">External reporting</b> (medium): exact subscription-limit weighting, Opus-vs-Sonnet ratio, and the 2026 cache-TTL change are documented by press, not by this repo's data.</li>
+      <li>Data: <span class="mono">result/melvynx/codex/2026-05-30T09-13-16Z</span>, <span class="mono">result/taka-foo/claude</span>. Full write-up with reproduce script: <a href="real-analysis.md">real-analysis.md</a>.</li>
+      <li>Sources: <a href="https://support.claude.com/en/articles/14552983-models-usage-and-limits-in-claude-code">Anthropic limits</a> · <a href="https://www.theregister.com/2026/03/31/anthropic_claude_code_limits/">The Register</a> · <a href="https://www.xda-developers.com/anthropic-quietly-nerfed-claude-code-hour-cache-token-budget/">XDA cache nerf</a>.</li>
+    </ul>
+    <div class="sig">Real Analysis · generated from agents-analysis data · API-equivalent value is not the provider's real cost.</div>
+  </footer>
+</div>
+<script>
+  Chart.defaults.font.family = "Geist, system-ui, sans-serif";
+  Chart.defaults.color = "#999";
+  Chart.defaults.font.size = 12;
+  const FG="#000", S2="#9a9a9a", S3="#d4d4d4", S4="#ececec", GRID="#eaeaea";
+  const usd = (v) => "$" + v.toLocaleString("en-US",{maximumFractionDigits:0});
+  const tip = { backgroundColor:"#000", padding:10, cornerRadius:8 };
+  // doughnut helper
+  function dough(id, data, fmt){
+    new Chart(document.getElementById(id), {
+      type:"doughnut",
+      data:{ labels:["Cache read","Cache write","Output","Fresh input"],
+        datasets:[{ data, backgroundColor:[S3,S2,FG,S4], borderColor:"#fff", borderWidth:3, hoverOffset:6 }] },
+      options:{ responsive:true, maintainAspectRatio:false, cutout:"62%",
+        plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>c.label+": "+fmt(c.parsed) }} } }
+    });
+  }
+  dough("countD", [83.3,5.7,0.5,0.3], (v)=>v+"M tokens");
+  dough("dollarD", [41.64,56.93,13.23,1.48], (v)=>"$"+v.toFixed(2));
+  // decomposition stacked horizontal
+  new Chart(document.getElementById("decomp"), {
+    type:"bar",
+    data:{ labels:["Codex $200","Claude $200"],
+      datasets:[
+        { label:"Output (real work)", data:[977,911], backgroundColor:FG, borderRadius:{topLeft:4,bottomLeft:4} },
+        { label:"Cache re-read", data:[5303,11319], backgroundColor:S3 },
+        { label:"First read (input/cache-write)", data:[2309,6661], backgroundColor:S2, borderRadius:{topRight:4,bottomRight:4} }
+      ] },
+    options:{ indexAxis:"y", responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>c.dataset.label+": "+usd(c.parsed.x) }} },
+      scales:{ x:{ stacked:true, grid:{color:GRID}, border:{display:false}, ticks:{ callback:(v)=>"$"+(v/1000)+"k" } },
+               y:{ stacked:true, grid:{display:false}, border:{color:GRID}, ticks:{ font:{family:"Geist Mono",size:13,weight:600} } } } }
+  });
+  // mini bar helper
+  function mini(id, vals, fmt, max){
+    new Chart(document.getElementById(id), {
+      type:"bar",
+      data:{ labels:["Codex","Claude"], datasets:[{ data:vals, backgroundColor:[S2,FG], borderRadius:6, barPercentage:0.6 }] },
+      options:{ responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>fmt(c.parsed.y) }} },
+        scales:{ x:{ grid:{display:false}, border:{color:GRID}, ticks:{font:{family:"Geist Mono",size:12}} },
+                 y:{ grid:{color:GRID}, border:{display:false}, max, ticks:{ callback:fmt } } } }
+    });
+  }
+  mini("aExtrap", [4.38,43.33], (v)=>"×"+(typeof v==="number"?v.toFixed(v<10?1:0):v), 48);
+  mini("aPrice", [5,10], (v)=>"$"+v, 12);
+  mini("aReread", [326,621], (v)=>v.toFixed(0), 700);
+  // bridge
+  new Chart(document.getElementById("bridge"), {
+    type:"bar",
+    data:{ labels:["Claude headline","− cache-write premium","− 1-day extrapolation","Codex (measured)"],
+      datasets:[{ data:[18891,15562,12600,8589], backgroundColor:[FG,"#555","#888",S2], borderRadius:6, barPercentage:0.62 }] },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{display:false}, tooltip:{...tip, callbacks:{ label:(c)=>usd(c.parsed.y)+" / mo" }} },
+      scales:{ x:{ grid:{display:false}, border:{color:GRID}, ticks:{font:{family:"Geist Mono",size:11}} },
+               y:{ grid:{color:GRID}, border:{display:false}, ticks:{ callback:(v)=>"$"+(v/1000)+"k" } } } }
+  });
+</script>
+<script>
+  // force Chart.js to reflow on viewport changes (belt-and-suspenders)
+  (function(){
+    function resizeAll(){ if(window.Chart && Chart.instances){ Object.values(Chart.instances).forEach(function(c){ try{c.resize();}catch(e){} }); } }
+    var t; window.addEventListener('resize', function(){ clearTimeout(t); t=setTimeout(resizeAll,120); });
+    window.addEventListener('orientationchange', function(){ setTimeout(resizeAll,200); });
+  })();
+</script>
+</body>
+</html>

package/agents-config/skills/use-style/styles/anthropic.md ADDED Viewed

@@ -0,0 +1,266 @@
+# Anthropic Style
+Warm, literary AI-lab aesthetic. Cream paper, bold grotesque display mixed with a reading serif, clay-coral accent, big soft-rounded panels. Calm, human, considered.
+**Reference vibe:** anthropic.com (marketing) and claude.ai (the app).
+---
+## Core vibe
+- **Warm, not clinical.** Ivory/oatmeal paper, ink near-black, a single clay-coral accent. Never pure `#fff` / `#000`.
+- **Two type voices.** Bold neo-grotesque sans for display/UI; a humanist serif for reading copy and product surfaces. The contrast is the signature.
+- **Editorial hero.** Oversized lowercase sans words, some ghosted at low opacity and scattered, paired with a serif paragraph. Composed like a poster.
+- **Big soft radius.** Large rounded rectangles (`16-28px`) on dark panels and media; pill buttons. Soft, never sharp blueprint corners.
+- **Quiet structure.** Few rules, lots of air. Hierarchy comes from type scale and the cream/ink/dark-panel contrast, not from boxes everywhere.
+- **One accent.** Clay coral `#CC785C` / `#D97757` (the Claude spark). Used sparingly: a mark, a link, an active dot.
+---
+## Color
+Portable palette. Map to project tokens when available.
+| Role | Hex | CSS var (suggested) | Usage |
+|------|-----|---------------------|-------|
+| Paper | `#F0EFE9` | `--an-bg` | Marketing background (warm oatmeal) |
+| Paper light | `#FAF9F5` | `--an-bg-light` | Lighter cream sections, cards on cream |
+| Ink | `#191919` | `--an-fg` | Headlines, body on cream |
+| Ink soft | `#141413` | `--an-ink` | Dark panels / app canvas |
+| Slate | `#3D3D3A` | `--an-slate` | Secondary text on cream |
+| Muted | `#6B6B66` | `--an-muted` | Captions, metadata, ghost nav |
+| Ghost | `#C9C7BD` | `--an-ghost` | Scattered ghosted hero words, faint type |
+| Border | `#DAD9D2` | `--an-border` | Hairline dividers on cream |
+| Coral | `#CC785C` | `--an-coral` | Primary accent: marks, links, active dot |
+| Coral bright | `#D97757` | `--an-coral-bright` | Spark glyph, hover |
+### Dark / app surface (claude.ai)
+| Role | Hex | Usage |
+|------|-----|-------|
+| App canvas | `#262624` | Main chat area |
+| App rail | `#1F1E1D` | Sidebar |
+| App raised | `#30302E` | Hover rows, input field |
+| Ink on dark | `#F5F4EE` | Primary text (warm white) |
+| Muted on dark | `#A8A79E` | Secondary nav, labels |
+| Border on dark | `#3A3A37` | Dividers, input outline |
+| Coral | `#D97757` | Spark, send accent |
+### Tailwind mapping (when no project tokens)
+```css
+:root {
+  --an-bg: #f0efe9;
+  --an-bg-light: #faf9f5;
+  --an-fg: #191919;
+  --an-slate: #3d3d3a;
+  --an-muted: #6b6b66;
+  --an-ghost: #c9c7bd;
+  --an-coral: #cc785c;
+  --an-panel: #141413;
+}
+```
+**Rule:** Cream + ink is the whole page. Coral is a spice, not a fill. Dark panels (`#141413`) are objects placed on the cream, with large radius.
+---
+## Typography
+Two faces, deliberate split.
+### Font stacks
+| Role | Stack | Open substitute |
+|------|-------|-----------------|
+| Display / UI (sans) | `"Styrene A", "Styrene B", Inter, "Helvetica Neue", Arial, sans-serif` | `Inter` (tight tracking) |
+| Reading / product (serif) | `"Copernicus", "Tiempos Text", Georgia, "Source Serif 4", serif` | `"Source Serif 4"` or Georgia |
+| Logo wordmark | sans, bold, uppercase, with the `\` slash: `ANTHROP\C` | Inter / Styrene |
+claude.ai sets long-form answers in the **serif**; the app chrome (sidebar, buttons) in the **sans**. Match that split.
+### Scale
+| Level | Font | Pattern |
+|-------|------|---------|
+| Hero word | Sans | `text-6xl md:text-8xl font-bold lowercase tracking-[-0.02em] leading-[0.95]` |
+| Ghost hero word | Sans | same size, `text-[#c9c7bd]` (faint), scattered |
+| Section / H2 | Sans | `text-3xl md:text-4xl font-semibold tracking-tight` |
+| Serif lede / body-feature | Serif | `text-xl md:text-2xl leading-[1.35]` |
+| Body (product / reading) | Serif | `text-[17px] leading-[1.7] text-[#191919]` |
+| Body (UI / marketing prose) | Sans | `text-base leading-relaxed text-[#3d3d3a]` |
+| Nav / button / label | Sans | `text-sm font-medium` |
+| Eyebrow / caption | Sans | `text-xs uppercase tracking-[0.08em] text-[#6b6b66]` |
+### Hero composition (the poster)
+Big lowercase sans words laid across a wide band, a couple of them ghosted and offset, with a serif paragraph anchored right.
+```tsx
+<section className="bg-[#f0efe9] px-8 py-24">
+  <div className="grid grid-cols-1 lg:grid-cols-[1.3fr_1fr] gap-12">
+    <div className="relative font-sans font-bold lowercase leading-[0.95] tracking-[-0.02em] text-[clamp(48px,9vw,128px)] text-[#191919]">
+      <span className="underline decoration-2 underline-offset-[6px]">research</span>
+      <span className="ml-4 text-[#c9c7bd]">and</span>
+      <div>safety <span className="text-[#c9c7bd]">the</span> <span className="text-[#c9c7bd]">put</span></div>
+    </div>
+    <p className="font-serif text-2xl leading-[1.35] text-[#191919] self-center">
+      AI will have a vast impact on the world. Anthropic is a public benefit corporation...
+    </p>
+  </div>
+</section>
+```
+---
+## Layout tokens
+| Token | Value |
+|-------|-------|
+| `AN_SHELL` | `mx-auto w-full max-w-[1200px] px-6 md:px-10` |
+| `AN_SECTION` | `py-16 md:py-24` |
+| `AN_PANEL_RADIUS` | `rounded-[28px]` (large dark media panels) |
+| `AN_CARD_RADIUS` | `rounded-2xl` (cards) |
+| `AN_GAP` | `gap-8 md:gap-12` |
+### Dark media panel (the big black rounded block)
+A near-full-width dark rectangle with very large top radius, used for video/imagery/feature on the cream.
+```tsx
+<div className="rounded-[28px] bg-[#141413] text-[#f5f4ee] p-8 md:p-12 min-h-[420px]">...</div>
+```
+### App shell (claude.ai)
+```tsx
+<div className="flex min-h-screen bg-[#262624] text-[#f5f4ee]">
+  <aside className="w-64 bg-[#1f1e1d] border-r border-[#3a3a37] p-3">{nav}</aside>
+  <main className="flex-1">
+    <div className="mx-auto max-w-3xl px-6 py-10 font-serif text-[17px] leading-[1.7]">{answer}</div>
+  </main>
+</div>
+```
+---
+## Component patterns
+### Logo wordmark
+```tsx
+<span className="font-sans text-xl font-bold uppercase tracking-tight">ANTHROP\C</span>
+```
+The backslash replaces the `I`. On the app it's the serif "Claude" wordmark instead.
+### Nav
+Sans, medium, ink. Dropdowns with a small chevron. Generous spacing.
+```tsx
+<nav className="flex items-center gap-8 font-sans text-sm font-medium text-[#191919]">
+  <a>Research</a><a>Economic Futures</a>
+  <a className="inline-flex items-center gap-1">Learn <span>▾</span></a>
+</nav>
+```
+### Primary button (black pill)
+```tsx
+<button className="rounded-full bg-[#191919] px-5 py-2.5 font-sans text-sm font-medium text-[#f5f4ee] hover:bg-black">
+  Try Claude
+</button>
+```
+A split button pairs it with a square dropdown chip at the same radius family.
+### Coral link / mark
+```tsx
+<a className="text-[#cc785c] underline decoration-1 underline-offset-2 hover:text-[#d97757]">read more</a>
+```
+### The spark (Claude glyph)
+The coral asterisk/burst is the brand mark. Use as a small accent, loading indicator, or section marker - never large flat fills.
+```tsx
+<span className="text-[#d97757] text-lg">✳</span>
+```
+### Card on cream
+```tsx
+<div className="rounded-2xl bg-[#faf9f5] border border-[#dad9d2] p-6">
+  <h3 className="font-sans text-lg font-semibold">Title</h3>
+  <p className="mt-2 font-serif text-[17px] leading-relaxed text-[#3d3d3a]">...</p>
+</div>
+```
+### App message (serif answer)
+```tsx
+<div className="font-serif text-[17px] leading-[1.7] text-[#f5f4ee] space-y-5">
+  <p><b className="font-semibold">1. Postictal vomiting.</b> After a seizure...</p>
+</div>
+```
+Bold lead-ins inside serif paragraphs are a Claude pattern.
+### App input
+```tsx
+<div className="rounded-2xl bg-[#30302e] border border-[#3a3a37] px-4 py-3 font-sans text-sm text-[#a8a79e]">
+  Write a message...
+</div>
+```
+---
+## Charts (warm data viz)
+- Series: ink `#191919`, warm grays `#6b6b66` / `#c9c7bd` / `#dad9d2`, with **coral `#cc785c`** as the single highlight series.
+- Background stays cream; gridlines `#dad9d2`; axis text sans, muted.
+- Soft-rounded bars (`borderRadius` 6-8), flat fills, no glow.
+- Tooltip: ink `#191919` background, warm-white text.
+- On dark panels, flip to warm-white text + `#3a3a37` gridlines, same coral highlight.
+---
+## Motion & effects
+- Calm and slow. Subtle fades, gentle hover (bg/opacity shift), the spark can rotate slowly.
+- Large radius + flat fill is the look; avoid heavy drop shadows. A faint shadow under floating dark panels is OK.
+- No neon, no glass blur, no aggressive transforms.
+---
+## Mode selection
+| Surface | Background | Type lead | Notes |
+|---------|------------|-----------|-------|
+| Marketing / landing | Cream `#f0efe9` | bold sans display + serif body | dark rounded media panels, pill buttons, ghost words |
+| Product / app (Claude) | Dark warm `#262624` | serif body, sans chrome | sidebar, coral spark, rounded input |
+| Reading / docs | Cream light `#faf9f5` | serif body | wide air, hairline dividers |
+---
+## Anti-patterns
+| Avoid | Why |
+|-------|-----|
+| Pure `#fff` background or `#000` ink | Anthropic is warm: cream + near-black only |
+| Serif for the hero display | Display is bold grotesque sans; serif is for reading |
+| All-sans product copy | Long-form/product reading is serif (the Claude tell) |
+| Coral as a large fill or multiple accent colors | One coral spice, used sparingly |
+| Sharp `rounded-none` panels | Big soft radius is core; dark panels especially |
+| Cold blue/indigo tech accent | Stay in the warm clay family |
+| Dense bordered cards everywhere | Prefer air + type scale; few rules |
+| Heavy neon glow / glassmorphism | Out of register; keep it flat and calm |
+---
+## Project overrides
+If the repo defines `.agents/styles/anthropic.md` or `.agents/styles/anthropic-theme.md`, prefer those tokens and components over this portable spec.