Dashboard Auto-Generation (Client Edition)

Dashboard Auto-Generation (Client Edition)

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.

Client-Ready Design: Clean, professional styling with neutral colors and universal branding. No CURV-specific elements. Ready to share directly with clients.

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
• Requests "client-friendly" or "professional" dashboard
• Wants to share analysis with external stakeholders

Do NOT ask questions - just build the best dashboard you can from the data.

Modern Design System (Actual n8n Tokens)

CRITICAL: Complete CSS Variables (Copy Exactly)

Every dashboard MUST start with these exact n8n design tokens in the <style> tag:

:root {
  /​* n8n colors - extracted from n8n.io */
  --color-crow: rgba(25, 9, 24, 0.94);
  --color-dr--white: rgba(250, 249, 251, 0.75);
  --color-new-love: rgb(196, 187, 211);
  --color-ink-black: rgba(31, 25, 42, 0.7);
  --color-ink-black-2: rgba(31, 25, 42, 0.5);
  --color-ink-black-3: rgba(31, 25, 42, 0.3);
  --color-ink-black-4: rgb(31, 25, 42);
  --color-white: rgba(255, 255, 255, 0.16);
  --color-white-2: rgba(255, 255, 255, 0.1);
  --color-white-3: rgba(255, 255, 255, 0.3);
  --color-white-4: rgb(255, 255, 255);
  --color-white-5: rgba(255, 255, 255, 0.8);
  --color-white-6: rgba(255, 255, 255, 0.93);
  --color-narwhale-grey: rgba(12, 8, 28, 0.43);
  --color-narwhale-grey-2: rgba(13, 10, 25, 0.28);
  --color-narwhale-grey-3: rgb(14, 9, 24);

  /​* n8n typography */
  --font-family: geomanist, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-book: geomanist-book, ui-sans-serif, system-ui, sans-serif;

  /​* n8n spacing */
  --vspace-sm: 0.5rem;
  --vspace-md: 1rem;
  --vspace-lg: 1.5rem;
  --vspace-xl: 2rem;
  --vspace-xxl: 3rem;

  --hspace-sm: 0.5rem;
  --hspace-md: 1rem;
  --hspace-lg: 1.5rem;
  --hspace-xl: 2rem;

  /​* n8n border radii */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 20px;
  --border-radius-xl: 1.5rem;

  /​* n8n shadows - glassmorphic effects */
  --shadow-card: rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, 0.23) 0px 4px 16px -8px;
  --shadow-card-hover: rgb(196, 187, 211) 0px 0px inset, rgba(14, 9, 24, 0.44) 0px 4px 4px, rgb(0, 0, 0) 0px 13px 16px -8px, rgba(255, 255, 255, 0.05) 0px 4px 12px inset;
  --shadow-glow: rgba(196, 187, 211, 0.3) 0px 0px 20px;
}

Base Styles Using n8n Tokens

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--color-narwhale-grey-3);
    color: var(--color-white-4);
    line-height: 1.6;
    padding: var(--vspace-xl);
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

h1, h2, h3 {
    font-family: var(--font-family-book);
    font-weight: 500;
}

.dashboard-title {
    font-size: 54px;
    font-weight: 500;
    color: var(--color-white-4);
    letter-spacing: -2px;
    line-height: 54px;
}

.metric-value {
    font-size: 48px;
    font-weight: 500;
    color: var(--color-new-love);
    line-height: 1;
}

.metric-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-dr--white);
    font-weight: 400;
}

Header (Modern n8n-Style)

<!-- ========== MODERN GRADIENT HEADER ========== -->
<header class="modern-header">
    <div class="header-background"></​div>
    <div class="header-content">
        <h1 class="dashboard-title">[Dashboard Name]</​h1>
        <p class="dashboard-subtitle">[Description of data - e.g., "30-Day Performance Analysis | Aug 11 - Sep 9, 2025"]</​p>
        <p class="dashboard-metadata">Generated: [Date] | [Data Point Count] records analyzed</​p>
    </​div>
</​header>

Required CSS for Header (Using n8n Tokens):

.modern-header {
    text-align: center;
    margin-bottom: var(--vspace-xxl);
    padding: var(--vspace-xxl) var(--hspace-xl);
    background: var(--color-ink-black);
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-ink-black-3);
    box-shadow: var(--shadow-card);
}

