Menu
Design professional investment dashboards with clear visualizations and consistent styling. Use when creating HTML dashboards or reports.
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.
Based on SOC occupation classification
Benchmark a stock against sector averages and assess its market position, share, and competitive advantages. Use when you need to understand a company's competitive landscape, peer ranking, or sector standing.
Calculate fundamental financial metrics (P/E, ROE, profit margin, market cap) and assess valuation as overvalued, fairly valued, or undervalued. Use when you need deep financial analysis of a company's fundamentals.
Analyze the sentiment of financial news and aggregate coverage into key themes. Use when you need to assess market sentiment, gauge media coverage, or decide whether news about a stock is bullish, bearish, or neutral.
Assemble a complete interactive HTML dashboard (Chart.js) from a JSON config. Use AFTER research is complete to render summary cards, sections, and charts into a single shareable report file.
Compare performance of multiple stocks side-by-side. Use when the user asks to "compare", "contrast", "which is better", or analyze "multiple stocks" together. Calculates returns, volatility, and correlations.
Analyze investment risk metrics for stocks including volatility, beta, VaR, and downside risk. Use when the user asks about "risk", "volatility", "how safe", "beta", or wants to understand risk profile.
| name | dashboard-design |
| description | Design professional investment dashboards with clear visualizations and consistent styling. Use when creating HTML dashboards or reports. |
This skill provides guidelines for creating professional, readable investment research dashboards.
Priority Order:
Investment Dashboard Colors:
#4CAF50 (green)#f44336 (red)#FF9800 (orange)#667eea (purple)#764ba2 (darker purple)#f5f5f5 (light gray)#ffffff (white)#333333 (dark gray)When to Use Each Type:
| Chart Type | Best For | Example Use |
|---|---|---|
| Bar Chart | Comparing discrete values | Stock returns comparison |
| Line Chart | Time series data | Price history over time |
| Pie/Doughnut | Part-to-whole relationships | Portfolio allocation |
| Gauge | Single metric with range | Risk level (0-100) |
+------------------------------------------+
| Header (Gradient) |
| Title, Company, Date |
+------------------------------------------+
| |
| Summary Cards (Grid) |
| [Sentiment] [Valuation] [Recommendation]|
| |
+------------------------------------------+
| |
| Section 1: News & Sentiment |
| +------------------------------------+ |
| | Text analysis | |
| | [Chart if applicable] | |
| +------------------------------------+ |
| |
+------------------------------------------+
| |
| Section 2: Financial Metrics |
| +------------------------------------+ |
| | Key metrics table | |
| | [Bar chart for comparison] | |
| +------------------------------------+ |
| |
+------------------------------------------+
| |
| Section 3: Competitive Analysis |
| +------------------------------------+ |
| | Market position | |
| | [Comparison chart] | |
| +------------------------------------+ |
| |
+------------------------------------------+
| Footer |
| Generated by, Date, Disclaimer |
+------------------------------------------+
Font Stack:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
Font Sizes:
2.5em (40px)1.8em (29px)1.8em (29px)1em (16px)0.9em (14px)Breakpoints:
< 768px - Stack cards vertically768px - 1024px - 2-column grid> 1024px - 3-column gridChart.js Best Practices:
{
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Clear, Descriptive Title',
font: { size: 18, weight: 'bold' }
},
legend: {
display: true,
position: 'bottom' // Keep legends at bottom
},
tooltip: {
enabled: true,
mode: 'index'
}
}
}
Numbers Formatting:
+15.2% or -3.4% (always include sign)$1,234.56 (use comma separators)$1.2M or $345.6B (abbreviate when > 1M)25.4 (one decimal place)Colors for Data:
rgba(76, 175, 80, 0.2)rgba(244, 67, 54, 0.2)rgba(255, 152, 0, 0.2)Required Elements:
Example Structure:
<div class="card">
<h3>Sentiment</h3>
<div class="value positive">Positive</div>
<div class="indicator">↑ Strong Buy Signals</div>
</div>
Ensure:
create_chart tool with proper configurationbuild_dashboard tool with all sectionsoutput/investment_report_{ticker}_{date}.htmlFor Bar Chart (Returns Comparison):
{
"chart_type": "bar",
"title": "Stock Returns Comparison (YTD)",
"labels": ["AAPL", "MSFT", "GOOGL"],
"datasets": [{
"label": "Returns (%)",
"data": [15.2, 12.8, 18.5],
"backgroundColor": ["#4CAF50", "#4CAF50", "#4CAF50"]
}]
}
For Doughnut Chart (Sentiment Breakdown):
{
"chart_type": "doughnut",
"title": "News Sentiment Distribution",
"labels": ["Positive", "Neutral", "Negative"],
"datasets": [{
"label": "Articles",
"data": [45, 30, 25],
"backgroundColor": ["#4CAF50", "#FF9800", "#f44336"]
}]
}
Before finalizing dashboard:
❌ Don't:
✅ Do:
output/ directory with timestampThis skill helps create dashboards that are: