Financial HTML Brief
Converts financial research or market analysis into a polished, interactive HTML presentation for senior stakeholder review.
Core Design System
Always use the dark financial terminal aesthetic defined in references/design-system.md. Read it before writing any code.
Workflow
Step 1 — Parse the Input
Identify from the user's content:
- Asset / subject: What is being analyzed (equity, commodity, macro theme, fund, etc.)
- Key price data: Current price, % changes, ranges, benchmarks
- Sections present: Forecasts, scenarios, risks, catalysts, technicals, geopolitical actors, verdict
- Time sensitivity: Any live/breaking developments that should be flagged
If the input is a file, read it fully before proceeding.
Step 2 — Map Content to Sections
Use the section map below. Include only sections for which content exists. Never leave a section empty or with placeholder text.
| Content Type |
HTML Section |
| Price / headline metrics |
Hero with live stats row |
| Breaking news / recent events |
Developments Feed |
| Bank / analyst forecasts |
Forecast Grid |
| Upside / base / downside |
Scenario Boxes |
| Risk factors with probability |
Risk Table (tabbed by bull/bear/geo) |
| Technical levels / support / resistance |
Technical Levels with bar chart |
| Catalysts / watch items |
Numbered Catalyst List |
| Summary / recommendation |
Verdict with metadata scorecard |
Step 3 — Build the HTML
Read references/design-system.md for the full CSS variable set, component patterns, and layout rules, then produce a single self-contained HTML file that:
- Embeds all CSS and JS inline (no external files except Google Fonts)
- Uses the IBM Plex Mono + Playfair Display font pairing
- Includes a scrolling ticker tape with key price data
- Includes sticky navigation with section anchors
- Uses scroll-reveal animations on each section
- Is fully responsive down to 768px width
- Passes the VP-readiness checklist (see below)
Step 4 — VP-Readiness Checklist
Before outputting, verify:
Section Components
Detailed HTML patterns for each component are in references/components.md. Read it when building a section you haven't built yet in this session.
Ticker Tape Content
Extract 6–8 key data points for the ticker. Ideal items:
- Asset name + current price + % change
- Session high / low
- YTD or YoY performance
- A relevant benchmark (gold, USD index, spread, etc.)
- Status of a key macro factor (e.g., "HORMUZ STATUS: ~10% CAPACITY")
Duplicate the content once so the tape loops seamlessly.
Naming Conventions
- File:
[asset-slug]-[context]-brief.html (e.g., brent-crude-vp-brief.html)
- Section IDs:
overview, developments, forecasts, scenarios, risks, technicals, catalysts, verdict
- Tab IDs for risk section:
bull-risks, bear-risks, geo-matrix
Output
Save to /mnt/user-data/outputs/ and present with present_files. Confirm the file is self-contained and opens correctly in a browser without any external dependencies beyond Google Fonts.
1---2name: financial-html-brief3description: Converts financial research, market data, or investment analysis (in any format — markdown, uploaded docs, raw notes, CSV data) into a polished, interactive HTML presentation ready for VP or senior stakeholder review. Use this skill whenever the user wants to: turn a market report into a presentation, create an investor brief or one-pager, make research "presentable" for a meeting, output an interactive HTML from financial data or analysis, or produce a Bloomberg-terminal-style dashboard from notes or documents. Trigger even when the user says things like "make this presentable", "clean this up for my VP", "create a brief from this", "turn this into a deck" or "generate an HTML from this research". Always use this skill for finance-related HTML output.4---56# Financial HTML Brief78Converts financial research or market analysis into a polished, interactive HTML presentation for senior stakeholder review.910## Core Design System1112Always use the dark financial terminal aesthetic defined in `references/design-system.md`. Read it before writing any code.1314## Workflow1516### Step 1 — Parse the Input1718Identify from the user's content:19- **Asset / subject**: What is being analyzed (equity, commodity, macro theme, fund, etc.)20- **Key price data**: Current price, % changes, ranges, benchmarks21- **Sections present**: Forecasts, scenarios, risks, catalysts, technicals, geopolitical actors, verdict22- **Time sensitivity**: Any live/breaking developments that should be flagged2324If the input is a file, read it fully before proceeding.2526### Step 2 — Map Content to Sections2728Use the section map below. Include only sections for which content exists. Never leave a section empty or with placeholder text.2930| Content Type | HTML Section |31|---|---|32| Price / headline metrics | Hero with live stats row |33| Breaking news / recent events | Developments Feed |34| Bank / analyst forecasts | Forecast Grid |35| Upside / base / downside | Scenario Boxes |36| Risk factors with probability | Risk Table (tabbed by bull/bear/geo) |37| Technical levels / support / resistance | Technical Levels with bar chart |38| Catalysts / watch items | Numbered Catalyst List |39| Summary / recommendation | Verdict with metadata scorecard |4041### Step 3 — Build the HTML4243Read `references/design-system.md` for the full CSS variable set, component patterns, and layout rules, then produce a **single self-contained HTML file** that:44451. Embeds all CSS and JS inline (no external files except Google Fonts)462. Uses the IBM Plex Mono + Playfair Display font pairing473. Includes a scrolling ticker tape with key price data484. Includes sticky navigation with section anchors495. Uses scroll-reveal animations on each section506. Is fully responsive down to 768px width517. Passes the **VP-readiness checklist** (see below)5253### Step 4 — VP-Readiness Checklist5455Before outputting, verify:56- [ ] No placeholder text ("Lorem ipsum", "TBD", "N/A" without reason)57- [ ] All prices and percentages are formatted consistently (e.g., `$103.73`, `+46.1%`)58- [ ] Color coding is consistent: red = bullish pressure / upside risk, green = bearish / resolution, gold = neutral/current, blue = informational59- [ ] Risk table has probability badges on every row60- [ ] Verdict section has a populated metadata scorecard61- [ ] Disclaimer present in footer62- [ ] Date and data source attribution present6364## Section Components6566Detailed HTML patterns for each component are in `references/components.md`. Read it when building a section you haven't built yet in this session.6768## Ticker Tape Content6970Extract 6–8 key data points for the ticker. Ideal items:71- Asset name + current price + % change72- Session high / low73- YTD or YoY performance74- A relevant benchmark (gold, USD index, spread, etc.)75- Status of a key macro factor (e.g., "HORMUZ STATUS: ~10% CAPACITY")7677Duplicate the content once so the tape loops seamlessly.7879## Naming Conventions8081- File: `[asset-slug]-[context]-brief.html` (e.g., `brent-crude-vp-brief.html`)82- Section IDs: `overview`, `developments`, `forecasts`, `scenarios`, `risks`, `technicals`, `catalysts`, `verdict`83- Tab IDs for risk section: `bull-risks`, `bear-risks`, `geo-matrix`8485## Output8687Save to `/mnt/user-data/outputs/` and present with `present_files`. Confirm the file is self-contained and opens correctly in a browser without any external dependencies beyond Google Fonts.
Lunatic16