.header-background {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-narwhale-grey) 0%, transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.header-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dashboard-title {
    font-size: 54px;
    font-weight: 500;
    color: var(--color-white-4);
    letter-spacing: -2px;
    margin: 0 0 var(--vspace-md) 0;
    line-height: 54px;
}

.dashboard-subtitle {
    font-size: 20px;
    color: var(--color-white-5);
    margin: 0 0 var(--vspace-sm) 0;
    font-weight: 400;
    line-height: 30px;
}

.dashboard-metadata {
    font-size: 14px;
    color: var(--color-dr--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 400;
}

/​* Responsive header */
@media (max-width: 768px) {
    .modern-header { padding: var(--vspace-xl) var(--hspace-lg); }
    .dashboard-title { font-size: 36px; line-height: 36px; }
    .dashboard-subtitle { font-size: 16px; }
}

Footer (Modern Design)

<!-- ========== MODERN FOOTER ========== -->
<footer class="modern-footer">
    <div class="footer-content">
        <p class="footer-credits">Produced By Danny McMillan | A Seller Sessions Production | &copy; 2025</​p>
    </​div>
</​footer>

Required CSS for Footer (Using n8n Tokens):

.modern-footer {
    text-align: center;
    padding: var(--vspace-xl) var(--hspace-lg);
    margin-top: var(--vspace-xxl);
    border-top: 1px solid var(--color-ink-black-3);
    background: var(--color-ink-black-2);
}

.footer-content {
    max-width: 900px;
    margin: 0 auto;
}

.footer-credits {
    font-size: 14px;
    color: var(--color-dr--white);
    margin: 0;
    letter-spacing: 0.04em;
    font-weight: 400;
    line-height: 21px;
}

Panel Design (Glassmorphic Cards - n8n Style)

.panel {
    background: var(--color-ink-black);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-ink-black-3);
    border-radius: var(--border-radius-lg);
    padding: var(--hspace-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-new-love), transparent);
    opacity: 0.3;
}

.panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-new-love);
}

Button Styles (Professional)

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
}

.btn-outline {
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
    border-radius: 8px;
    padding: 10px 28px;
}

Tab Navigation (Modern n8n Style)

<div class="tab-nav">
    <button class="tab active">OVERVIEW</​button>
    <button class="tab">EXPLORER</​button>
    <button class="tab">FUNNEL</​button>
    <button class="tab">INSIGHTS</​button>
</​div>

Tab Styling (Using n8n Tokens):

.tab-nav {
    display: flex;
    gap: var(--hspace-sm);
    margin-bottom: var(--vspace-xl);
    padding: var(--hspace-sm);
    background: var(--color-ink-black-2);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-ink-black-3);
}

.tab {
    background: transparent;
    color: var(--color-dr--white);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--vspace-md) var(--hspace-lg);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: box-shadow 0.5s ease, border-color 0.5s ease, background 0.3s ease;
    position: relative;
    line-height: 21px;
}

.tab.active {
    color: var(--color-white-4);
    background: var(--color-ink-black);
    border: 1px solid var(--color-new-love);
    box-shadow: var(--shadow-glow);
}

.tab:hover:not(.active) {
    color: var(--color-white-5);
    background: var(--color-white-2);
}

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:

1. OVERVIEW - 6 key metrics + top performers table
2. EXPLORER - Searchable/​filterable table with all campaigns/​keywords
3. FUNNEL - Impressions → Clicks → Cart Adds → Purchases (with CVR)
4. INSIGHTS - Key findings, opportunities, recommendations

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:

1. OVERVIEW - Revenue, units, AOV, profit metrics
2. EXPLORER - Product performance table with filters
3. FUNNEL - Sessions → Views → Cart → Purchase (if session data)
4. INSIGHTS - 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:

1. OVERVIEW - Sessions, users, CVR, bounce rate
2. EXPLORER - Source/​medium breakdown with filters
3. FUNNEL - Landing → Engagement → Conversion
4. INSIGHTS - High bounce sources, conversion opportunities

4. Financial / Business Data

Detect columns like:

• Date, Account, Category, Transaction Type
• Amount, Debit, Credit, Balance
• Vendor, Customer, Invoice

Auto-generate tabs:

1. OVERVIEW - Total income, expenses, profit, cash flow
2. EXPLORER - Transaction table with filters
3. NO FUNNEL - Not applicable
4. INSIGHTS - Top expenses, late invoices, cash flow issues

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 insight types exist (opportunities, trends, recommendations)

