Product Sales Analysis

Product Sales Analysis Skill

Analyze sales data to extract actionable business insights and generate interactive HTML dashboards using pure CSS (no frameworks).

Expected Data Format

CSV with columns like:

• Date — Daily/weekly/monthly date
• Product_Category — Category name
• Units_Sold / Quantity — Volume sold
• Revenue / Sales / Price × Units — Revenue figures
• Profit / Margin (optional) — Profitability
• Marketing_Spend (optional) — Marketing costs
• Customer_Segment / Region (optional) — Dimensions

Analysis Workflow

Step 1: Load & Explore Data

import pandas as pd
df = pd.read_csv('sales_data.csv')
df['Date'] = pd.to_datetime(df['Date'])
df['Year'] = df['Date'].dt.year
df['Month'] = df['Date'].dt.month
df['Quarter'] = df['Date'].dt.quarter

Step 2: Compute Core Metrics

By Category: Total Revenue, Units Sold, Revenue Share (%), Marketing ROI

Time-Based: Monthly/Quarterly trends, YoY growth: ((Y2 - Y1) / Y1) * 100

By Segment: Revenue by customer segment, Average order value

Step 3: Identify Insights

| Pattern | Insight Type | Action | |---------|--------------|--------| | YoY Growth > 20% | 🟢 Success | Invest more, expand | | YoY Growth

Dashboard

/ Include full CSS from template /

/ Charts /

## CSS Classes Reference

### Layout (prevent horizontal scroll)
```css
html, body { overflow-x: hidden; width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; width: 100%; }
.grid { display: grid; gap: 16px; margin-bottom: 32px; width: 100%; }
.grid > * { min-width: 0; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.chart-container { position: relative; height: 280px; width: 100%; max-width: 100%; }
.chart-container canvas { max-width: 100% !important; }

Cards

.card { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #e5e7eb; overflow: hidden; min-width: 0; }
.kpi-value { font-size: 1.75rem; font-weight: 700; margin: 4px 0; }
.kpi-label { font-size: 0.875rem; color: #6b7280; }

Insight Cards

.insight { padding: 16px; border-radius: 8px; display: flex; gap: 12px; }
.insight-success { background: #ecfdf5; border: 1px solid #a7f3d0; }
.insight-warning { background: #fffbeb; border: 1px solid #fde68a; }
.insight-danger { background: #fef2f2; border: 1px solid #fecaca; }

Colors

:root {
  --blue: #3b82f6; --green: #10b981; --amber: #f59e0b;
  --red: #ef4444; --purple: #8b5cf6; --pink: #ec4899;
}

Component Templates

KPI Card

  Total Revenue
  $11.2M
  +8% YoY

Insight Card

  📈
  
    Category X: +54% YoY
    Highest growth with strong momentum.
    → Increase inventory allocation
  

Progress Bar

  
    Segment A$3.9M (35%)
  
  
    
  

Recommendations Footer

  📋 Recommendations
  
    
      Invest More
      ✓ Action: Details
    
    
      Reduce / Reassess
      ✗ Action: Details
    
  

Chart.js Config

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

new Chart(document.getElementById('chartId'), {
  type: 'bar',
  data: { labels: [...], datasets: [{ data: [...], backgroundColor: COLORS }] },
  options: {
    responsive: true,
    indexAxis: 'y',
    plugins: { legend: { display: false } },
    scales: { x: { ticks: { callback: v => '$' + (v/1e6).toFixed(1) + 'M' } } }
  }
});

Output

Save dashboard to: [name]_sales_dashboard.html

Analysis Script

Run scripts/analyze_sales.py for automated metric computation.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: donvito
• Source: donvito/skillsbento
• License: Apache-2.0
• Homepage: https://www.skillsbento.com/

Install and usage instructions live in the source repository linked above.