majiayu000 Dashboard Auto-Generation
Core Principle
Show first, refine later. Never ask "what do you want to see?" - analyze the data, detect patterns, and build a professional dashboard immediately.
When to Activate
Activate this skill when user:
- Uploads a data file (CSV, Excel, JSON, TSV)
- Says "analyze this data"
- Asks for a "dashboard" or "report"
- Wants to "visualize" or "understand" data
- Mentions PPC, sales, analytics, or business metrics
Do NOT ask questions - just build the best dashboard you can from the data.
CURV Design System Integration (CRITICAL - ALWAYS INCLUDE)
⚠️ MANDATORY REQUIREMENT: Every dashboard MUST include the complete CURV header and footer exactly as shown below.
NEVER skip the header or footer. If you generate a dashboard without both, the output is incorrect and must be regenerated.
Header (MANDATORY - Copy this exact structure)
<!-- ========== CURV HEADER (REQUIRED) ========== -->
<header class="curv-header">
<!-- Rotating background shape -->
<div class="header-shape"></div>
<!-- Header content -->
<div class="header-content">
<h1 class="hero-title">[Dashboard Name]</h1>
<p class="hero-subtitle">[Description of data - e.g., "30-Day Amazon Advertising Analysis | Aug 11 - Sep 9, 2025"]</p>
<p class="powered-by">POWERED BY CURV</p>
</div>
</header>
Required CSS for Header:
.curv-header {
text-align: center;
margin-bottom: 40px;
padding: 40px;
background: rgba(3, 12, 27, 0.6);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1.5px solid rgba(157, 78, 221, 0.5);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* CRITICAL: Rotating background shape animation */
.header-shape {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
background: linear-gradient(135deg,
rgba(157, 78, 221, 0.15) 0%,
rgba(157, 78, 221, 0.05) 50%,
transparent 100%);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
transform: translate(-50%, -50%);
animation: headerRotate 30s linear infinite;
opacity: 0.3;
z-index: 0;
}
@keyframes headerRotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 1;
max-width: 800px;
}
.hero-title {
font-size: 72px;
font-weight: 700;
color: #ffffff;
letter-spacing: -2px;
text-align: center;
text-shadow: 0 0 25px rgba(255, 255, 255, 0.6),
0 0 50px rgba(255, 255, 255, 0.4),
0 0 100px rgba(157, 78, 221, 0.4);
margin: 0;
}
.hero-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
text-align: center;
margin: 0;
max-width: 600px;
}
.powered-by {
font-size: 14px;
color: rgb(157, 78, 221);
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
font-weight: 500;
margin-top: 0.5rem;
}
/* Responsive header */
@media (max-width: 768px) {
.hero-title { font-size: 48px; }
.hero-subtitle { font-size: 16px; }
}
Footer (MANDATORY - Copy this exact structure)
<!-- ========== CURV FOOTER (REQUIRED) ========== -->
<footer class="curv-footer">
<div class="footer-title">[Dashboard Name]</div>
<div class="footer-subtitle">Advanced [Data Type] Analytics for Amazon Sellers</div>
<div class="footer-credits">Produced By Danny McMillan | CURV Tools | A Seller Sessions Production 2025</div>
</footer>
Required CSS for Footer:
.curv-footer {
text-align: center;
padding: 2rem;
margin-top: 3rem;
border-top: 1px solid rgba(157, 78, 221, 0.2);
color: rgba(255, 255, 255, 0.5);
}
.footer-title {
font-size: 16px;
color: #ffffff;
margin-bottom: 0.5rem;
}
.footer-subtitle {
font-size: 12px;
opacity: 0.7;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
}
.footer-credits {
font-size: 11px;
opacity: 0.5;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.5px;
}
Tab Navigation (When Multiple Views)
<div class="tab-nav">
<button class="tab active">📊 OVERVIEW</button>
<button class="tab">🔍 EXPLORER</button>
<button class="tab">📈 FUNNEL</button>
<button class="tab">💎 OPPORTUNITIES</button>
</div>
Styling:
- Inactive: Dark background
rgba(255, 255, 255, 0.05), white text - Active: Purple background
rgb(157, 78, 221), white text - Border radius: 12px
- Padding: 12px 24px
Color System
/* Backgrounds */
--bg-primary: rgb(3, 12, 27); /* Main background */
--bg-header: linear-gradient(180deg, rgb(18, 11, 41) 0%, rgb(13, 18, 41) 40%, rgb(4, 16, 32) 70%, rgb(3, 12, 27) 100%);
--bg-panel: rgba(255, 255, 255, 0.03); /* Glassmorphic panels */
/* Accents */
--accent: rgb(157, 78, 221); /* CURV Purple */
--accent-hover: rgb(177, 98, 241);
--accent-border: rgba(157, 78, 221, 0.5);
/* Status Colors */
--success: rgb(34, 197, 94); /* Green - Top Growing */
--warning: rgb(234, 179, 8); /* Yellow - Hidden Gem */
--danger: rgb(239, 68, 68); /* Red - Drop-off/Critical */
--info: rgb(59, 130, 246); /* Blue - Clicks/CTR */
/* Text */
--text-primary: #ffffff;
--text-muted: rgba(255, 255, 255, 0.7);
--text-dim: rgba(255, 255, 255, 0.5);
Typography
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: rgb(3, 12, 27);
color: #ffffff;
}
.hero-title {
font-size: 72px;
font-weight: 700;
letter-spacing: -2px;
text-shadow: 0 0 25px rgba(255, 255, 255, 0.6),
0 0 50px rgba(255, 255, 255, 0.4),
0 0 100px rgba(157, 78, 221, 0.4);
}
.metric-value {
font-size: 48px;
font-weight: 700;
letter-spacing: -1px;
}
.metric-label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.7);
}
Glassmorphic Panel Template
.panel {
background: linear-gradient(135deg, rgba(18, 11, 41, 0.6), rgba(13, 18, 41, 0.6));
backdrop-filter: blur(10px);
border: 1px solid rgba(157, 78, 221, 0.3);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
Button Styles
.btn-primary {
background: linear-gradient(135deg, rgb(157, 78, 221), rgb(177, 98, 241));
color: white;
border: none;
border-radius: 12px;
padding: 12px 32px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(157, 78, 221, 0.4);
}
.btn-outline {
background: transparent;
color: rgb(157, 78, 221);
border: 2px solid rgba(157, 78, 221, 0.5);
border-radius: 12px;
padding: 10px 28px;
}
Auto-Detection Patterns
1. PPC / Advertising Data
Detect columns like:
- Placement, Campaign, Ad Group, Keyword, Search Term
- Impressions, Clicks, Spend, Cost Per Click (CPC)
- Sales, Revenue, ROAS, ACOS, CTR, Conversion Rate
- Orders, Units, Add-to-Cart, Cart Adds
Auto-generate tabs:
- OVERVIEW - 6 key metrics + top performers table
- EXPLORER - Searchable/filterable table with all campaigns/keywords
- FUNNEL - Impressions → Clicks → Cart Adds → Purchases (with CVR)
- OPPORTUNITIES - Hidden gems, bottlenecks, drop-offs
2. Sales / E-commerce Data
Detect columns like:
- Date, Product, SKU, Category, ASIN
- Units, Revenue, Profit, Price
- Orders, Customers, Sessions
- Returns, Refunds
Auto-generate tabs:
- OVERVIEW - Revenue, units, AOV, profit metrics
- EXPLORER - Product performance table with filters
- FUNNEL - Sessions → Views → Cart → Purchase (if session data)
- OPPORTUNITIES - Low stock, high return rate, underperformers
3. Analytics / Traffic Data
Detect columns like:
- Date, Source, Medium, Campaign, Keyword
- Sessions, Users, Pageviews, Bounce Rate
- Conversion Rate, Goal Completions, Events
- Avg Session Duration, Pages per Session
Auto-generate tabs:
- OVERVIEW - Sessions, users, CVR, bounce rate
- EXPLORER - Source/medium breakdown with filters
- FUNNEL - Landing → Engagement → Conversion
- OPPORTUNITIES - High bounce sources, conversion opportunities
4. Accounting / Financial Data
Detect columns like:
- Date, Account, Category, Transaction Type
- Amount, Debit, Credit, Balance
- Vendor, Customer, Invoice
Auto-generate tabs:
- OVERVIEW - Total income, expenses, profit, cash flow
- EXPLORER - Transaction table with filters (vendor, category, date)
- NO FUNNEL - Not applicable for accounting
- OPPORTUNITIES - Top expenses, late invoices, cash flow issues
5. Support Tickets / CRM Data
Detect columns like:
- Ticket ID, Status, Priority, Category
- Created Date, Resolved Date, Response Time
- Agent, Customer, Satisfaction Score
Auto-generate tabs:
- OVERVIEW - Total tickets, avg resolution time, satisfaction
- EXPLORER - Ticket table with filters (status, agent, category)
- FUNNEL - New → In Progress → Resolved
- OPPORTUNITIES - Overdue tickets, low satisfaction, bottlenecks
Tab System (When to Use)
Use Tabs When:
- Dataset has >100 rows (need explorer for search/filter)
- Data supports funnel visualization (impressions→clicks→conversions)
- Multiple opportunity types exist (hidden gems, bottlenecks, drop-offs)
Single Page When:
- Dataset <50 rows (all fits on overview)
- Simple report with few metrics
- No funnel or exploration needed
Tab Structure
<div class="dashboard-container">
<div class="tab-nav">
<button class="tab active" data-tab="overview">📊 OVERVIEW</button>
<button class="tab" data-tab="explorer">🔍 EXPLORER</button>
<button class="tab" data-tab="funnel">📈 FUNNEL</button>
<button class="tab" data-tab="opportunities">💎 OPPORTUNITIES</button>
</div>
<div id="overview-tab" class="tab-content active">
<!-- Overview content -->
</div>
<div id="explorer-tab" class="tab-content hidden">
<!-- Explorer content -->
</div>
<div id="funnel-tab" class="tab-content hidden">
<!-- Funnel content -->
</div>
<div id="opportunities-tab" class="tab-content hidden">
<!-- Opportunities content -->
</div>
</div>
<script>
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
content.classList.add('hidden');
});
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
// Show selected tab
const tabName = tab.getAttribute('data-tab');
document.getElementById(tabName + '-tab').classList.add('active');
document.getElementById(tabName + '-tab').classList.remove('hidden');
tab.classList.add('active');
});
});
</script>
Overview Tab (Always Required)
Structure:
- Performance Summary Section (4-6 large metric cards)
- Top Performers Table (top 10 by primary metric)
- Insights Section (3-5 key insights with "What this means" tooltips)
Metric Cards with Icons:
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-icon">👁️</div>
<div class="metric-content">
<p class="metric-value">50.9K</p>
<p class="metric-label">IMPRESSIONS</p>
<p class="metric-detail">total</p>
</div>
<div class="metric-footer">
<span class="market-share">9.7%</span>
<span class="label">Market Share</span>
</div>
<div class="tooltip-trigger">ℹ️ What this means</div>
</div>
<!-- Repeat for other metrics -->
</div>
Icon mapping for PPC:
- Impressions: 👁️
- Clicks: 🖱️
- Basket Adds: 🛒
- Purchases: 💰
- Spend: 💳
- Sales: 📈
Tooltip Content:
<div class="tooltip hidden">
<p class="tooltip-text">[Explanation of metric]</p>
<p class="tooltip-detail"><strong>Market Share:</strong> [Context about market share]</p>
</div>
Explorer Tab (When >100 Rows)
Structure:
- Search Bar (filter across all text columns)
- Performance Score Legend (color-coded badges)
- Sortable Table (click column headers to sort)
- Pagination (10/20/50 per page dropdown)
Search Implementation:
<div class="explorer-controls">
<input type="text" id="search-input" placeholder="Search queries..." class="search-input">
<select id="per-page" class="per-page-select">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="50">50 per page</option>
</select>
<span class="results-count">3 results</span>
</div>
Performance Score Badges:
<div class="performance-legend">
<h3>Performance Score Legend</h3>
<div class="legend-grid">
<div class="legend-item">
<span class="badge excellent">51-100%: Excellent</span>
</div>
<div class="legend-item">
<span class="badge good">26-50%: Good</span>
</div>
<div class="legend-item">
<span class="badge needs-work">0-25%: Needs Work</span>
</div>
</div>
</div>
Badge colors:
- Excellent (51-100%): Green
rgb(34, 197, 94) - Good (26-50%): Yellow
rgb(234, 179, 8) - Needs Work (0-25%): Red
rgb(239, 68, 68)
Sortable Table:
<table class="data-table sortable">
<thead>
<tr>
<th class="sortable" data-column="query">SEARCH QUERY ⬍</th>
<th class="sortable" data-column="score">SCORE ⬍</th>
<th class="sortable" data-column="impressions">IMPRESSIONS ⬍</th>
<th class="sortable" data-column="clicks">CLICKS ⬍</th>
<th class="sortable" data-column="ctr">CTR % ⬍</th>
<th class="sortable" data-column="roas">ROAS ⬍</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Rows populated dynamically -->
</tbody>
</table>
Classification Badges in Table:
<td>
<span class="badge stable-performer">✓ STABLE PERFORMER</span>
<span class="badge-negative">↓ -24%</span>
</td>
Badge types:
- Rising Star:
⭐ RISING STAR(purple) - Stable Performer:
✓ STABLE PERFORMER(blue) - Needs Attention:
⚠️ NEEDS ATTENTION(red)
Funnel Tab (When Funnel Data Exists)
When to Create Funnel:
PPC Data: Impressions → Clicks → Cart Adds → Purchases E-commerce: Sessions → Views → Cart → Purchase Analytics: Landing → Engagement → Goal Completion Support: New → In Progress → Resolved
Funnel Visualization:
<div class="funnel-container">
<h2>Customer Journey Funnel</h2>
<p class="funnel-subtitle">Track your customer journey from first impression to final purchase. Spot bottlenecks instantly and discover growth opportunities.</p>
<div class="funnel-visual">
<!-- Stage 1 -->
<div class="funnel-stage" style="width: 100%;">
<div class="stage-label">
<span class="stage-icon">👁️</span>
<span class="stage-name">Impressions</span>
</div>
<div class="stage-metric">50.9K</div>
<div class="stage-detail">9.7% market share</div>
</div>
<!-- Drop-off indicator -->
<div class="funnel-drop">
<span class="drop-badge critical">⬇ -94.9% drop-off</span>
<div class="drop-arrow">↓</div>
</div>
<!-- Stage 2 -->
<div class="funnel-stage" style="width: 85%; background: linear-gradient(90deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));">
<div class="stage-label">
<span class="stage-icon">🖱️</span>
<span class="stage-name">Clicks</span>
</div>
<div class="stage-metric">2.6K</div>
<div class="stage-detail">
<span class="cvr-badge">5.1% CVR</span>
<span class="drop-indicator critical">⚠️ Critical Drop-off</span>
</div>
</div>
<!-- Continue for all stages -->
</div>
<div class="funnel-summary">
<div class="summary-card">
<p class="summary-value purple">0.62%</p>
<p class="summary-label">Overall Conversion</p>
</div>
<div class="summary-card">
<p class="summary-value red">94.9%</p>
<p class="summary-label">Biggest Problem</p>
</div>
<div class="summary-card">
<p class="summary-value yellow">Impressions → Clicks</p>
<p class="summary-label">Critical Stage</p>
</div>
<div class="summary-card">
<p class="summary-value green">2</p>
<p class="summary-label">Issues to Fix</p>
</div>
</div>
<div class="funnel-diagram">
<h3>💡 Understanding Your Sales Funnel</h3>
<div class="funnel-flow">
<div class="flow-stage">
<span class="flow-icon">👁️</span>
<span class="flow-label">Impressions</span>
<span class="flow-description">Shoppers see your product in search results</span>
</div>
<span class="flow-arrow">→</span>
<div class="flow-stage">
<span class="flow-icon">🖱️</span>
<span class="flow-label">Clicks</span>
<span class="flow-description">Interested shoppers click to learn more</span>
</div>
<span class="flow-arrow">→</span>
<div class="flow-stage">
<span class="flow-icon">🛒</span>
<span class="flow-label">Cart Adds</span>
<span class="flow-description">Convinced shoppers add to cart</span>
</div>
<span class="flow-arrow">→</span>
<div class="flow-stage">
<span class="flow-icon">💰</span>
<span class="flow-label">Purchases</span>
<span class="flow-description">Final step: completed sales</span>
</div>
</div>
</div>
</div>
Funnel Styling:
.funnel-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 40px 0;
}
.funnel-stage {
background: linear-gradient(90deg, rgba(157, 78, 221, 0.3) 0%, rgba(157, 78, 221, 0.1) 100%);
border: 2px solid rgba(157, 78, 221, 0.5);
border-radius: 12px;
padding: 32px;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.funnel-drop {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0;
}
.drop-badge {
background: rgba(239, 68, 68, 0.2);
border: 1px solid rgb(239, 68, 68);
color: rgb(239, 68, 68);
padding: 6px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
.drop-badge.critical {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.cvr-badge {
background: rgba(34, 197, 94, 0.2);
color: rgb(34, 197, 94);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
Drop-off Severity:
- Critical (>80%): Red badge with pulse animation
- Warning (50-80%): Yellow/orange badge
- Normal (<50%): Muted display, no badge
Opportunities Tab (Always Include)
Structure:
- Opportunities Legend (category badges)
- Impact Level Filter Buttons (High/Medium/Low)
- Opportunity Cards (sorted by impact)
Opportunities Legend:
<div class="opportunities-legend">
<h3>Opportunities Legend</h3>
<div class="legend-grid">
<div class="legend-category">
<span class="category-icon">💎</span>
<span class="category-label">Hidden Gem</span>
<span class="category-description">Low market share, high conversion</span>
</div>
<div class="legend-category">
<span class="category-icon">⚠️</span>
<span class="category-label">Funnel Bottleneck</span>
<span class="category-description">High traffic, poor conversion</span>
</div>
<div class="legend-category">
<span class="category-icon">📊</span>
<span class="category-label">Share Opportunity</span>
<span class="category-description">Strong metrics, growth potential</span>
</div>
</div>
<h3>Impact Levels</h3>
<div class="legend-grid">
<div class="impact-level">
<span class="badge high-impact">High Impact</span>
<span>10,000+ impressions</span>
</div>
<div class="impact-level">
<span class="badge medium-impact">Medium Impact</span>
<span>3,000-10,000 impressions</span>
</div>
<div class="impact-level">
<span class="badge low-impact">Low Impact</span>
<span><3,000 impressions</span>
</div>
</div>
</div>
Impact Filter Buttons:
<div class="impact-filters">
<p>💡 Hover over any opportunity card for detailed performance breakdown</p>
<div class="filter-buttons">
<button class="filter-btn active" data-impact="high">
⚠️ HIGH IMPACT <span class="count">4</span>
</button>
<button class="filter-btn" data-impact="medium">
🎯 MEDIUM IMPACT <span class="count">1</span>
</button>
<button class="filter-btn" data-impact="low">
✓ LOW IMPACT <span class="count">0</span>
</button>
</div>
</div>
Opportunity Cards:
<div class="opportunities-grid">
<div class="opportunity-card high-impact" data-impact="high">
<div class="card-header">
<span class="opportunity-icon">💎</span>
<span class="impact-badge high">HIGH IMPACT</span>
</div>
<h3 class="opportunity-title">Hidden Gem</h3>
<p class="opportunity-keyword">wireless headphones</p>
<p class="opportunity-insight">Low market share but high conversion rate - untapped potential</p>
<div class="opportunity-metrics">
<div class="metric-row">
<span class="metric-label">Impressions:</span>
<span class="metric-value">15,420</span>
</div>
<div class="metric-row">
<span class="metric-label">Clicks:</span>
<span class="metric-value">892</span>
</div>
<div class="metric-row">
<span class="metric-label">Purchases:</span>
<span class="metric-value">87</span>
</div>
<div class="metric-row">
<span class="metric-label">CVR:</span>
<span class="metric-value success">0.56%</span>
</div>
</div>
<button class="btn-primary">EXPLORE INSIGHTS</button>
</div>
<!-- More cards -->
</div>
Opportunity Detection Logic:
Hidden Gem:
- Market share <10% (impressions)
- CVR >0.4% or ROAS >3.0x
- Badge: Purple 💎
Funnel Bottleneck:
- High impressions (>10,000)
- Low CTR (<3%) OR low cart-to-purchase rate (<40%)
- Badge: Red ⚠️
Share Opportunity:
- All metrics above average
- Market share potential (CTR >5%, CVR >0.5%)
- Badge: Green 📊
Priority Calculation:
Impact Score = (Impressions / 1000) × CVR × ROAS
High Impact: >10
Medium Impact: 3-10
Low Impact: <3
Search & Filter Implementation
Search Functionality:
const searchInput = document.getElementById('search-input');
const tableBody = document.getElementById('table-body');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const rows = tableBody.querySelectorAll('tr');
let visibleCount = 0;
rows.forEach(row => {
const text = row.textContent.toLowerCase();
if (text.includes(searchTerm)) {
row.style.display = '';
visibleCount++;
} else {
row.style.display = 'none';
}
});
document.querySelector('.results-count').textContent = `${visibleCount} results`;
});
Sortable Table:
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', () => {
const column = header.getAttribute('data-column');
const rows = Array.from(tableBody.querySelectorAll('tr'));
const isAscending = header.classList.contains('asc');
rows.sort((a, b) => {
const aVal = a.querySelector(`[data-column="${column}"]`).textContent;
const bVal = b.querySelector(`[data-column="${column}"]`).textContent;
// Handle numeric vs text sorting
if (!isNaN(aVal) && !isNaN(bVal)) {
return isAscending ? aVal - bVal : bVal - aVal;
}
return isAscending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
});
// Clear existing order
tableBody.innerHTML = '';
rows.forEach(row => tableBody.appendChild(row));
// Toggle sort direction
document.querySelectorAll('.sortable').forEach(h => h.classList.remove('asc', 'desc'));
header.classList.add(isAscending ? 'desc' : 'asc');
});
});
Insight & Recommendation Cards
Insight Cards with Tooltips:
<div class="insights-section">
<h2>📊 Key Insights</h2>
<div class="insights-grid">
<div class="insight-card success">
<div class="insight-icon">✓</div>
<div class="insight-content">
<h3>Product Pages outperform all placements</h3>
<p class="insight-metric">5.84x ROAS vs 2.1x average</p>
<div class="insight-tooltip">
<span class="tooltip-trigger">💡 What this means</span>
<div class="tooltip-content hidden">
<p>Product Pages deliver nearly 3x better return than other placements. Every £1 spent generates £5.84 in sales.</p>
<p><strong>Recommendation:</strong> Increase budget allocation to Product Pages by 30%.</p>
</div>
</div>
</div>
</div>
<!-- More insights -->
</div>
</div>
Recommendation Cards:
<div class="recommendations-section">
<h2>🎯 Actionable Recommendations</h2>
<div class="recommendations-grid">
<div class="recommendation-card">
<div class="rec-number">1</div>
<div class="rec-content">
<h3>Reallocate 40% of "Rest of Search" budget to "Product Pages"</h3>
<p class="rec-reason">Rest of Search shows 33.5% ACOS vs Product Pages at 17.1% ACOS</p>
<div class="rec-impact">
<span class="impact-label">Expected Impact:</span>
<span class="impact-value success">Overall ACOS drops from 25.5% to ~22%</span>
</div>
<div class="rec-urgency high">🔴 High Priority</div>
</div>
</div>
<!-- More recommendations -->
</div>
</div>
Performance Summary Cards
Conversion Rate Cards (for Funnel):
<div class="performance-summary">
<h2>Performance Summary</h2>
<p class="summary-subtitle">Conversion rates show how effectively you move customers through your sales funnel</p>
<div class="conversion-cards">
<div class="conversion-card blue">
<p class="conversion-value">5.1%</p>
<p class="conversion-label">CLICK RATE</p>
<p class="conversion-description">How appealing your listing is compared to competitors</p>
</div>
<div class="conversion-card green">
<p class="conversion-value">21.6%</p>
<p class="conversion-label">ADD-TO-CART RATE</p>
<p class="conversion-description">How convincing your product details and pricing are</p>
</div>
<div class="conversion-card yellow">
<p class="conversion-value">56.1%</p>
<p class="conversion-label">PURCHASE RATE</p>
<p class="conversion-description">How well you convert cart additions to actual sales</p>
</div>
<div class="conversion-card purple">
<p class="conversion-value">0.62%</p>
<p class="conversion-label">OVERALL CVR</p>
<p class="conversion-description">Your complete funnel: from impression to purchase</p>
</div>
</div>
</div>
File Naming Convention
[dashboard-name]-[date].html
Examples:
- ppc-placement-dashboard-2025-10-19.html
- sales-performance-dashboard-2025-10-19.html
- website-analytics-dashboard-2025-10-19.html
Quality Gates
CRITICAL - Before delivering ANY dashboard, verify:
🚨 MANDATORY (Dashboard is INVALID without these):
- ✅ CURV header with rotating background animation (
.header-shapewith@keyframes headerRotate) - ✅ Hero title with white glow effect (
text-shadow: 0 0 25px...) - ✅ "POWERED BY CURV" text in purple (
rgb(157, 78, 221)) - ✅ CURV footer with three lines: title, subtitle, credits
- ✅ Footer credits: "Produced By Danny McMillan | CURV Tools | A Seller Sessions Production 2025"
⚠️ OUTPUT FORMAT REQUIREMENT:
- ✅ Must be standalone HTML file (NOT React JSX, NOT component code)
- ✅ Complete
<!DOCTYPE html>with<head>and<body> - ✅ All CSS in
<style>tag (no external stylesheets) - ✅ All JavaScript in
<script>tag (no external files) - ✅ File opens directly in browser without build tools
Standard Quality Checks:
- ✅ Tab navigation (if >100 rows or funnel exists)
- ✅ All metric cards have icons and tooltips
- ✅ Funnel visualization (if applicable data)
- ✅ Opportunities tab with impact levels
- ✅ Search/filter working in Explorer tab
- ✅ Sortable table headers
- ✅ Color-coded badges (green/yellow/red)
- ✅ Purple accent color
rgb(157, 78, 221)used consistently - ✅ Dark background
rgb(3, 12, 27) - ✅ Responsive layout (works on mobile)
- ✅ JavaScript for tabs, search, sort included
- ✅ All tooltips functional (hover or click)
Example Output Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PPC Placement Dashboard - CURV Tools</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* CURV Design System CSS */
/* [Complete CSS from examples above] */
</style>
</head>
<body>
<!-- Hero Header -->
<div class="hero-header">
<h1 class="hero-title">PPC Placement Performance</h1>
<p class="hero-subtitle">30-Day Analysis (Aug 11 - Sep 9, 2025) • 3,917 data points analyzed</p>
<p class="powered-by">POWERED BY CURV</p>
</div>
<!-- Tab Navigation -->
<div class="tab-nav">
<button class="tab active" data-tab="overview">📊 OVERVIEW</button>
<button class="tab" data-tab="explorer">🔍 EXPLORER</button>
<button class="tab" data-tab="funnel">📈 FUNNEL</button>
<button class="tab" data-tab="opportunities">💎 OPPORTUNITIES</button>
</div>
<!-- Tab Content -->
<div id="overview-tab" class="tab-content active">
<!-- Overview content -->
</div>
<div id="explorer-tab" class="tab-content hidden">
<!-- Explorer content -->
</div>
<div id="funnel-tab" class="tab-content hidden">
<!-- Funnel content -->
</div>
<div id="opportunities-tab" class="tab-content hidden">
<!-- Opportunities content -->
</div>
<!-- Footer -->
<footer class="curv-footer">
<p>PPC Placement Performance</p>
<p>Advanced Search Performance Analytics for Amazon Sellers</p>
<p>Produced By Danny McMillan | CURV Tools | A Seller Sessions Production 2025</p>
</footer>
<script>
/* JavaScript for tabs, search, sort, tooltips */
</script>
</body>
</html>
Success Criteria
This skill works correctly when:
- ✅ User uploads file → Complete tabbed dashboard generated automatically
- ✅ Header and footer match CURV production tools exactly
- ✅ Purple accent color used throughout
- ✅ Funnel visualization shows drop-offs with CVR
- ✅ Opportunities categorized by impact level
- ✅ Search and sort fully functional
- ✅ All tooltips provide useful context
- ✅ Dashboard is visually identical to SQPR Analyser style
- ✅ Zero questions asked before generation
- ✅ User can make immediate business decisions from output