Single Page When:

• Dataset <50 rows (all fits on overview)
• Simple report with few metrics
• No funnel or exploration needed

Overview Tab (Always Required)

Structure:

1. Performance Summary Section (4-6 large metric cards)
2. Top Performers Table (top 10 by primary metric)
3. Key Insights Section (3-5 bullet points)

Metric Cards (Modern n8n Style - 3 Columns):

<div class="metrics-grid">
    <div class="metric-card">
        <div class="metric-content">
            <p class="metric-label">IMPRESSIONS</​p>
            <p class="metric-value">50.9K</​p>
            <p class="metric-detail">Brand share: 1.8%</​p>
        </​div>
        <div class="metric-footer">
            <span class="percentage positive">+12.5%</​span>
            <span class="period">vs last period</​span>
        </​div>
    </​div>
    <!-- Repeat for other metrics -->
</​div>

Metric Card Styling (3 Equal Columns - Using n8n Tokens):

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /​* EXACTLY 3 columns, equal width */
    gap: var(--hspace-lg);
    margin-bottom: var(--vspace-xxl);
}

@media (max-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);  /​* 2 columns on tablets */
    }
}

@media (max-width: 640px) {
    .metrics-grid {
        grid-template-columns: 1fr;  /​* 1 column on mobile */
    }
}

.metric-card {
    background: var(--color-ink-black);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-ink-black-3);
    border-radius: var(--border-radius-lg);
    padding: var(--hspace-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-new-love), transparent);
    opacity: 0.4;
}

.metric-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-new-love);
}

.metric-content {
    margin-bottom: var(--vspace-lg);
}

.metric-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-dr--white);
    font-weight: 400;
    margin-bottom: var(--vspace-sm);
    line-height: 21px;
}

.metric-value {
    font-size: 48px;
    font-weight: 500;
    color: var(--color-new-love);
    margin: var(--vspace-sm) 0;
    line-height: 48px;
}

.metric-detail {
    font-size: 14px;
    color: var(--color-dr--white);
    margin-top: var(--vspace-sm);
    line-height: 21px;
}

.metric-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--vspace-lg);
    border-top: 1px solid var(--color-ink-black-3);
}

.percentage {
    font-size: 14px;
    font-weight: 400;
    padding: var(--vspace-1) var(--hspace-sm);
    border-radius: var(--border-radius-sm);
    line-height: 21px;
}

