```
## Chart Data Format
When receiving analysis data, structure chart data as follows:
```javascript
// Line chart data structure
{
chartType: 'line',
title: 'Revenue Growth Trend',
xAxis: ['2020', '2021', '2022', '2023', '2024'],
datasets: [
{
label: 'Revenue ($B)',
data: [100, 120, 145, 175, 210],
color: '#0284C7' // sky — primary series
}
]
}
// Bar chart with multiple series
{
chartType: 'bar',
title: 'Quarterly Earnings Comparison',
xAxis: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: '2023',
data: [1.2, 1.5, 1.8, 2.1],
color: '#0284C7' // sky — primary
},
{
label: '2024',
data: [1.5, 1.8, 2.2, 2.5],
color: '#0D9488' // teal — secondary
}
]
}
```
## PDF Export Instructions
To export the generated HTML report to PDF:
### Method 1: Browser Print-to-PDF
1. Open the HTML file in a web browser
2. Press Ctrl+P (Cmd+P on Mac) or File → Print
3. Select "Save as PDF" or "Microsoft Print to PDF"
4. Adjust settings: margins, orientation, scale
5. Save the PDF file
### Method 2: wkhtmltopdf (Command Line)
```bash
# Install wkhtmltopdf
# macOS: brew install wkhtmltopdf
# Linux: apt-get install wkhtmltopdf
# Convert HTML to PDF
wkhtmltopdf \
--page-size A4 \
--margin-top 15mm \
--margin-bottom 15mm \
--enable-local-file-access \
report.html report.pdf
```
### Method 3: Playwright/Puppeteer (Node.js)
```javascript
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('file:///path/to/report.html');
await page.pdf({
path: 'report.pdf',
format: 'A4',
printBackground: true
});
await browser.close();
})();
```
## Integration with Other Skills
### Input Formats Accepted
1. **Structured JSON Data**
```json
{
"ticker": "AAPL",
"companyName": "Apple Inc.",
"analysisType": "fundamental",
"metrics": {...},
"charts": [...]
}
```
2. **Markdown Analysis Output**
- Parse markdown from fundamental-analysis, technical-analysis, or portfolio-review
- Extract tables, metrics, and key findings
- Generate appropriate visualizations
3. **Custom Data Tables**
- CSV-formatted financial data
- Excel/spreadsheet data ranges
- Database query results
### Workflow Examples
**Example 1: Fundamental Analysis Report**
```
User: /fundamental-analysis AAPL
[Claude generates analysis]
User: /report-generator --type comprehensive --format html
[Claude generates HTML report with embedded fundamental analysis and charts]
```
**Example 2: Portfolio Review with Custom Data**
```
User: /report-generator --type portfolio --data [paste portfolio data]
[Claude generates multi-stock comparison report with allocation charts]
```
## Output
Generate a complete, standalone HTML file containing:
1. **File Metadata**
- Filename format: `investment-report-[TICKER]-[YYYYMMDD]-[HHMMSS].html`
- File size indication
- Estimated PDF size after export
2. **Report Contents**
- Professional header with company name, ticker, date
- Table of contents (for comprehensive reports)
- All analysis sections with appropriate formatting
- Interactive charts with Chart.js
- Data tables with styling
- Key metrics highlighted in cards
- Footer with disclaimer and generation info
3. **Technical Details**
- Inline CSS (no external dependencies except CDN for Chart.js)
- Responsive design (mobile and desktop)
- Print-optimized styling for PDF export
- Cross-browser compatible (Chrome, Firefox, Safari, Edge)
4. **Export Instructions**
- Step-by-step guide for converting to PDF
- Command-line examples for automated workflows
- Browser settings recommendations
## Usage Notes
- The HTML file is fully self-contained except for Chart.js CDN (can be inlined if needed)
- Charts are interactive in HTML (hover for data points, zoom, pan)
- PDF export flattens charts to static images
- For large portfolios (>20 stocks), consider pagination or summary views
- Color scheme follows professional financial report standards (blue for primary, green for positive, red for negative)
- All monetary values should be formatted with proper thousands separators and currency symbols
## Integration with Signal Format
When generating reports from other skills, the report MUST prominently display each skill's Investment Signal block in a styled box. Use the following HTML (matches the CSS in the template above):
```html
BULLISH
Investment Signal
BULLISH
ConfidenceHIGH
Time HorizonLONG-TERM
ActionBUY
ConvictionSTRONG
ScoreX.X / 10
```
Design notes:
- `.signal-box` class: deep navy background with teal/sky gradient top border
- Add `bullish`, `bearish`, or `neutral` modifier class to both `.signal-box` and `.signal-verdict` to apply the correct verdict color and watermark tint
- Score progress bar uses the `score-fill` width as a percentage (e.g. `style="width: 84%"` for 8.4/10)
- Large ghost watermark text (`.signal-watermark`) reinforces the verdict at a glance
For multi-skill bundle reports (like /research-bundle), show a composite signal summary at the top of the report with individual skill scores in a row of `.signal-stat` items inside a single `.signal-box`.