display

name

display

description

Generate beautiful, information-dense visual charts and infographics rendered as 1280x720 PNG images in a WarGames/NORAD CRT terminal style. Triggered by /display command followed by any query. Supports bar charts, line charts, tables, KPI dashboards, timelines, and any data visualization. Uses live data APIs when the query requires real-time information (tides, weather, stocks, crypto, earthquakes, etc.). Examples: /display tide chart for Half Moon Bay today, /display S&P 500 top movers, /display weather forecast for Tokyo this week, /display comparison of programming languages, /display timeline of AI milestones. Use for any request to visualize, chart, or display data beautifully. NOT for: plain text answers, simple questions, or tasks that don't benefit from visual presentation.

Display Skill

Generate information-dense visual cards as 1280x720 PNG images from any query.

⚠️ MANDATORY: Read Style Guide First

Before generating ANY HTML, read references/canonical-style.md. This defines the required visual style (WarGames/NORAD CRT aesthetic). Every output MUST follow it. No exceptions.

A canonical reference implementation is at assets/canonical-style.html.

Workflow

1. Read references/canonical-style.md — internalize the required design language
2. Parse the query after /display — determine what data and layout are needed
3. Fetch live data if needed — see references/live-apis.md for API endpoints
4. Generate an HTML file — following the canonical style exactly
5. Render to PNG — run the renderer script
6. Send the image to the user
7. Archive — MANDATORY, see Archive section below

Rendering

node SKILL_DIR/scripts/render.mjs <input.html> <output.png>

Write HTML to /tmp/display-<name>.html, render to /tmp/display-<name>.png.

Key Style Rules (summary — full spec in canonical-style.md)

• Background: #000a14 (deep black-blue)
• Primary color: #00e5ff (neon cyan) with glow effects
• Font: Share Tech Mono monospace, ALL UPPERCASE
• CRT effects: Scanline overlay + vignette on every output
• Min font size: 13px absolute minimum, 15px for most text (must be readable on a TV/Hub from across the room)
• Glow effects on all key values (temps, prices, percentages)
• Blinking ● LIVE FEED indicator when using real-time data

Chart Types

• Bar charts: CSS bars with cyan-to-green gradient fills + glow
• Line/area charts: Inline SVG, cyan strokes, gradient area fills
• Tables: Bordered rows, cyan accents, status indicators with colored glow
• KPI cards: Bordered boxes, large glowing numbers
• Timelines: Vertical/horizontal with glowing dots and connecting lines

Live Data

Read references/live-apis.md for free API endpoints (NOAA tides, Open-Meteo weather, stocks, crypto, etc.).

Reference Files

• references/canonical-style.md — REQUIRED full design specification
• references/live-apis.md — API endpoints for live data
• assets/canonical-style.html — Reference implementation (weather forecast)
• assets/canonical-sun-arc.html — REQUIRED for sunrise/sunset queries — SVG parabolic sun arc with gradient stroke, twilight markers, NOW indicator

Archive (MANDATORY)

After EVERY /display generation, archive the output. Never skip this step.

Directory Structure

WORKSPACE/display-archive/YYYY-MM-DD/
├── INDEX.md                          ← append each new entry
├── NN-short-name.html                ← source HTML
└── NN-short-name.png                 ← rendered PNG

Steps

1. Create display-archive/YYYY-MM-DD/ if it doesn't exist
2. Determine the next sequence number NN (01, 02, 03...) by counting existing PNGs
3. Copy the HTML and PNG with naming: NN-short-descriptive-name.{html,png}
4. Append an entry to INDEX.md with:
   • Sequence number and title
   • Original prompt (exact user message)
   • Data source(s) used
   • Filenames

INDEX.md Entry Format

## NN — Title
**Prompt:** `/display <exact user query>`
**Data:** <API or source used>
**Files:** `NN-name.html`, `NN-name.png`