.percentage.positive {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.percentage.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.period {
    font-size: 14px;
    color: var(--color-white-3);
    font-weight: 400;
    line-height: 21px;
}

Explorer Tab (When >100 Rows)

Structure:

1. Search Bar (filter across all text columns)
2. Performance Legend (color-coded badges)
3. Sortable Table (click headers to sort)
4. Pagination (10/​20/​50 per page)

Search Implementation:

<div class="explorer-controls">
    <input type="text" id="search-input" placeholder="Search..." 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">Showing <strong id="count">0</​strong> results</​span>
</​div>

Professional Table Design:

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.data-table thead {
    background: linear-gradient(135deg, #f8f9fa, #e5e7eb);
}

.data-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 700;
    border-bottom: 2px solid #2563eb;
}

.data-table td {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.data-table tr:hover {
    background: #f8f9fa;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: #2563eb;
}

Performance Badges (Professional):

.badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.excellent {
    background: #d1fae5;
    color: #065f46;
}

.badge.good {
    background: #fef3c7;
    color: #92400e;
}

.badge.needs-work {
    background: #fee2e2;
    color: #991b1b;
}

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

Professional Funnel Visualization:

<div class="funnel-container">
    <h2 class="funnel-title">Conversion Funnel Analysis</​h2>
    <p class="funnel-subtitle">Track customer journey and identify conversion bottlenecks</​p>

    <div class="funnel-visual">
        <!-- Stage 1 -->
        <div class="funnel-stage" style="width: 100%;">
            <div class="stage-header">
                <span class="stage-icon">👁️</​span>
                <span class="stage-name">Impressions</​span>
            </​div>
            <div class="stage-metric">50,900</​div>
            <div class="stage-detail">Starting point</​div>
        </​div>

        <!-- Drop-off -->
        <div class="funnel-drop">
            <span class="drop-rate">-94.9%</​span>
            <div class="drop-arrow">↓</​div>
        </​div>

        <!-- Stage 2 -->
        <div class="funnel-stage" style="width: 85%;">
            <div class="stage-header">
                <span class="stage-icon">🖱️</​span>
                <span class="stage-name">Clicks</​span>
            </​div>
            <div class="stage-metric">2,600</​div>
            <div class="stage-detail">
                <span class="cvr">5.1% CVR</​span>
            </​div>
        </​div>
        <!-- Continue for all stages -->
    </​div>

    <div class="funnel-summary">
        <div class="summary-card">
            <p class="summary-value">0.62%</​p>
            <p class="summary-label">Overall Conversion</​p>
        </​div>
        <div class="summary-card">
            <p class="summary-value alert">94.9%</​p>
            <p class="summary-label">Largest Drop-off</​p>
        </​div>
        <div class="summary-card">
            <p class="summary-value">Impressions → Clicks</​p>
            <p class="summary-label">Critical Stage</​p>
        </​div>
    </​div>
</​div>

Professional Funnel Styling:

.funnel-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 40px 0;
}

.funnel-stage {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 2px solid #2563eb;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.funnel-stage:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.stage-metric {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    margin: 12px 0;
}

.funnel-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.drop-rate {
    background: #fee2e2;
    color: #991b1b;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.cvr {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

Insights Tab (Always Include)

Structure:

1. Key Findings (3-5 bullet points with context)
2. Opportunities (sorted by impact)
3. Recommendations (actionable next steps)

Professional Insight Cards:

<div class="insights-section">
    <h2 class="section-title">📊 Key Findings</​h2>
    <div class="insights-grid">
        <div class="insight-card success">
            <div class="insight-icon">✓</​div>
            <div class="insight-content">
                <h3>Top Performing Segment</​h3>
                <p class="insight-text">Product Pages deliver 5.84x ROAS vs 2.1x average</​p>
                <p class="insight-recommendation">Recommendation: Increase budget allocation by 30%</​p>
            </​div>
        </​div>
        <!-- More insights -->
    </​div>
</​div>

Insight Card Styling:

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.insight-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
}

.insight-card.success {
    border-left-color: #10b981;
}

.insight-card.warning {
    border-left-color: #f59e0b;
}

.insight-card.alert {
    border-left-color: #ef4444;
}

.insight-icon {
    font-size: 32px;
    margin-bottom: 16px;
}

.insight-text {
    font-size: 16px;
    color: #1f2937;
    margin-bottom: 12px;
    font-weight: 500;
}

.insight-recommendation {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
}

Opportunity Cards (Professional):

<div class="opportunities-section">
    <h2 class="section-title">💡 Opportunities</​h2>
    <div class="opportunities-grid">
        <div class="opportunity-card high-impact">
            <div class="card-header">
                <span class="impact-badge high">HIGH IMPACT</​span>
            </​div>
            <h3 class="opportunity-title">Hidden Growth Potential</​h3>
            <p class="opportunity-description">Low market share but high conversion rate</​p>
            <div class="opportunity-metrics">
                <div class="metric-row">
                    <span>Impressions:</​span>
                    <strong>15,420</​strong>
                </​div>
                <div class="metric-row">
                    <span>CVR:</​span>
                    <strong class="positive">0.56%</​strong>
                </​div>
            </​div>
            <button class="btn-outline">View Details</​button>
        </​div>
        <!-- More opportunities -->
    </​div>
</​div>

Opportunity Styling:

.opportunity-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.impact-badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.impact-badge.high {
    background: #fee2e2;
    color: #991b1b;
}

.impact-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.impact-badge.low {
    background: #dbeafe;
    color: #1e40af;
}

Search & Filter Implementation

const searchInput = document.getElementById('search-input');
const tableBody = document.getElementById('table-body');
const resultsCount = document.getElementById('count');

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';
        }
    });

    resultsCount.textContent = visibleCount;
});

Sortable Table Implementation

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;

            // Numeric sorting
            if (!isNaN(aVal) && !isNaN(bVal)) {
                return isAscending ? aVal - bVal : bVal - aVal;
            }
            // Text sorting
            return isAscending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
        });

        tableBody.innerHTML = '';
        rows.forEach(row => tableBody.appendChild(row));

        document.querySelectorAll('.sortable').forEach(h => h.classList.remove('asc', 'desc'));
        header.classList.add(isAscending ? 'desc' : 'asc');
    });
});

File Naming Convention

[dashboard-name]-[client-name]-[date].html

Examples:
- performance-analysis-acme-corp-2025-10-19.html
- sales-dashboard-client-a-2025-10-19.html
- ppc-report-q4-2025-10-19.html

Quality Gates

Before delivering ANY client dashboard, verify:

MANDATORY Requirements:

• Modern gradient header with pulsing glow animation
• Footer with exact text: "Produced By Danny McMillan | A Seller Sessions Production | © 2025"
• Responsive layout (mobile-friendly)
• All tabs functional (if multi-tab)
• Search and sort working in Explorer
• Color-coded performance indicators
• Modern n8n-inspired design (dark gradient background, purple/​blue accents)
• 3 equal-width metric cards per row (grid-template-columns: repeat(3, 1fr))
• NO emoticons anywhere in the dashboard
• Glassmorphic cards with backdrop-filter blur

⚠️ OUTPUT FORMAT:

• Must be standalone HTML file
• Complete <!DOCTYPE html> with <head> and <body>
• All CSS in <style> tag
• All JavaScript in <script> tag
• Opens directly in browser without build tools

Standard Quality:

• Tab navigation (if >100 rows or funnel exists)
• Metric cards with icons
• Funnel visualization (if applicable)
• Insights with recommendations
• Search/​filter functional
• Sortable table headers
• Professional badges (green/​amber/​red)
• Clean design throughout

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>Performance Dashboard</​title>
    <link href="https://fonts.googleapis.com/​css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /​* Modern n8n-inspired design system CSS */
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%);
            color: #ffffff;
            padding: 40px;
            margin: 0;
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        /​* ... rest of modern CSS ... */
    </​style>
</​head>
<body>
    <div class="container">
        <!-- Modern Gradient Header -->
        <header class="modern-header">
            <div class="header-background"></​div>
            <div class="header-content">
                <h1 class="dashboard-title">Performance Analysis</​h1>
                <p class="dashboard-subtitle">30-Day Report | Aug 11 - Sep 9, 2025</​p>
                <p class="dashboard-metadata">Generated: Oct 19, 2025 | 1,344 records analyzed</​p>
            </​div>
        </​header>

        <!-- Modern Tab Navigation -->
        <div class="tab-nav">
            <button class="tab active">OVERVIEW</​button>
            <button class="tab">EXPLORER</​button>
            <button class="tab">FUNNEL</​button>
            <button class="tab">INSIGHTS</​button>
        </​div>

        <!-- Tab Content -->
        <div id="overview-tab" class="tab-content active">
            <!-- 3-column metric grid -->
            <div class="metrics-grid">
                <!-- Cards here -->
            </​div>
        </​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="insights-tab" class="tab-content hidden">
            <!-- Insights content -->
        </​div>

        <!-- Modern Footer -->
        <footer class="modern-footer">
            <div class="footer-content">
                <p class="footer-credits">Produced By Danny McMillan | A Seller Sessions Production | &copy; 2025</​p>
            </​div>
        </​footer>
    </​div>

    <script>
        /​* JavaScript for tabs, search, sort */
    </​script>
</​body>
</​html>

Success Criteria

This skill works correctly when:

• User uploads file → Complete tabbed dashboard generated automatically
• Modern n8n-inspired design with dark gradient background
• Purple/​blue gradient accents throughout
• 3 equal-width metric cards per row (no emoticons)
• Glassmorphic cards with backdrop-filter blur effects
• Footer displays: "Produced By Danny McMillan | A Seller Sessions Production | © 2025"
• Funnel visualization with drop-off analysis
• Insights categorized by impact
• Search and sort fully functional
• Mobile-responsive layout (3 cols → 2 cols → 1 col)
• Zero questions asked before generation
• Smooth animations and hover effects
• Professional and cutting-edge appearance

Integration with Other Skills

Works with:

• mcp-response-optimization: Ensures efficient data processing without token bloat
• curv-design-system: Alternative for internal Danny McMillan branded dashboards
• dashboard-auto-generation: CURV-branded version for internal use

When to use this skill vs dashboard-auto-generation:

• Use dashboard-auto-generation-client: For external clients, professional presentations, shareable reports
• Use dashboard-auto-generation: For internal CURV Tools, Seller Sessions content, Danny McMillan branded work