diff --git a/anton/core/llm/prompt_builder.py b/anton/core/llm/prompt_builder.py
index d7340fe..734bcc5 100644
--- a/anton/core/llm/prompt_builder.py
+++ b/anton/core/llm/prompt_builder.py
@@ -61,6 +61,18 @@ def _build_tool_prompts_section(self, tool_defs: list["ToolDef"] | None) -> str:
 
         return "\n\n".join(chunks)
 
+    # Built-in skills that are always available regardless of ~/.anton/skills/.
+    # Each entry must have "label" and "when_to_use".
+    _BUILTIN_SKILL_SUMMARIES: list[dict] = [
+        {
+            "label": "generate_dashboard_html",
+            "when_to_use": (
+                "when the user asks to build a dashboard, chart, report, "
+                "presentation, or any data visualization as a standalone HTML page"
+            ),
+        },
+    ]
+
     def _build_procedural_memory_section(
         self, skill_store: "SkillStore | None"
     ) -> str:
@@ -71,12 +83,17 @@ def _build_procedural_memory_section(
         the full procedure. Returns an empty string if no store is wired
         or no skills are saved — the caller skips the section entirely.
         """
-        if skill_store is None:
-            return ""
-        try:
-            summaries = skill_store.list_summaries()
-        except Exception:
-            return ""
+        summaries: list[dict] = list(self._BUILTIN_SKILL_SUMMARIES)
+        if skill_store is not None:
+            try:
+                user_summaries = skill_store.list_summaries()
+            except Exception:
+                user_summaries = []
+            # User skills override builtins with the same label.
+            builtin_labels = {s["label"] for s in summaries}
+            for s in user_summaries:
+                if s.get("label") not in builtin_labels:
+                    summaries.append(s)
         if not summaries:
             return ""
 
diff --git a/anton/core/llm/prompts.py b/anton/core/llm/prompts.py
index 73f57da..42e2e1e 100644
--- a/anton/core/llm/prompts.py
+++ b/anton/core/llm/prompts.py
@@ -236,124 +236,358 @@
 
 
 VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT = """\
-LIST THE INSIGHTS (terse — one line each, not an essay):
-Before coding, list the insights you want to present/convey/highlight as `1 - <chart/infographic/etc>: <insight it conveys and why it matters>..`
-Example: `1 - Line chart of weekly signups: shows growth inflection after the March launch, flags whether momentum is sustained.`
-This is a checklist, not a brief — no narrative prose, no design discussion.
-
-BUILD THE DASHBOARD — use multiple scratchpad cells, but produce ONE single self-contained HTML file:
-
-  CRITICAL: The final dashboard MUST be a single .html file with ALL data, CSS, and JS inlined. \
-Do NOT reference external local files (like data.js) — browsers block local file:// cross-references \
-for security reasons and the dashboard will silently fail to load data.
-
-  SECURITY (critical): Dashboards may be published to the web. NEVER embed API keys, tokens, \
-passwords, connection strings, or any credentials in the HTML, JS, or inline data. Fetch data \
-in scratchpad cells using credentials from environment variables, then serialize only the \
-resulting data into the dashboard. If the user explicitly asks to embed a credential \
-(e.g. for a live-updating dashboard), warn them that publishing will expose it and get \
-confirmation before proceeding.
-
-  Build the parts in separate cells, then assemble at the end:
-
-  CELL 1 — Serialize data to a JS string variable (programmatic, no HTML):
-  Serialize all computed data (dataframes, metrics, KPIs) into a Python string. Build a \
-Python dict with keys like "kpis", "tables", "charts" — each containing the relevant data. \
-Convert DataFrames with df.to_dict(orient='records'). Use json.dumps(data, default=str) to \
-handle dates, Decimal, numpy types. Store as a Python variable: \
-`data_js = 'const D = ' + json_string + ';'` — do NOT write to a separate file.
-
-  CELL 2 — Build CSS + HTML structure as a Python string variable:
-  Write the HTML head (styles, CDN script tags) and body structure (header, KPIs, chart divs, \
-tabs, tables) as a Python string variable `html_body`. This cell builds the template.
-
-  CELL 3+ — Build JS chart rendering logic as Python string variables:
-  Write the JavaScript that initializes charts, populates tables, handles tabs, etc. \
-Split across multiple cells if needed to avoid token limits. Store as `js_charts` etc.
-
-  FINAL CELL — Assemble and write the HTML file:
-  Combine: `html = html_body.replace('</body>', f'<script>{{data_js}}{{js_charts}}</script></body>')` \
-or similar.
-
-  SELF-CONTAINED OUTPUT (critical):
-  Prefer inlining everything — CSS in `<style>`, JS in `<script>`, data as JS variables. \
-A single .html file is the most portable and publishable format. \
-If the dataset is very large (>100KB of JSON), you may write it to a separate .js file \
-in the SAME directory and reference it with a \
-relative `<script src="dashboard_data.js">` tag. The publisher will auto-bundle sibling \
-files referenced in the HTML. Never reference files outside the output directory.
-
-  WHY: (1) Browsers block local file:// cross-references across directories. \
-(2) Splitting the build across cells catches JS/CSS errors early — if a cell has a syntax issue \
-in a string, you'll see it before the final assembly. (3) Large datasets in single cells timeout. \
-(4) Self-contained files can be published to the web via /publish without missing assets.
-
-  PYTHON → JS STRING SAFETY (critical):
-  When building JS code inside Python strings, escape sequences get resolved by Python BEFORE \
-writing to the file. This means '\\n' in Python becomes a literal newline in the output, which \
-breaks JavaScript string literals. Rules:
-  - Use '\\\\n' in Python if you need a literal \\n in the JS output
-  - Use raw strings (r"...") for JS code blocks when possible
-  - NEVER use '\\n', '\\t', or '\\\"' inside JS strings within Python — double-escape them
-  - After writing the file, sanity-check that no string literals span multiple lines
+# HTML dashboard / presentation output
+
+The dashboard is produced as a **single self-contained `.html` file**. You build
+it by filling placeholders in a shared HTML template with strings returned by
+small isolated functions, each living in its own scratchpad cell.
 
-Output format:
-- Unless the user explicitly asks for a different format, always output visualizations \
-as polished, single-file HTML pages — never raw PNGs or bare image files.
 {output_context}
 
-Visual design:
-- Make it look good by default. Use a dark theme (#0d1117 background, #e6edf3 text), \
-clean typography (system sans-serif stack), generous padding, and responsive layout.
-- ALWAYS use Apache ECharts for interactive charts. Load it via CDN: \
-`<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>`. \
-No Python dependencies needed — just write the HTML with inline JS. Use ECharts' built-in \
-dark theme: `echarts.init(dom, 'dark')`, then customize colors to match #0d1117 background.
-- NEVER use Plotly, matplotlib, or other charting libraries unless the user explicitly asks.
-
-Line smoothing (critical — smooth: true misrepresents volatile data):
-- DEFAULT: `smooth: false` on ALL line series. Straight segments between data points are \
-the honest representation — they show actual volatility, drawdowns, and inflection points.
-- EXCEPTION: Use `smooth: true` ONLY for cumulative/monotonic series (cumulative returns, \
-running totals, growth curves) where the trend matters more than point-to-point moves.
-- Decision heuristic: Does the line ever reverse direction meaningfully? If yes → smooth: false. \
-Is it a running sum, cumulative metric, or long-horizon trend? → smooth: true is acceptable.
-- Line widths: 2.5 for hero/primary lines, 1.5 for multi-line comparisons, 1 for secondary/reference lines.
-
-Chart readability (critical — labels must NEVER overlap):
-- Use `axisLabel: {{ rotate: -45 }}` or `{{ rotate: 45 }}` on crowded axes. \
-Set `grid: {{ containLabel: true }}` so labels never clip. Use `legend: {{ type: 'scroll', \
-bottom: 0 }}` to place scrollable legends below the chart. For pie/donut charts use \
-`label: {{ show: true, position: 'outside' }}` with `labelLayout: {{ hideOverlap: true }}`. \
-For bar charts with many categories, use horizontal bars (`yAxis` as category) or \
-abbreviate labels with `axisLabel: {{ formatter }}`. Always configure rich `tooltip` with \
-`formatter` functions for precise value display on hover. Use `dataZoom` for time series \
-so users can zoom into ranges.
-
-Multi-tab / multi-view dashboards (critical — charts fail silently on hidden containers):
-- ECharts, Chart.js, and Plotly all render nothing when called on a container with \
-`display: none` or 0×0 dimensions — no error, no warning, just a blank chart. \
-NEVER call `echarts.init()` inside `DOMContentLoaded` for tabs/pages that start hidden.
-- Initialize charts lazily, gated on first visibility: in the tab-click handler, \
-check a `Set` of already-rendered tabs and call the page's init function only on \
-first visit. Example pattern: \
-`const _rendered = new Set(['overview']); function showPage(name) {{ /* toggle classes */ \
-if (!_rendered.has(name)) {{ _rendered.add(name); initChartsFor(name); }} }}` \
-— only the default-visible page initializes on load.
-
-Layout and composition:
-- For non-chart visualizations (tables, reports, dashboards), write clean HTML/CSS directly. \
-Use CSS grid or flexbox. Add subtle styling: rounded corners, soft shadows, hover effects.
-- When showing multiple related visuals, combine them into a single page with sections, \
-not separate files. Ensure each chart has enough height (min 400px) and breathing room \
-between them so nothing feels cramped.
-- Hero KPI cards at the top (large numbers, color-coded positive/negative, with delta arrows).
-- Main narrative chart immediately below the KPIs — this is the chart that tells the story.
-- Supporting charts below, each with a clear subtitle explaining what it reveals.
-- Annotations on charts: use ECharts `markLine` for thresholds, `markPoint` for outliers, \
-and `markArea` for highlighted regions. A chart without annotations is a missed opportunity.
-- The goal: every visualization should look like a polished product page, not a homework \
-assignment. Think dark-mode dashboard, not Jupyter default.\
+## 1. General guidance
+
+### Output
+- Always produce ONE `.html` file with CSS, JS, and data inlined — never reference
+  external local files (browsers block local `file://` cross-references).
+- If the data payload is very large (>100 KB), you may write it to a sibling
+  `.js` file in the same output directory; the publisher auto-bundles siblings.
+  Never reference files outside that directory.
+
+### Security
+- Dashboards may be published to the web. NEVER embed API keys, tokens, passwords,
+  or connection strings in the HTML, JS, or inline data. Fetch data in scratchpad
+  cells using credentials from environment variables, then serialize only the
+  resulting data into the dashboard. If the user explicitly asks to embed a
+  credential, warn them first and confirm.
+
+### Visual style
+- Dark theme by default: `#0d1117` background, `#e6edf3` text, clean sans-serif,
+  generous padding, responsive layout. Hero KPI cards on top (big numbers,
+  color-coded deltas), main narrative chart below, supporting charts after.
+- Think polished product page, not Jupyter default.
+
+### Charts
+- Use Apache ECharts (CDN loaded in the template). Dark theme: `echarts.init(dom, 'dark')`.
+- NEVER use Plotly, matplotlib, or other libs unless the user explicitly asks.
+- **Line smoothing:** default `smooth: false` on all line series — straight
+  segments are the honest representation of volatile data. Use `smooth: true`
+  only for cumulative/monotonic series (running totals, growth curves).
+- **Readability:** use `axisLabel: {{ rotate: -45 }}` on crowded axes,
+  `grid: {{ containLabel: true }}` so labels never clip, `legend: {{ type: 'scroll', bottom: 0 }}`,
+  `labelLayout: {{ hideOverlap: true }}` on pies. Configure `tooltip.formatter` for
+  precise values. Use `dataZoom` for time series.
+- **Annotations:** use `markLine` for thresholds, `markPoint` for outliers,
+  `markArea` for highlighted regions — a chart without them is a missed opportunity.
+- **Hidden containers (critical):** ECharts renders nothing on a container with
+  `display: none` or 0×0 dimensions. For tabs/pages that start hidden,
+  initialize charts lazily on first visibility, not on `DOMContentLoaded`.
+
+### Python → JS string safety
+When you embed JS code inside a Python string, Python resolves escape sequences
+BEFORE the file is written. `'\\n'` becomes a real newline and breaks JS string
+literals. Use `'\\\\n'` for a literal `\\n`, prefer raw strings (`r"..."`) for JS
+blocks, and sanity-check the final file for stray multi-line string literals.
+
+## 2. HTML template
+
+Below is the shared HTML skeleton. It ships with a GitHub-dark CSS theme, the
+ECharts CDN, a pre-registered `github-dark` ECharts theme, and an `initChart`
+helper. You never modify it inline — your block functions produce strings that
+replace the `AGENT: XXX` markers via `template.replace(...)`. Markers in HTML
+contexts use `<!-- AGENT: XXX -->` syntax; markers inside `<style>` or
+`<script>` use `/* AGENT: XXX */` so they stay valid CSS/JS.
+
+Markers (each appears exactly once):
+
+| Marker | Location | What your function returns |
+|--------|----------|----------------------------|
+| `<!-- AGENT: PAGE_TITLE -->` | inside `<title>` | plain-text title (no tags) |
+| `/* AGENT: CUSTOM_STYLES */` | end of `<style>` | extra CSS — feel free to add any rules, keyframes, or utility classes the dashboard needs (new `.card-*` variants, block-specific layouts, animations, custom gradients, etc.). Return `""` only when the base theme already covers everything. |
+| `<!-- AGENT: HEADER -->` | top of `<body>` | `<div class="header">...</div>` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
+| `<!-- AGENT: CONTENT -->` | main body area | one or more `<section>` blocks holding charts, tables, KPIs |
+| `/* AGENT: CHART_DATA */` | in `<script>` | JS `const` declarations for datasets used by charts |
+| `/* AGENT: CHART_INITS */` | in `<script>` | `initChart('dom-id', {{ ...echarts option... }})` calls, one per chart container |
+
+Template file contents:
+
+```html
+<!-- DASHBOARD_HTML_TEMPLATE -->
+```
+
+## 3. Reading the template in scratchpad
+
+The template file ships inside the installed `anton` package at
+`anton/templates/template-dark.html`. Define the helper below in one of
+your first scratchpad cells so the final assembly cell can call it:
+
+```python
+def __read_html_template():
+    import anton
+    from pathlib import Path
+    path = Path(anton.__file__).parent / "templates" / "template-dark.html"
+    return path.read_text(encoding="utf-8")
+```
+
+Call `__read_html_template()` exactly once — from inside `__get_html()` — to
+obtain the template string, then apply only the `.replace(...)` substitutions
+that apply to your dashboard. You do NOT have to fill every marker — the
+section 2 markers are all valid HTML / CSS / JS comments in their respective
+contexts, so any you leave untouched remain as invisible comments in the
+output and don't affect rendering. A minimal dashboard may only replace
+`PAGE_TITLE` and `CONTENT`, or just `CONTENT` if a bare title is fine. Do NOT
+hold the template in a module-level variable; read it fresh inside the
+assembly function so each build is self-contained.
+
+The one exception is `<!-- AGENT: PAGE_TITLE -->`: it sits inside `<title>`,
+where HTML comments are treated as literal text. If you don't replace it, the
+browser tab shows the raw marker — so replace it whenever you care about the
+title.
+
+## 4. DashSpec
+
+Before writing any HTML, produce a **DashSpec** — a short YAML plan that
+captures the page structure. Only after the spec is complete do you generate
+the HTML. The spec lives inside a scratchpad cell (see Step 2 in section 5) —
+never written directly into the chat message — so it stays out of the user's
+view but remains accessible to every later cell in the build.
+
+**Why:**
+- Catch structural mistakes before HTML generation.
+- Make each block's purpose explicit before committing to code.
+- Keep generation deterministic: each spec block maps to one HTML fragment
+  via its own `__get_block_<id>()` function. Related small functions can
+  share a scratchpad cell — see section 5 for packing rules.
+
+### Format
+
+```yaml
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: string
+
+layout: string             # short prose: overall page layout
+
+header:  {{ ...block }}      # optional
+sidebar: {{ ...block }}      # optional
+blocks:  [ ...block ]      # main body
+```
+
+### Block shape
+
+```yaml
+id: string                 # snake_case, unique across the spec
+type: string               # short description of the block's role
+description: string        # what this block displays / contains
+class: string              # optional, CSS classes
+children: [ ...block ]     # optional, nested blocks
+```
+
+`type` is free-form — write a concise role label (e.g. `kpi_card`,
+`line_chart`, `filters_panel`, `nav_links`). No fixed vocabulary.
+
+### Rules
+
+1. Every block has `id`, `type`, and `description`. `class` and `children`
+   are optional.
+2. IDs are unique across the whole spec, snake_case.
+3. `description` explains intent, not appearance — what the block is for
+   and what data or content it holds.
+4. `layout` is a sentence or two describing the overall composition
+   (e.g. "Sidebar on the left, header on top, main grid on the right").
+5. Keep it shallow — nest with `children` only when it genuinely helps.
+6. Self-check before building: unique IDs, every block has `description`,
+   `layout` makes sense.
+
+### Example — Dashboard
+
+```yaml
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: "Q4 Sales Overview"
+
+layout: "Fixed header on top, sidebar on the left with navigation,
+  main content area on the right with a KPI row followed by two charts
+  and a products table."
+
+header:
+  id: top_bar
+  type: page_header
+  description: "Page title on the left, date range selector on the right."
+
+sidebar:
+  id: nav
+  type: navigation_panel
+  description: "Links to sibling dashboards: Overview, Regions, Products."
+
+blocks:
+  - id: kpi_row
+    type: kpi_group
+    description: "Three headline metrics for the quarter: total revenue,
+      order count, and average order value."
+    children:
+      - id: kpi_revenue
+        type: kpi_card
+        description: "Total revenue, computed as sum of monthly revenue."
+      - id: kpi_orders
+        type: kpi_card
+        description: "Total orders across the quarter."
+      - id: kpi_aov
+        type: kpi_card
+        description: "Average order value = revenue / orders."
+
+  - id: revenue_trend
+    type: line_chart
+    description: "Monthly revenue trajectory over the quarter, ECharts line."
+
+  - id: region_split
+    type: bar_chart
+    description: "Revenue by region, sorted descending, ECharts bar."
+
+  - id: top_products
+    type: data_table
+    class: "dense sortable"
+    description: "Top 10 products by revenue with SKU, name, and revenue columns."
+```
+
+## 5. Build workflow
+
+### Step 1 — List insights
+Jot down a tight checklist of what the page must show — one line per block in
+the form `<kind>: <insight it conveys and why it matters>`
+(e.g. `kpi_card: total revenue to anchor the quarter at a glance`,
+`line_chart: monthly revenue trajectory to spot inflection points`,
+`quote_slide: closing quote that frames the next-quarter ask`). This
+checklist is the input for DashSpec.
+
+### Step 2 — Write DashSpec
+The `DashSpec` YAML is produced as your **first scratchpad cell** — never as
+a YAML code block in the chat response. Assign it to `__dash_spec` and print
+it back so the plan is captured in the tool result:
+
+```python
+# DELETABLE: draft dashboard spec
+__dash_spec = '''
+docType: dash-spec
+version: "0.1"
+
+meta:
+  title: "..."
+
+layout: "..."
+
+blocks:
+  - id: ...
+    type: ...
+    description: ...
+'''
+```
+
+Follow the format in section 4. Do NOT embed data values in the spec — only
+structure and references. Self-check before moving on: unique IDs, every block
+has `description`, `layout` makes sense.
+
+### Step 3 — Build the dashboard across scratchpad cells
+
+Every piece of output is produced by a Python function whose name starts with
+double underscore (`__`). Each function returns a string. This keeps the
+scratchpad namespace clean — no stray module-level variables.
+
+Rules:
+- One `__<role>` function per block / marker. Name it `__<role>` (double
+  underscore prefix), so no function — and no stray module-level variable —
+  leaks into the user-visible scratchpad namespace.
+- You do NOT need one scratchpad cell per function. Pack several related
+  small functions into the same cell when that's natural (e.g. three short
+  KPI-card blocks can share one cell). Break into more cells only when a
+  cell would otherwise grow past ~150 lines, or when functions need very
+  different imports / setup.
+- `__get_html()` is always its own final cell — don't bundle it with anything.
+- Return a string. Never print or write to files from these functions —
+  only the final `__get_html()` cell writes output.
+- If the function needs to use a variable declared in an earlier cell, **make a
+  copy** before mutating (`copy.deepcopy(x)` or `x.copy()`). Never modify
+  shared state — other functions rely on the original.
+- **Every cell in the page build must start with a `# DELETABLE: <short
+  description>` comment on the very first line** (e.g. `# DELETABLE: build header
+  HTML`). Once the final file is on disk, the intermediate code is no longer
+  useful in context; the marker is what lets `erase_scratchpad_history` clear
+  these cells afterwards. The comment has no effect on execution.
+- **Append an approximate progress percentage to the end of every cell's
+  `one_line_description`** so the user sees the build advancing. Before the
+  first cell, decide how you'll pack the functions into cells and let
+  `total` be that cell count (always including the final `__get_html()`
+  cell). For the K-th cell (1-based) append `" (~{{pct}}% done)"` with
+  `pct = round(K / total * 100)`. Example with `total=6` cells: cell 1 →
+  `"build title + styles (~17% done)"`, cell 3 → `"build kpi + main blocks
+  (~50% done)"`, final cell → `"assemble and save dashboard (~100% done)"`.
+  If the plan changes mid-build, recompute `total` from the new plan —
+  percentages only need to trend upward, not be exact.
+
+Function layout — one function per marker in the template, plus one function
+per block from DashSpec. Cell packing is up to you (see the rules above).
+
+| Function | Target marker | Returns |
+|----------|---------------|---------|
+| `__get_page_title()` | `<!-- AGENT: PAGE_TITLE -->` | plain-text title, no tags |
+| `__make_custom_styles()` | `/* AGENT: CUSTOM_STYLES */` | any CSS rules, keyframes, or utility classes this dashboard needs — adding custom styles is encouraged whenever the base classes don't fit the design (new card variants, block-specific grids, animations, hover states, layered gradients, etc.). Reuse the theme CSS variables (`var(--bg)`, `var(--accent)`, etc.) for consistency. Return `""` only when nothing extra is required. |
+| `__get_header()` | `<!-- AGENT: HEADER -->` | `<div class="header">` with `.badge`, `<h1>`, `.subtitle`, optional `.source-link` |
+| `__get_chart_data()` | `/* AGENT: CHART_DATA */` | JS `const` declarations for datasets, e.g. `const signups = [...];`. Serialize with `json.dumps(data, default=str)`; DataFrames → `df.to_dict(orient='records')` |
+| `__get_chart_inits()` | `/* AGENT: CHART_INITS */` | one `initChart('dom-id', {{ ...option... }});` call per chart container from the blocks |
+| `__get_block_<id>()` (one per DashSpec block) | concatenated into `<!-- AGENT: CONTENT -->` | HTML fragment for that block — `<section>` with KPIs, chart `<div>` placeholders (the `initChart` call lives in `__get_chart_inits`, not here), tables, text |
+| `__get_html()` | — | reads the template, replaces all markers, writes the file, returns the path |
+
+Rules for keeping functions coordinated:
+- Every chart needs a matching pair: a `<div id="...">` inside some `__get_block_<id>()` AND an `initChart('...', {{...}})` inside `__get_chart_inits()`. The DOM ids must match exactly.
+- `__get_chart_data()` names datasets referenced by `__get_chart_inits()`. Keep naming stable across the two.
+
+The final cell looks roughly like the example below. Include only the
+`.replace(...)` calls (and their corresponding fixed cells) that your
+dashboard actually needs — skip `CUSTOM_STYLES` if the base theme is enough,
+skip `HEADER` if the design has no top banner, skip both `CHART_DATA` and
+`CHART_INITS` if there are no charts. The unmodified markers stay as inert
+comments in the output.
+
+```python
+# DELETABLE: assemble template and write final HTML file
+def __get_html():
+    template = __read_html_template()
+    content = (
+        __get_block_kpi_row()
+        + __get_block_main_chart()
+        + __get_block_detail_table()
+        # ...one line per block, in DashSpec order
+    )
+    html = (
+        template
+        .replace("<!-- AGENT: PAGE_TITLE -->", __get_page_title())
+        .replace("/* AGENT: CUSTOM_STYLES */", __make_custom_styles())  # omit if no custom CSS
+        .replace("<!-- AGENT: HEADER -->",     __get_header())          # omit if no header
+        .replace("<!-- AGENT: CONTENT -->",    content)
+        .replace("/* AGENT: CHART_DATA */",    __get_chart_data())      # omit if no charts
+        .replace("/* AGENT: CHART_INITS */",   __get_chart_inits())     # omit if no charts
+    )
+    path = "<output path>"  # see output_context
+    with open(path, "wt", encoding="utf-8") as f:
+        f.write(html)
+    return f"dashboard saved to {{path}}"
+```
+
+Splitting the work across cells catches syntax errors early (a broken string in
+one block fails fast), keeps each cell well under the scratchpad's 120-second
+timeout, and makes the final assembly trivially reviewable.
+
+### Step 4 — Reclaim context
+After the final `__get_html()` cell has returned the path, call the
+`erase_scratchpad_history` tool (no arguments). It walks every cell you
+marked `# DELETABLE: <desc>` and replaces its code with `# DELETED: <desc>`
+in both the live scratchpad and the message history — the dashboard HTML on
+disk is the artifact, so the intermediate code no longer needs to occupy
+context. Skipping this step is not an error, but it bloats later turns with
+code the user can reread from the file any time.\
 """
 
 
diff --git a/anton/core/session.py b/anton/core/session.py
index 49192d9..ebaac4b 100644
--- a/anton/core/session.py
+++ b/anton/core/session.py
@@ -13,6 +13,7 @@
 from anton.core.memory.cerebellum import Cerebellum
 from anton.core.memory.skills import SkillStore
 from anton.core.tools.recall_skill import RECALL_SKILL_TOOL
+from anton.core.tools.erase_scratchpad_history import ERASE_SCRATCHPAD_HISTORY_TOOL
 from anton.core.llm.prompts import RESILIENCE_NUDGE
 from anton.core.llm.provider import (
     ContextOverflowError,
@@ -411,6 +412,11 @@ def _build_core_tools(self) -> None:
         # Procedural memory retrieval — always available, no-op if no skills.
         self.tool_registry.register_tool(RECALL_SKILL_TOOL)
 
+        # Context compaction for file-artifact workflows: the agent marks
+        # intermediate cells with `# DELETABLE: <desc>` and calls this after
+        # writing the final file to disk.
+        self.tool_registry.register_tool(ERASE_SCRATCHPAD_HISTORY_TOOL)
+
     async def close(self) -> None:
         """Clean up scratchpads and other resources."""
         await self._scratchpads.close_all()
diff --git a/anton/core/tools/erase_scratchpad_history.py b/anton/core/tools/erase_scratchpad_history.py
new file mode 100644
index 0000000..336c051
--- /dev/null
+++ b/anton/core/tools/erase_scratchpad_history.py
@@ -0,0 +1,146 @@
+"""The `erase_scratchpad_history` tool — drop intermediate scratchpad code from
+context once the artifact it produced has been written to disk.
+
+When the agent builds an HTML dashboard (or any file artifact) across many
+scratchpad cells, every `exec` call and its code string lives on in the message
+history. Once the final HTML is on disk, that intermediate code is redundant —
+the file is the source of truth. This tool blanks the code of cells that the
+agent marked with `# DELETABLE: <description>` as the first line, both in the
+live pad and in the assistant message history, so follow-up turns don't pay
+the context tax.
+
+Scope is deliberately narrow: only `input.code` of matching scratchpad exec
+tool calls and `cell.code` of matching cells. Outputs, descriptions, and other
+tool types are untouched.
+"""
+
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from anton.core.tools.tool_defs import ToolDef
+
+if TYPE_CHECKING:
+    from anton.core.session import ChatSession
+
+
+_MARKER = "# DELETABLE:"
+
+
+_DESCRIPTION = (
+    "Erase the Python code of scratchpad cells you previously marked with "
+    "`# DELETABLE: <short description>` as their first line. Call this after "
+    "a file artifact (HTML dashboard, presentation, etc.) has been written to "
+    "disk — the file is the source of truth, so the intermediate generation "
+    "code is no longer useful in the conversation context.\n\n"
+    "The tool scans both the live scratchpad cells and the assistant message "
+    "history, and replaces every matching `code` value with "
+    "`# DELETED: <description>` (the description from the marker is preserved "
+    "so you can still see what each cell did). Outputs, descriptions on the "
+    "tool call, and anything without the marker are left untouched. Safe to "
+    "call repeatedly — cells already cleared are skipped."
+)
+
+
+_INPUT_SCHEMA = {
+    "type": "object",
+    "properties": {},
+    "required": [],
+    "additionalProperties": False,
+}
+
+
+def _extract_deletable_description(code: str) -> str | None:
+    """If the first non-blank line of `code` is `# DELETABLE: <desc>`, return
+    <desc>. Otherwise None.
+
+    Leading blank lines (common when the model emits multi-line code blocks)
+    are ignored so the marker still matches.
+    """
+    if not isinstance(code, str):
+        return None
+    stripped = code.lstrip()
+    first_line = stripped.split("\n", 1)[0].strip()
+    if not first_line.startswith(_MARKER):
+        return None
+    return first_line[len(_MARKER):].strip()
+
+
+def _replacement(description: str) -> str:
+    if description:
+        return f"# DELETED: {description}"
+    return "# DELETED"
+
+
+async def handle_erase_scratchpad_history(
+    session: "ChatSession", tc_input: dict
+) -> str:
+    """Clear code of DELETABLE-marked cells in live pads and history."""
+    cells_cleared = 0
+    history_blocks_cleared = 0
+
+    # 1. Live scratchpad cells
+    for pad in session._scratchpads.pads.values():
+        for cell in pad.cells:
+            desc = _extract_deletable_description(cell.code)
+            if desc is None:
+                continue
+            cell.code = _replacement(desc)
+            cells_cleared += 1
+
+    # 2. Message history — only scratchpad exec tool_use blocks.
+    # Skip the last assistant message (it contains this tool call itself).
+    history = session._history
+    last_idx = len(history) - 1
+    for idx, msg in enumerate(history):
+        if idx == last_idx and msg.get("role") == "assistant":
+            continue
+        content = msg.get("content")
+        if not isinstance(content, list):
+            continue
+        for block in content:
+            if not isinstance(block, dict):
+                continue
+            if block.get("type") != "tool_use":
+                continue
+            if block.get("name") != "scratchpad":
+                continue
+            tc_in = block.get("input")
+            if not isinstance(tc_in, dict):
+                continue
+            if tc_in.get("action") != "exec":
+                continue
+            code = tc_in.get("code")
+            desc = _extract_deletable_description(code)
+            if desc is None:
+                continue
+            tc_in["code"] = _replacement(desc)
+            history_blocks_cleared += 1
+
+    session._persist_history()
+
+    if cells_cleared == 0 and history_blocks_cleared == 0:
+        return (
+            "No DELETABLE cells found. Either none were marked with "
+            "`# DELETABLE: <description>` on their first line, or they have "
+            "already been cleared."
+        )
+
+    return (
+        f"Cleared {cells_cleared} live scratchpad cells and "
+        f"{history_blocks_cleared} tool-call entries in history."
+    )
+
+
+ERASE_SCRATCHPAD_HISTORY_TOOL = ToolDef(
+    name="erase_scratchpad_history",
+    description=_DESCRIPTION,
+    input_schema=_INPUT_SCHEMA,
+    handler=handle_erase_scratchpad_history,
+)
+
+
+__all__ = [
+    "ERASE_SCRATCHPAD_HISTORY_TOOL",
+    "handle_erase_scratchpad_history",
+]
diff --git a/anton/core/tools/recall_skill.py b/anton/core/tools/recall_skill.py
index 290e5af..9a6bd9f 100644
--- a/anton/core/tools/recall_skill.py
+++ b/anton/core/tools/recall_skill.py
@@ -14,10 +14,19 @@
 
 from __future__ import annotations
 
+from pathlib import Path
 from typing import TYPE_CHECKING
 
+from anton.core.llm.prompts import VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT
 from anton.core.tools.tool_defs import ToolDef
 
+_DASHBOARD_TEMPLATE_PATH = (
+    Path(__file__).resolve().parent.parent.parent
+    / "templates"
+    / "template-dark.html"
+)
+_DASHBOARD_TEMPLATE_MARKER = "<!-- DASHBOARD_HTML_TEMPLATE -->"
+
 if TYPE_CHECKING:
     from anton.core.session import ChatSession
 
@@ -51,6 +60,21 @@
 }
 
 
+def get_generate_dashboard_html_prompt(
+    session: "ChatSession | None" = None,
+) -> str:
+    output_context = ""
+    if session is not None:
+        ctx = getattr(session, "_system_prompt_context", None)
+        if ctx is not None:
+            output_context = getattr(ctx, "output_context", "") or ""
+    rendered = VISUALIZATIONS_HTML_OUTPUT_FORMAT_PROMPT.format(
+        output_context=output_context
+    )
+    html_template = _DASHBOARD_TEMPLATE_PATH.read_text(encoding="utf-8")
+    return rendered.replace(_DASHBOARD_TEMPLATE_MARKER, html_template)
+
+
 def _format_skill_response(skill, *, warning: str = "") -> str:
     """Render the recall payload sent back to the LLM as a tool result."""
     parts: list[str] = []
@@ -77,6 +101,9 @@ async def handle_recall_skill(session: "ChatSession", tc_input: dict) -> str:
             "Pick one from the procedural memory list in your system prompt."
         )
 
+    if label_in == "generate_dashboard_html":
+        return get_generate_dashboard_html_prompt(session)
+
     store = getattr(session, "_skill_store", None)
     if store is None:
         return (
diff --git a/anton/templates/template-dark.html b/anton/templates/template-dark.html
new file mode 100644
index 0000000..92de794
--- /dev/null
+++ b/anton/templates/template-dark.html
@@ -0,0 +1,211 @@
+<!-- V2 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title><!-- AGENT: PAGE_TITLE --></title>
+
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+
+<style>
+:root {
+  --bg:      #0d1117;
+  --bg2:     #161b22;
+  --bg3:     #1c2128;
+  --border:  #30363d;
+  --text:    #e6edf3;
+  --muted:   #8b949e;
+  --accent:  #58a6ff;  /* blue   */
+  --accent2: #f78166;  /* coral  */
+  --accent3: #3fb950;  /* green  */
+  --accent4: #d29922;  /* yellow */
+  --purple:  #bc8cff;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  padding: 24px;
+  max-width: 1440px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+/* Grid — single utility, agent sets --cols inline (default 2) */
+.grid { display: grid; gap: 20px; margin-bottom: 24px;
+        grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
+.col-span-2 { grid-column: span 2; }
+
+/* Card */
+.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
+.card-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
+.card h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 16px; }
+
+/* KPI — use --c for accent color, e.g. style="--c: var(--accent3)" */
+.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; --c: var(--accent); }
+.kpi .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--c); }
+.kpi .kpi-label { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.5px; }
+
+/* Tags — use --c for color, e.g. <span class="tag" style="--c: var(--accent3)"> */
+.tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px;
+       --c: var(--accent);
+       color: var(--c);
+       background: color-mix(in oklab, var(--c) 15%, transparent);
+       border: 1px solid color-mix(in oklab, var(--c) 30%, transparent); }
+
+/* Tables */
+.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+.data-table th { background: var(--bg3); color: var(--muted); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border); }
+.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
+.data-table tr:last-child td { border-bottom: none; }
+.data-table tr:hover td { background: var(--bg3); }
+
+/* Chart containers */
+.chart-container    { width: 100%; height: 320px; }
+.chart-container-lg { width: 100%; height: 380px; }
+
+/* Callouts */
+.insight-box { background: rgba(88,166,255,0.06); border: 1px solid rgba(88,166,255,0.2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin-top: 16px; }
+.insight-box p { font-size: 0.83rem; color: var(--text); line-height: 1.6; }
+
+/* Section */
+section { margin-bottom: 32px; }
+section > .section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+section > .section-title::before { content: ''; display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .grid { grid-template-columns: 1fr; }
+  .col-span-2 { grid-column: span 1; }
+}
+
+/* AGENT: CUSTOM_STYLES */
+
+</style>
+</head>
+<body>
+<!-- AGENT: HEADER -->
+
+<!-- AGENT: CONTENT -->
+
+<script>
+const githubDarkTheme = {
+  color: ['#58a6ff', '#3fb950', '#d29922', '#f78166', '#bc8cff',
+          '#79c0ff', '#ff7b72', '#e3b341', '#a5d6ff', '#56d364'],
+  backgroundColor: 'transparent',
+  textStyle: { color: '#e6edf3', fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" },
+
+  title:    { textStyle: { color: '#e6edf3', fontWeight: 600 },
+              subtextStyle: { color: '#8b949e' } },
+
+  line:    { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2 }, symbol: 'none', smooth: false },
+  bar:     { itemStyle: { borderRadius: 0, borderWidth: 0 } },
+  pie:     { itemStyle: { borderColor: '#0d1117', borderWidth: 1 } },
+  scatter: { itemStyle: { borderWidth: 0 } },
+  radar:   { itemStyle: { borderWidth: 2 }, lineStyle: { width: 2 }, symbolSize: 4, symbol: 'circle' },
+  candlestick: { itemStyle: { color: '#3fb950', color0: '#f85149', borderColor: '#3fb950', borderColor0: '#f85149', borderWidth: 1 } },
+  graph:   { itemStyle: { borderWidth: 0 }, lineStyle: { color: '#30363d', width: 1 },
+             color: ['#58a6ff','#3fb950','#d29922','#f78166','#bc8cff'],
+             label: { color: '#e6edf3' } },
+  gauge:   { title: { color: '#e6edf3' }, detail: { color: '#e6edf3' } },
+  funnel:  { itemStyle: { borderColor: '#0d1117', borderWidth: 1 } },
+  sankey:  { itemStyle: { borderWidth: 0 }, lineStyle: { color: 'source', opacity: 0.4 } },
+
+  categoryAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: false, lineStyle: { color: '#21262d' } },
+    splitArea: { show: false }
+  },
+  valueAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisTick:  { show: false },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: '#21262d' } },
+    splitArea: { show: false }
+  },
+  logAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: '#21262d' } }
+  },
+  timeAxis: {
+    axisLine:  { show: true, lineStyle: { color: '#30363d' } },
+    axisLabel: { show: true, color: '#8b949e' },
+    splitLine: { show: true, lineStyle: { color: '#21262d' } }
+  },
+
+  legend:  { textStyle: { color: '#8b949e' }, inactiveColor: '#484f58',
+             itemStyle: { borderColor: 'transparent' } },
+  tooltip: { backgroundColor: '#1c2128', borderColor: '#30363d', borderWidth: 1,
+             textStyle: { color: '#e6edf3' },
+             axisPointer: {
+               lineStyle:  { color: '#58a6ff', width: 1 },
+               crossStyle: { color: '#58a6ff', width: 1 },
+               shadowStyle:{ color: 'rgba(88,166,255,0.08)' },
+               label: { backgroundColor: '#1c2128', color: '#e6edf3' }
+             } },
+  toolbox: { iconStyle: { borderColor: '#8b949e' },
+             emphasis: { iconStyle: { borderColor: '#58a6ff' } } },
+  timeline: { lineStyle: { color: '#30363d', width: 1 },
+              itemStyle: { color: '#58a6ff' },
+              controlStyle: { color: '#58a6ff', borderColor: '#58a6ff' },
+              checkpointStyle: { color: '#58a6ff', borderColor: '#0d1117' },
+              label: { color: '#8b949e' },
+              emphasis: { itemStyle: { color: '#79c0ff' }, label: { color: '#e6edf3' } } },
+  visualMap: { color: ['#58a6ff', '#3fb950', '#d29922', '#f78166'],
+               textStyle: { color: '#8b949e' } },
+  dataZoom:  { backgroundColor: 'rgba(28,33,40,0.5)',
+               dataBackgroundColor: 'rgba(88,166,255,0.15)',
+               fillerColor: 'rgba(88,166,255,0.12)',
+               handleColor: '#58a6ff', handleSize: '100%',
+               borderColor: '#30363d',
+               textStyle: { color: '#8b949e' } },
+  markPoint: { symbol: 'roundRect', symbolSize: [60, 22],
+               itemStyle: { borderColor: '#30363d', borderWidth: 1 },
+               label: { position: 'inside', color: '#e6edf3', fontSize: 11, fontWeight: 600,
+                        textBorderColor: 'transparent', textBorderWidth: 0 },
+               emphasis: { label: { color: '#e6edf3' } } },
+  markLine:  { symbol: ['none', 'none'],
+               lineStyle: { color: '#8b949e', type: 'dashed', width: 1 },
+               label: { position: 'insideEndTop', color: '#e6edf3', fontSize: 11,
+                        textBorderColor: 'transparent', textBorderWidth: 0,
+                        backgroundColor: 'rgba(28,33,40,0.85)',
+                        padding: [3, 6], borderRadius: 3 },
+               emphasis: { label: { color: '#e6edf3' } } }
+};
+echarts.registerTheme('github-dark', githubDarkTheme);
+
+const __charts = [];
+function initChart(id, options) {
+  const el = document.getElementById(id);
+  if (!el) { console.warn('initChart: element not found:', id); return null; }
+  const chart = echarts.init(el, 'github-dark');
+  chart.setOption(options);
+  __charts.push(chart);
+  return chart;
+}
+
+/* Debounced resize via ResizeObserver — reacts to layout changes, not just window resize */
+let __resizeTimer;
+const __resizeAll = () => {
+  clearTimeout(__resizeTimer);
+  __resizeTimer = setTimeout(() => __charts.forEach(c => c.resize()), 80);
+};
+window.addEventListener('resize', __resizeAll);
+if (window.ResizeObserver) {
+  const __ro = new ResizeObserver(__resizeAll);
+  __ro.observe(document.body);
+}
+
+/* AGENT: CHART_DATA */
+
+/* AGENT: CHART_INITS */
+
+</script>
+
+</body>
+</html>
diff --git a/tests/test_prompt_builder_skills.py b/tests/test_prompt_builder_skills.py
index 6796e16..3a7878e 100644
--- a/tests/test_prompt_builder_skills.py
+++ b/tests/test_prompt_builder_skills.py
@@ -48,15 +48,20 @@ def _build_prompt(builder: ChatSystemPromptBuilder, **overrides) -> str:
 
 
 class TestProceduralMemorySection:
-    def test_no_store_omits_section(self):
+    def test_no_store_renders_only_builtins(self):
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=None)
-        assert "Procedural memory" not in prompt
+        # Section is always present because at least one built-in skill exists.
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
 
-    def test_empty_store_omits_section(self, empty_store: SkillStore):
+    def test_empty_store_renders_only_builtins(self, empty_store: SkillStore):
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=empty_store)
-        assert "Procedural memory" not in prompt
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
+        # No user-skill labels leak in from an empty store.
+        assert "`csv_summary`" not in prompt
 
     def test_populated_store_renders_section(self, populated_store: SkillStore):
         builder = ChatSystemPromptBuilder()
@@ -130,8 +135,8 @@ def test_handles_skill_without_when_to_use(self, tmp_path: Path):
         assert "`bare`" in prompt
         # No crash, even with no when_to_use
 
-    def test_skip_section_when_store_raises(self, tmp_path: Path, monkeypatch):
-        """If the store blows up at read time, the section is omitted gracefully."""
+    def test_store_failure_falls_back_to_builtins(self, tmp_path: Path, monkeypatch):
+        """If the store blows up at read time, we still render the built-ins."""
         s = SkillStore(root=tmp_path / "skills_broken")
 
         def boom(self):
@@ -140,4 +145,5 @@ def boom(self):
         monkeypatch.setattr(SkillStore, "list_summaries", boom)
         builder = ChatSystemPromptBuilder()
         prompt = _build_prompt(builder, skill_store=s)
-        assert "Procedural memory" not in prompt
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
diff --git a/tests/test_session_skills_init.py b/tests/test_session_skills_init.py
index 76c584a..ab09f5b 100644
--- a/tests/test_session_skills_init.py
+++ b/tests/test_session_skills_init.py
@@ -74,7 +74,7 @@ def test_section_appears_when_store_passed(
         assert "## Procedural memory" in prompt
         assert "csv_summary" in prompt
 
-    def test_section_omitted_when_no_store(self):
+    def test_section_renders_builtins_when_no_store(self):
         builder = ChatSystemPromptBuilder()
         prompt = builder.build(
             current_datetime="2026-04-10",
@@ -82,7 +82,11 @@ def test_section_omitted_when_no_store(self):
             proactive_dashboards=False,
             skill_store=None,
         )
-        assert "Procedural memory" not in prompt
+        # Section is always present because of hardcoded built-in skills.
+        assert "## Procedural memory" in prompt
+        assert "`generate_dashboard_html`" in prompt
+        # No user skills leak when there's no store.
+        assert "csv_summary" not in prompt
 
 
 class TestDispatchRoundtrip: