diff --git a/assets/style.css b/assets/style.css index 92c2619..df28192 100644 --- a/assets/style.css +++ b/assets/style.css @@ -255,14 +255,96 @@ body { .prose em { font-style: italic; } +/* Inline `` — only when NOT inside a 
. */
 .prose code {
   font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
   font-size: 0.9em;
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(0, 0, 0, 0.045);
   padding: 0.1em 0.3em;
   border-radius: 3px;
+  word-break: break-word;
 }
 
+/* Fenced code blocks: container is 
, child  resets the inline
+   tint/padding so we don't get a "background per line" look. */
+.prose pre {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  background: #f3efe6;          /* warmer than the page (#fbfaf6) */
+  color: var(--color-text);
+  border: 1px solid var(--color-rule-bold);
+  border-radius: 6px;
+  padding: 0.95rem 1.1rem;
+  margin: 1.3rem 0;
+  overflow-x: auto;             /* horizontal scroll, no line wrap */
+  -webkit-overflow-scrolling: touch;
+  tab-size: 2;
+  font-variant-ligatures: none;
+}
+.prose pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  white-space: pre;
+  word-break: normal;
+}
+
+/* Tables — editorial: header row in Inter small caps, hairline row dividers,
+   tabular numerics for metric columns, horizontal scroll on overflow. */
+.prose table {
+  display: block;             /* enables overflow-x on the wrapper */
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: 1.3rem 0;
+  font-size: 0.92rem;
+  font-variant-numeric: tabular-nums;
+}
+.prose table thead,
+.prose table tbody,
+.prose table tr { width: 100%; }
+.prose th,
+.prose td {
+  text-align: left;
+  padding: 0.55rem 0.85rem 0.55rem 0;
+  border-bottom: 1px solid var(--color-rule);
+  vertical-align: top;
+}
+.prose th:last-child,
+.prose td:last-child {
+  padding-right: 0;
+}
+.prose th {
+  font-family: var(--sans);
+  font-weight: 600;
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  border-bottom: 2px solid var(--color-rule-bold);
+  padding-bottom: 0.5rem;
+}
+.prose tbody tr:last-child th,
+.prose tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+/* Blockquotes — left rule in accent, italic, slightly muted. */
+.prose blockquote {
+  margin: 1.3rem 0;
+  padding: 0.2rem 0 0.2rem 1.1rem;
+  border-left: 3px solid var(--color-accent);
+  color: var(--color-muted);
+  font-style: italic;
+}
+.prose blockquote p:first-child { margin-top: 0; }
+.prose blockquote p:last-child { margin-bottom: 0; }
+.prose blockquote em { font-style: normal; }   /* avoid double-italic on nested em */
+
 /* -------- Footer -------- */
 
 .page-footer {
@@ -484,6 +566,16 @@ a:focus-visible,
   .prose ul, .prose ol, .prose p { orphans: 3; widows: 3; }
   .prose li { break-inside: avoid; page-break-inside: avoid; }
 
+  /* Code, tables, blockquotes — avoid splitting across pages where possible. */
+  .prose pre,
+  .prose table,
+  .prose blockquote {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+  .prose pre { font-size: 9pt; background: #f3efe6; }
+  .prose table { font-size: 9.5pt; }
+
   .prose a[href^="http"]::after {
     content: " (" attr(href) ")";
     color: #5a5a5a;
diff --git a/essays/optimizing-claude-code-cache-read-inflation.md b/essays/optimizing-claude-code-cache-read-inflation.md
index ff6e154..1a2acef 100644
--- a/essays/optimizing-claude-code-cache-read-inflation.md
+++ b/essays/optimizing-claude-code-cache-read-inflation.md
@@ -440,6 +440,15 @@ Beispiele:
 
 Der schlechteste Weg ist oft: komplette Datei lesen und dann im Chat "verstehen".
 
+Wer das Werkzeug-Set systematisch aufbauen möchte, findet eine kuratierte und dokumentierte Auswahl unter [`netresearch/coding_agent_cli_toolset`](https://github.com/netresearch/coding_agent_cli_toolset) — ein installierbares Bündel der CLI-Tools, die Coding-Agents in der Praxis tatsächlich Tokens sparen.
+
+Zwei Claude-Skills operationalisieren denselben Gedanken auf Prompt-Ebene, damit Claude die passenden Tools selbstständig auswählt statt zum Default-`Read` zu greifen:
+
+- [`netresearch/file-search-skill`](https://github.com/netresearch/file-search-skill) — strukturierte Code- und Inhaltssuche (Serena-Symbol-Operationen, ripgrep-Pattern-Treffer, AST-Suche), damit Claude den gezielten Treffer holt statt der ganzen Datei.
+- [`netresearch/data-tools-skill`](https://github.com/netresearch/data-tools-skill) — Routinen für strukturierte Daten (`jq`, `yq`, `xmlstarlet`, Miller), damit JSON/YAML/XML/CSV gezielt abgefragt statt komplett in den Kontext gezogen werden.
+
+Die CLI-Tools liefern die Grundlage; die Skills liefern das Wissen, wann und wie Claude sie einsetzen soll.
+
 ### `/insights` und `/status` nutzen
 
 Fragt regelmäßig:
@@ -472,6 +481,8 @@ Am Session-Ende lohnt sich eine Mini-Retro:
 - Wo ist der Kontext unnötig gewachsen?
 - Was sollte als Skill-Verbesserung oder Memory-Regel persistiert werden?
 
+Wer diesen Retro-Loop systematisch betreiben statt nur sporadisch durchführen möchte, kann ihn mit [`netresearch/claude-coach-plugin`](https://github.com/netresearch/claude-coach-plugin) automatisieren — das Plugin sammelt Korrekturen, wiederkehrende Fehler und Tool-Failures während der Session und schlägt am Ende konkrete Skill- oder Memory-Regeln vor. Der Loop „Korrektur → persistierte Regel → bessere nächste Session" wird damit zu einem Teil des Workflows statt zu einer freiwilligen Disziplinübung.
+
 Ziel ist nicht Selbstbeschäftigung. Ziel ist, die nächste Session billiger und präziser zu machen.
 
 ---
diff --git a/scripts/build.py b/scripts/build.py
index e01ad49..995278f 100644
--- a/scripts/build.py
+++ b/scripts/build.py
@@ -123,17 +123,24 @@ def render_md(body: str) -> str:
     return md.convert(body)
 
 
-def load_inline_css() -> str:
-    """Read assets/style.css, rewrite font URLs for inlining into HTML.
-
-    Same trick as the CV repo: source CSS references fonts as
-    `url("fonts/...")` (relative to the CSS file), but when inlined into
-    HTML via