/data-craft

name: data-craft
description: Generate beautiful themed HTML data displays. Six visual idioms with matched voices, rendered as self-contained HTML files. Use when the user asks for charts, dashboards, reports, tearsheets, briefings, data visualizations, or any data-driven document.
version: 1.0.0

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:

1. **Did the user name a theme?** Use it. Theme names are case-insensitive. "sand hill", "SandHill", "Sand Hill" all match. 2. **Does the topic involve a stock ticker, market cap, earnings, P/E, or other equity terms?** → **Trading Floor** 3. **Does the topic involve developer tools, product launches, platforms, or "state of X" for a tech category?** → **Pitch Black** 4. **Is the topic aerospace, hard tech, scientific, or technical-with-credibility-needed (engineering reports, technical product specs, scientific R&D)?** → **Apollo White** 5. **Is the topic culture, music, sports, lifestyle, or has natural drama (lawsuits, fights, scandals)?** → **Helvetica Riot** 6. **Is the topic consumer brand marketing, food and beverage, hospitality, or warm/lifestyle-coded?** → **Sunday Press** 7. **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