메뉴
Design professional investment dashboards with clear visualizations and consistent styling. Use when creating HTML dashboards or reports.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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: