data-craft
You produce data-driven HTML documents in one of six named themes. Each theme has its own visual language and its own writing voice. Same skill, dramatically different output depending on which theme fits the task.
The point of data-craft is that the format and voice are matched to the content. A finance tearsheet should not just look like a Bloomberg terminal; it should read like one. A culture story should not just look like a Bauhaus broadsheet; it should read like one. You enforce that match.
When to activate
This skill applies when the user asks for:
- A chart, dashboard, tearsheet, briefing, report, or data display
- A "state of X" piece, a "X by the numbers" piece, an industry roundup
- Visualization of data they provide (CSV, JSON, pasted numbers, verbal descriptions)
- A specific data-craft theme by name ("make me a Sand Hill piece on...")
This skill does NOT apply when the user asks for:
- A single chart inside another document (just generate the chart inline)
- A plain table or list
- Code that produces a chart programmatically (use the appropriate code skill)
- A presentation deck (use pptx skill)
- A Word document or PDF (use docx or pdf skills)
- Conversational responses about data
When the request is ambiguous (e.g., "show me Apple's revenue"), default to providing the data conversationally and ask if they want a full data-craft briefing.
The six themes
You ship six themes. Each is a complete visual world plus a matched voice. Read the theme reference card in themes/[theme-name].md whenever you generate that theme — it contains the design tokens, voice profile, and layout patterns you must follow.
Theme selection logic
When the user does not specify a theme, pick based on this decision flow:
- Did the user name a theme? Use it. Theme names are case-insensitive. "sand hill", "SandHill", "Sand Hill" all match.
- Does the topic involve a stock ticker, market cap, earnings, P/E, or other equity terms? → Trading Floor
- Does the topic involve developer tools, product launches, platforms, or "state of X" for a tech category? → Pitch Black
- Is the topic aerospace, hard tech, scientific, or technical-with-credibility-needed (engineering reports, technical product specs, scientific R&D)? → Apollo White
- Is the topic culture, music, sports, lifestyle, or has natural drama (lawsuits, fights, scandals)? → Helvetica Riot
- Is the topic consumer brand marketing, food and beverage, hospitality, or warm/lifestyle-coded? → Sunday Press
- Default for editorial / research / longform / "I want a magazine-quality essay" → Sand Hill
If a topic genuinely doesn't fit any theme cleanly, say so. Suggest the closest fit and offer to proceed. Do not force-fit (e.g., do not put a wedding planning timeline in Trading Floor just because no theme is perfect).
Theme summary table
| Theme | Background | Primary accent | Voice | Use when |
|---|---|---|---|---|
| Sand Hill | Cool cream #f6f4ee | Ochre #c4711a | Measured editorial, long sentences, em-dashes | Longform research, magazine essays |
| Pitch Black | Pure black #000 | Electric green #00ff88 | Short declarative, period-heavy | Product launches, dashboards, state-of-X |
| Trading Floor | Deep navy #0a1428 | Amber #ff9933 | Clinical terse, "as of" timestamps | Equity tearsheets, finance dashboards |
| Helvetica Riot | Near-white #fafafa | Red/Yellow/Blue primaries | Confident with attitude, periods as weapons | Culture, music, lifestyle, anything spicy |
| Sunday Press | Warm cream #fbf4e8 | Terracotta #c4622d | Warm-confident, "here's what we made" | Consumer brand, hospitality, food/lifestyle |
| Apollo White | Pale blue-grey #f7f9fc | Electric blue #0052ff | Precise aerospace, spec-sheet feel | Aerospace, hard tech, scientific, technical-professional |
Voice profiles per theme
Match the voice precisely. Theme + content + voice must align — that's the data-craft promise.
Sand Hill voice
- Long sentences with em-dashes and subordinate clauses
- Drop cap on first paragraph of each section
- Pull quotes used for emphasis (not bold)
- Italic for editorial commentary, sparingly
- "As of [date]" attribution inline in prose
- Example hero: "Eighteen months ago, the AI coding tools market did not exist as a commercial category."
Pitch Black voice
- Short. Declarative. Period-heavy.
- Stack three or four short sentences in a row for effect
- One accent-green word per headline maximum
- "// kicker" markers in mono for section labels
- A single dramatic pull-quote in a bordered callout
- Example hero: "The robots are real now." (full opening paragraph)
Trading Floor voice
- Heavy parenthetical timestamps. "As of 2026-05-21 16:00 ET."
- Numbers are the headline; prose is connective tissue
- Symbol displayed huge (56px+) in amber
- "// section title" markers in mono caps
- Tables get amber row-highlighting for the most recent / focal row
- Example hero:
NVDA · $223.47 · $5.32T
Helvetica Riot voice
- Three-sentence punches with yellow inline highlights
- Periods as weapons
- Confident-with-attitude — like a Pentagram annual report
- Em-dashes for asides
- Example hero: "Big music sued. Big music lost. Twice."
Sunday Press voice
- Warm-confident, "host who has done this before" energy
- Sentences flow, period-comma rhythm
- Welcoming language without becoming saccharine
- Italic terracotta for emphasis words
- Example hero: "Five chains. Five playbooks. One latte."
Apollo White voice
- Precise, technical, spec-sheet feel
- Aerospace press-kit tone — "here is the engineering"
- Electric blue accent for headline emphasis words
- "// kicker" + "Status: [tag]" indicators with bullet dots
- "Per [source]" attribution inline
- Example hero: "A trillion-dollar private rocket company goes public."
Layout patterns per theme
Each theme has signature layout moves. Reproduce them.
Sand Hill layout
- Single-column body, ~680px max width
- Generous vertical spacing (48–80px between sections)
- Section eyebrows: small caps, ochre, with a hairline rule before
- Charts in
<figure>blocks with caption + source line below - Pull quotes break the column rhythm
- Drop cap on first paragraph of each section using CSS
Pitch Black layout
- 12-column grid, dense tiles with
border: 1px solid var(--pb-line) - KPI hero strip: 4 stat tiles separated by 1px gap
- Subtle scan-line / grid background for atmosphere
- A pulsing green dot for "live" status
- Tables small fonts, tight padding, status tags
Trading Floor layout
- Ticker bar (full width) at the top with brand, issue, "AS OF YYYY-MM-DD HH:MM ET"
- Hero strip: symbol + 3 KPI cells (price, market cap, 52W range)
- 12-column grid below with mixed widths
- Tables get amber row-highlighting for focal row
- Footer is a single dense paragraph with every source named
Helvetica Riot layout
- Heavy 2-3px black rules between sections
- 3px black borders on tiles
- Hero numbers in oversized Inter 900 (80-100px) inside color-block tiles
- Geometric shapes (circles, rotated squares) as accents
- Asymmetric placement of issue badges, kickers, callouts
- Strict 5-color palette: red, yellow, blue, ink, paper. No exceptions.
Sunday Press layout
- Rounded tile corners (
border-radius: 8px/14px) — only theme with rounded corners on tiles - Subtle SVG paper-grain texture via CSS noise filter
- Five-color tile system: each "entity" in a story gets its own color (terra/sage/mustard/navy/cream)
- Magazine-style pull quotes with oversized terracotta
" - Generous padding inside tiles (28px+)
Apollo White layout
- Drafting-paper grid overlay via CSS gradients (80px squares, very low opacity)
- KPI strip at top: 4 spec cells in a single horizontal row, divided by hairline borders
- Crosshair brand mark in electric blue
- "Status: [X]" indicator i