Examples

Full-page patterns and component demos. Each example is one thing, done well.

Charts

  • Field Intelligence Report — Investigative data analysis — multi-series column with labels, source reliability bar, activity area chart
  • Build Pipeline Metrics — CI/CD pipeline performance — build time breakdown, weekly success rate, failure counts by repo
  • Sprint Burndown — Sprint burndown chart with CSS-generated ideal velocity line — no JavaScript
  • Investment Overview — Face-style investor pitch — pie chart budget allocation, bar with per-row color, growth trajectory
  • Operation Tracker — Mission planning analytics — stacked column with labels, team performance bar, readiness gauges
  • Sprint Report — Full sprint report template combining bar, column, area, line, pie, and burndown charts
  • Aerial Survey Data — Flight telemetry across 12 waypoints — line chart, area chart, radial gauges
  • Operational Dashboard — Multi-chart agent metrics — issues, vault commits, token budget, session intensity
  • Radial Gauges — Session health dashboard — radial gauges with status variants for operational percentages

Components

  • Buttons — Semantic button variants — type attribute, disabled, loading, link-as-button
  • Callouts — data-callout — structured annotations rendered from GFM blockquote syntax via pandoc pack
  • Forms — Text inputs, select, textarea, checkboxes, radios, validation states, and helper text
  • Navigation — Four nav patterns — top nav, sub-nav, sidebar nav, TOC nav. No classes. aria-current for active state.
  • Tooltips — data-tooltip — hover and focus-visible labels, CSS only, no JavaScript

Content

  • Accordion — Collapsible sections via native details and summary — no JavaScript
  • Blockquote — Extended quotations with attribution via footer and cite elements
  • Code — Inline code, keyboard input, sample output, code blocks, and syntax highlighting
  • Tables — Semantic table — no classes, no wrappers, styled by default

Layout

  • Grid — data-layout grid patterns — grid-2, grid-3, card-grid, stats, inline definition list
  • Prose — data-layout=prose — optimal reading width for long-form content
  • Session Report — data-layout=report — print-first document layout for agent session summaries
  • Timeline — data-layout=timeline — chronological event lists with a vertical spine

Vault

  • Diff — data-diff — semantic diff output for agent-generated change reports
  • Redacted — data-redacted — privacy-aware content masking with reveal-on-hover
  • Session Log — data-session, data-mode, data-task, data-callout, data-wikilink — five vocabulary atoms in a realistic agent day
  • Status — data-status — operational state indicators for agents and services
  • Tasks — data-task — four task states for vault-native task lists
  • Vault Page — data-task, data-status, data-callout, data-wikilink, data-session — a vault note rendered as a web page
  • Wikilinks — data-wikilink, data-tag, data-hash — vault reference vocabulary for exported notes