Birchline HTML
Use this skill when the user wants a beautiful standalone HTML artifact, report,
summary, explainer, plan, or dashboard in the Birchline visual language.
The goal is a single .html file that opens locally, embeds all CSS, uses no
network resources, and reads like a serious engineering artifact rather than a
generic web page.
Workflow
Gather the source facts first.
Read files, session notes, data, diffs, commands, and screenshots as needed.
Do not ask the renderer/layout phase to discover facts that the calling agent
can already provide.
Build a renderer brief.
Make it self-contained: audience, purpose, known facts, evidence, file paths,
commands, data values, caveats, unknowns, suggested sections, and chart intent.
Mark uncertain details as unknown instead of inventing them.
Choose an artifact type.
Use the nearest recipe from references/templates/:
module-explainer.mdprocess-explainer.mdimplementation-plan.mddesign-directions.mdcode-review.mdpr-change-writeup.mdstatus-or-incident-report.mdslide-deck.mdflow-diagram.mdnumeric-data.md
Write one complete standalone HTML document.
Start from assets/templates/standalone-shell.html if useful. Inline both:
assets/birchline-core.cssassets/birchline-components.css
Validate before finishing.
Check that the file has <!doctype html>, <style>, <body>, closing
</html>, no external scripts/styles/fonts, and responsive layouts for
tables or wide content. If possible, render a desktop and mobile screenshot.
Birchline Rules
- Use ivory/paper backgrounds, slate text, restrained clay accents, serif display
headings, and quiet sans/mono supporting text.
- Favor sections, panels, matrices, stat strips, timelines, code panels, badges,
callouts, and comparison grids.
- Keep cards for repeated items, modals, or framed tools. Avoid nested cards.
- Do not use generic gradient blobs, decorative orbs, stock imagery, CDN fonts,
external CSS, or JavaScript unless the user explicitly needs interaction.
- Keep first viewport useful: title, purpose, status/caveat, and strongest facts.
- Wrap long paths and symbols aggressively; prefer matrices or code panels over
dense paragraphs.
- Exact values should appear as text near charts, not only as shape height/width.
- For large source material, produce a shorter complete artifact rather than an
ambitious incomplete one.
Numeric/Data Guidance
For arbitrary data, inspect the shape before choosing the visualization:
- KPI strip: headline counts, totals, best/worst, pass/fail, cost/time.
- Delta card: before/after or baseline/current comparisons.
- Ranking bars: sorted categories with exact values.
- Grouped bars: compare the same measures across a few categories.
- Progression line: ordered/time progression.
- Small multiples: repeated mini charts for multiple entities.
- Comparison matrix: exact values, statuses, or tradeoffs.
- Distribution strip: spread, range, buckets, or concentration.
- Annotated table: when exact reading matters more than visual drama.
Use CSS or hand-written inline SVG only for tiny charts, simple bars, sparklines,
or diagram-like marks. For plotted numeric data, default to Python-generated SVG
so axes, ticks, labels, scales, legends, and statistical views are handled
reliably. Avoid fitting the design to one fixed data schema; choose the simplest
honest view for the supplied data.
For charts, prefer this route:
- Use Matplotlib as the default renderer for real plotted data. Use Seaborn
when it makes a distribution, regression, heatmap, or grouped statistical
view clearer without fighting the Birchline theme.
- Use the bundled helper
scripts/birchline_mpl.py for theme and SVG export.
Create a temporary or artifact-local driver script that imports or copies that
helper, loads the specific data, builds the figure, and writes the SVG/HTML.
Run the driver with uv, for example:
uv run --with matplotlib --with numpy python /tmp/build_chart.py
or, when useful:
uv run --with matplotlib --with seaborn --with pandas python /tmp/build_chart.py.
- Export SVG and inline it into the HTML inside a
.panel or chart container.
- Pair the chart with exact values in a numeric table/matrix and a source/caveat
note.
- Use PNG only for raster-heavy plots where SVG is impractical.
Reference Loading
Only load extra references when needed:
- Read
references/system.md for the canonical full design-system prompt.
- Read
references/patterns.md for detailed component and layout patterns.
- Read
references/recipe-catalog.md when choosing among packaged recipes or
checking known gaps.
- Read a specific file in
references/templates/ when the artifact type is clear.
- Read or reuse
scripts/birchline_mpl.py when generating Matplotlib charts.
Slash Command Alternative
If working inside the fast-agent environment that has the Birchline plugin
installed, prefer /birchline when the user wants automated generation from
session context. Use this skill when you want the current agent to create or edit
the artifact directly.
1---2name: birchline-html3description: Create polished standalone single-file HTML engineering artifacts in the Birchline design language. Use for session summaries, module/process explainers, implementation plans, design direction comparisons, PR/change writeups, findings-first code reviews, incident/status reports, slide decks, flow diagrams, and compact numeric/data briefs where the output should be a beautiful local HTML document with embedded CSS and no external assets.4---56# Birchline HTML78Use this skill when the user wants a beautiful standalone HTML artifact, report,9summary, explainer, plan, or dashboard in the Birchline visual language.1011The goal is a single `.html` file that opens locally, embeds all CSS, uses no12network resources, and reads like a serious engineering artifact rather than a13generic web page.1415## Workflow16171. Gather the source facts first.18 Read files, session notes, data, diffs, commands, and screenshots as needed.19 Do not ask the renderer/layout phase to discover facts that the calling agent20 can already provide.21222. Build a renderer brief.23 Make it self-contained: audience, purpose, known facts, evidence, file paths,24 commands, data values, caveats, unknowns, suggested sections, and chart intent.25 Mark uncertain details as unknown instead of inventing them.26273. Choose an artifact type.28 Use the nearest recipe from `references/templates/`:29 - `module-explainer.md`30 - `process-explainer.md`31 - `implementation-plan.md`32 - `design-directions.md`33 - `code-review.md`34 - `pr-change-writeup.md`35 - `status-or-incident-report.md`36 - `slide-deck.md`37 - `flow-diagram.md`38 - `numeric-data.md`39404. Write one complete standalone HTML document.41 Start from `assets/templates/standalone-shell.html` if useful. Inline both:42 - `assets/birchline-core.css`43 - `assets/birchline-components.css`44455. Validate before finishing.46 Check that the file has `<!doctype html>`, `<style>`, `<body>`, closing47 `</html>`, no external scripts/styles/fonts, and responsive layouts for48 tables or wide content. If possible, render a desktop and mobile screenshot.4950## Birchline Rules5152- Use ivory/paper backgrounds, slate text, restrained clay accents, serif display53 headings, and quiet sans/mono supporting text.54- Favor sections, panels, matrices, stat strips, timelines, code panels, badges,55 callouts, and comparison grids.56- Keep cards for repeated items, modals, or framed tools. Avoid nested cards.57- Do not use generic gradient blobs, decorative orbs, stock imagery, CDN fonts,58 external CSS, or JavaScript unless the user explicitly needs interaction.59- Keep first viewport useful: title, purpose, status/caveat, and strongest facts.60- Wrap long paths and symbols aggressively; prefer matrices or code panels over61 dense paragraphs.62- Exact values should appear as text near charts, not only as shape height/width.63- For large source material, produce a shorter complete artifact rather than an64 ambitious incomplete one.6566## Numeric/Data Guidance6768For arbitrary data, inspect the shape before choosing the visualization:6970- KPI strip: headline counts, totals, best/worst, pass/fail, cost/time.71- Delta card: before/after or baseline/current comparisons.72- Ranking bars: sorted categories with exact values.73- Grouped bars: compare the same measures across a few categories.74- Progression line: ordered/time progression.75- Small multiples: repeated mini charts for multiple entities.76- Comparison matrix: exact values, statuses, or tradeoffs.77- Distribution strip: spread, range, buckets, or concentration.78- Annotated table: when exact reading matters more than visual drama.7980Use CSS or hand-written inline SVG only for tiny charts, simple bars, sparklines,81or diagram-like marks. For plotted numeric data, default to Python-generated SVG82so axes, ticks, labels, scales, legends, and statistical views are handled83reliably. Avoid fitting the design to one fixed data schema; choose the simplest84honest view for the supplied data.8586For charts, prefer this route:87881. Use Matplotlib as the default renderer for real plotted data. Use Seaborn89 when it makes a distribution, regression, heatmap, or grouped statistical90 view clearer without fighting the Birchline theme.912. Use the bundled helper `scripts/birchline_mpl.py` for theme and SVG export.92 Create a temporary or artifact-local driver script that imports or copies that93 helper, loads the specific data, builds the figure, and writes the SVG/HTML.94 Run the driver with `uv`, for example:95 `uv run --with matplotlib --with numpy python /tmp/build_chart.py`96 or, when useful:97 `uv run --with matplotlib --with seaborn --with pandas python /tmp/build_chart.py`.983. Export SVG and inline it into the HTML inside a `.panel` or chart container.994. Pair the chart with exact values in a numeric table/matrix and a source/caveat100 note.1015. Use PNG only for raster-heavy plots where SVG is impractical.102103## Reference Loading104105Only load extra references when needed:106107- Read `references/system.md` for the canonical full design-system prompt.108- Read `references/patterns.md` for detailed component and layout patterns.109- Read `references/recipe-catalog.md` when choosing among packaged recipes or110 checking known gaps.111- Read a specific file in `references/templates/` when the artifact type is clear.112- Read or reuse `scripts/birchline_mpl.py` when generating Matplotlib charts.113114## Slash Command Alternative115116If working inside the fast-agent environment that has the Birchline plugin117installed, prefer `/birchline` when the user wants automated generation from118session context. Use this skill when you want the current agent to create or edit119the artifact directly.
fast-agent-ai