Generate styled HTML reports using the Terminal Dashboard theme. Use when the user needs to create an HTML report, dashboard, data visualization, or styled output document. Triggers include requests to "generate a report", "create an HTML file", "make a dashboard", "visualize data", "export to HTML", or any task requiring formatted HTML output with the project's visual identity.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Generate styled HTML reports using the Terminal Dashboard theme. Use when the user needs to create an HTML report, dashboard, data visualization, or styled output document. Triggers include requests to "generate a report", "create an HTML file", "make a dashboard", "visualize data", "export to HTML", or any task requiring formatted HTML output with the project's visual identity.
HTML Report Generation
Generate professional HTML reports using the Terminal Dashboard theme — a precision-focused, monochromatic, high-density design supporting both dark and light modes.
Quick Start
Read the template:.pi/skills/html-report/template.html
Replace placeholders:
{{TITLE}} → Report title (appears in browser tab)
{{BODY}} → Your report content HTML
Write to:reports/[report-name].html
# Example generation pattern
template = read("/.pi/skills/html-report/template.html")
html = template.replace("{{TITLE}}", "LEAP IV Scan | 2026-03-03")
html = html.replace("{{BODY}}", body_content)
write("reports/leap-iv-scan.html", html)
Template Features
The template (template.html) includes:
✅ Full CSS with dark/light mode support
✅ System preference detection (prefers-color-scheme)
✅ Theme toggle button (just add the button HTML in your body)
✅ Inter (UI/titles) + IBM Plex Mono (numeric/telemetry) fonts loaded
✅ All component styles pre-defined
✅ Print-friendly styles
✅ Responsive grid utilities
You only write the <body> content — no <head> needed!
Body Structure Template
<!-- HEADER (always include) --><headerclass="header"><div><h1class="title">Report Title</h1><pclass="subtitle">Optional subtitle or description</p></div><divclass="header-actions"><spanclass="timestamp">Generated: 2026-03-03 11:30 PST</span><buttonclass="theme-toggle"onclick="toggleTheme()">◐ THEME</button></div></header><!-- METRICS (optional) --><divclass="metrics"><divclass="metric"><divclass="metric-label">Label</div><divclass="metric-value">Value</div><divclass="metric-change">Change note</div></div><!-- more metrics... --></div><!-- CONTENT PANELS --><divclass="panel"><divclass="panel-header">Section Title</div><divclass="panel-body">
Content here
</div></div><!-- OR TABLES --><divclass="panel"><divclass="panel-header">Data Table</div><table><thead><tr><th>Column</th><thclass="text-right">Number</th></tr></thead><tbody><tr><td>Value</td><tdclass="text-right">123.45</td></tr></tbody></table></div><!-- FOOTER (optional) --><divclass="footer"><p>Footer text · Additional info</p></div>
Available CSS Classes
Layout
Class
Usage
.container
Auto-applied, max-width 1400px
.header
Report header with flex layout
.grid-2
Two-column grid (2fr 1fr)
.grid-3
Three equal columns
.grid-4
Four equal columns
.divider
Horizontal rule with margin
Panels & Cards
Class
Usage
.panel
Container with border
.panel-header
Section title bar
.panel-body
Padded content area
.panel-accent
Highlighted border
.card
Standalone card
.card-accent
Highlighted card
Metrics
Class
Usage
.metrics
Auto-fit grid container
.metric
Single metric block
.metric-label
Small uppercase label
.metric-value
Large value display
.metric-value.large
32px value
.metric-value.small
18px value
.metric-change
Secondary info with top border
Tables
Class
Usage
table
Full-width, collapsed borders
th
Sticky header, uppercase
tr:hover
Row highlight on hover
tr.highlight
Permanently highlighted row
Text
Class
Usage
.text-right
Right align
.text-center
Center align
.text-muted
Meta / supporting text (#475569 dark)
.text-positive
Green
.text-negative
Red
.text-warning
Orange
.text-small
11px
.text-uppercase
Uppercase + letter-spacing
.text-mono
IBM Plex Mono (numeric/telemetry)
.text-sans
Inter (UI/titles)
Pills / Badges
Class
Usage
.pill
Default bordered badge
.pill-accent
Inverted (white/black)
.pill-positive
Green background
.pill-negative
Red background
.pill-warning
Orange background
Status Indicators
<spanclass="status"><spanclass="status-dot"></span>
LIVE
</span><!-- Variants --><spanclass="status-dot positive"></span><spanclass="status-dot negative"></span><spanclass="status-dot warning"></span><spanclass="status-dot static"></span><!-- No animation -->
Data freshness banner at the top of the report shows market status:
Market OPEN: green pulsing dot + "All prices and flow data include today (YYYY-MM-DD)"
Market CLOSED: amber static dot + "Using closing prices from last session"
Why this matters: A scan from yesterday may show ACCUMULATION but today's flow could be DISTRIBUTION. The today-highlight forces the reader to check whether the current day confirms or breaks the pattern.
Template Variables
Variable
Description
Example
{{DATE}}
Report date
2026-03-06
{{TIMESTAMP}}
Full timestamp
2026-03-06 09:20 PST
{{STATUS_CLASS}}
Header dot color
positive / negative / warning
{{STATUS_TEXT}}
Header status
3 ACTIONS NEEDED / ALL POSITIONS ACTIVE
{{FRESHNESS_CLASS}}
Banner class
`` (live) or stale (closed)
{{FRESHNESS_TEXT}}
Banner content
📊 ... Market OPEN ... include today
{{METRICS_HTML}}
6 metric cards
Net Liq, P&L, Deployed, Margin, Positions, Kelly
{{QUICK_STATS_HTML}}
3 badge panels
Expiring, At Stop, Winners
{{ATTENTION_HTML}}
Callout blocks
🔴 Expiring, 🟡 Stop, 🟢 Winners, ⛔ Undefined
{{THESIS_SECTION_HTML}}
Full thesis table
Entry flow vs current flow with sparklines
{{POSITION_ROWS_HTML}}
<tr> rows
All positions sorted by DTE
{{FLOW_ROWS_HTML}}
<tr> rows
All tickers with sparkline + today cell
{{FOOTER_SUMMARY}}
Summary line
27 positions · $1.2M net liq · 134% deployed
Portfolio-Specific CSS Components
These are defined in the template (not in the base template.html):
Component
CSS Class
Purpose
Freshness banner
.freshness-banner
Data recency indicator at top
Sparkline
.spark + .spark-bar
Mini bar chart for daily flow
Today highlight
.spark-bar.today
White outline ring on today's bar
Today label
.spark-today-label
"today →" text under sparkline
Flow direction
.flow-dir.accumulation/.distribution/.neutral
Colored direction text
Today tag
.today-tag
Black/white "LIVE" inline badge
Progress bar
.progress-container + .progress-fill
For free-trade % (extensible)
Count badge
.count-badge + .alert/.success
Quick-stat numbers
Room for Innovation
The 8 sections above are the required minimum. You can add additional sections between Section 7 (Flow) and Section 8 (Footer) for ad-hoc analysis. Ideas:
Free Trade Progress — Progress bars for multi-leg positions approaching free status
Sector Heatmap — Group positions by sector, show aggregate flow
Expiry Calendar — Visual timeline of upcoming expirations
Kelly Capacity — Detailed breakdown of capital allocation vs. Kelly optimal
Flow Divergence Alerts — Positions where flow reversed since entry
Correlation Matrix — Which positions move together
Add these by inserting HTML before the {{FOOTER_SUMMARY}} replacement, or by adding new placeholder variables to the template.
Reference Implementation
See: reports/portfolio-2026-03-06.html
P&L Report Template
For any trade P&L or reconciliation report, use the dedicated P&L template.
<headerclass="header"><div><h1class="title">{{TICKER}} {{STRATEGY}} — P&L Reconciliation</h1><pclass="subtitle">{{DESCRIPTION}} · {{EXPIRY}}</p></div><divclass="header-actions"><spanclass="pill pill-positive">CLOSED</span><!-- or pill-negative for loss --><buttonclass="theme-toggle"onclick="toggleTheme()">◐ THEME</button></div></header>
2. Summary Metrics (4 required)
<divclass="metrics"><divclass="metric"><divclass="metric-label">Realized P&L</div><divclass="metric-value text-positive">+$17,651</div><!-- or text-negative --><divclass="metric-change">Net of all commissions</div></div><divclass="metric"><divclass="metric-label">Total Commissions</div><divclass="metric-value">$168.60</div><divclass="metric-change">{{NUM_ROUNDTRIPS}} round-trips</div></div><divclass="metric"><divclass="metric-label">Hold Period</div><divclass="metric-value">{{DAYS}} days</div><divclass="metric-change">{{OPEN_DATE}} → {{CLOSE_DATE}}</div></div><divclass="metric"><divclass="metric-label">Return on Risk</div><divclass="metric-value text-positive">+106.8%</div><!-- P&L / Capital at Risk --><divclass="metric-change">On ${{CAPITAL_AT_RISK}} {{DEBIT_OR_CREDIT}}</div></div></div>
3. Trade Summary Callout
<divclass="callout positive"><!-- or "callout negative" for losses --><divclass="callout-title">Trade Summary</div><p><strong>Strategy:</strong> {{STRATEGY_DESCRIPTION}}</p><p><strong>Thesis:</strong> {{THESIS}}</p><p><strong>Outcome:</strong> {{OUTCOME_DESCRIPTION}}</p></div>
4. Execution Table (per leg for spreads)
<divclass="panel"><divclass="panel-header">{{LEG_DESCRIPTION}}</div><table><thead><tr><th>Date</th><th>Action</th><thclass="text-right">Qty</th><thclass="text-right">Price</th><thclass="text-right">Cash Flow</th></tr></thead><tbody><tr><td>{{DATE}}</td><td><spanclass="text-positive">● BUY TO OPEN</span></td><tdclass="text-right">{{QTY}}</td><tdclass="text-right">${{PRICE}}</td><tdclass="text-right text-negative">-${{AMOUNT}}</td></tr><!-- More rows... --><trclass="subtotal"><tdcolspan="3"><strong>{{LEG}} Subtotal</strong></td><tdclass="text-right"><strong>CLOSED</strong></td><tdclass="text-right text-positive"><strong>+${{LEG_PNL}}</strong></td></tr></tbody></table></div>
<divclass="footer"><p>Generated by Trade Blotter · Data from IB Flex Query + Real-time API · {{DATE}}</p></div>
Return on Risk Calculation
Always calculate Return on Risk as:
Return on Risk = Realized P&L / Capital at Risk
Where Capital at Risk =
- For DEBIT spreads: Net debit paid to open
- For CREDIT spreads: Max loss (spread width - credit received)
- For long options: Premium paid
- For stock: Total cost basis
cri-scan command (auto-generates and opens in browser)
Any request for crash risk assessment, CTA deleveraging analysis, systematic risk monitoring
Market-wide stress analysis
How It Works
The script (cri_scan.py) is self-contained:
Fetches 1Y daily bars for VIX, VVIX, SPY, and Cboe COR1M implied correlation (IB primary, official Cboe COR1M dashboard history fallback before Yahoo last resort)
Reads the latest COR1M level and 5-session change as the CRI correlation input
Computes 20-day realized volatility, 100-day SPX moving average
Scores four CRI components (VIX, VVIX, Correlation, Momentum) — each 0-25, total 0-100
Models CTA exposure (vol-targeting) and estimates forced selling pressure
