Home/Advanced Claude Code Patterns/Episode 4

AdvancedEpisode 4 of 415 min

Build Dashboards Using Claude Code

Generate HTML reports and visual summaries from your data using AI.

Building Simple Dashboards

Markdown reports are great, but sometimes you want something you can share more broadly — a visual summary that looks good in a browser. Let's build simple HTML dashboards.

What we're building

A dashboard is just an HTML file with your data presented visually. Claude Code can generate HTML, so you can turn any data into a shareable visual report.

The output: an HTML file you can open in any browser, share via email, or put on an internal server.

Your first HTML report

Let's turn a sales summary into a visual dashboard:

Read sales_data.csv.

Generate an HTML report that includes:
- A header with the report title and date
- A summary card showing: Total Revenue, Deal Count, Avg Deal Size
- A table of top 10 deals (sorted by amount)
- A section showing revenue by sales rep (as a simple bar representation)

Style it cleanly — modern, readable, professional.
Use only inline CSS (no external files needed).
Save as sales_dashboard.html

Open the HTML file in your browser. You've got a visual report.

Adding structure: the dashboard pattern

Good dashboards follow a pattern: summary cards at top, details below.

Here's a more detailed instruction:

Read q1_data.csv and generate an executive dashboard.

## Layout

### Header
- Title: "Q1 2026 Sales Dashboard"
- Subtitle: "Generated [today's date]"

### Summary Cards (row of 4)
1. Total Revenue (with $ formatting)
2. Total Deals Closed
3. Average Deal Size  
4. Win Rate (closed-won ÷ total closed)

### Charts Section
- Revenue by Month (Jan, Feb, Mar) — simple bar chart using CSS
- Revenue by Region — horizontal bars

### Details Table
- All closed deals: columns for Deal Name, Rep, Amount, Close Date
- Sortable by amount (highest first)

## Style
- Clean white background
- Card shadows for the summary boxes
- Professional blue accent color (#2563eb)
- Readable fonts (system fonts are fine)
- Responsive — should look okay on mobile

Save as q1_dashboard.html

CSS bar charts (no JavaScript needed)

Claude can create simple visualizations using pure CSS:

For the revenue by month chart:
- Create horizontal bars using CSS (div with background color and width as percentage)
- Label each bar with the month name and dollar amount
- Scale bars so the largest month is 100% width, others proportional

Example of what Claude generates:

html

<div class="bar-chart">
  <div class="bar-row">
    <span class="label">January</span>
    <div class="bar" style="width: 65%;">$65,000</div>
  </div>
  <div class="bar-row">
    <span class="label">February</span>
    <div class="bar" style="width: 80%;">$80,000</div>
  </div>
  <div class="bar-row">
    <span class="label">March</span>
    <div class="bar" style="width: 100%;">$100,000</div>
  </div>
</div>

No JavaScript, no chart libraries, just CSS and HTML.

Multi-page dashboards

For complex reports, generate multiple linked HTML files:

Create a dashboard with three pages:

1. index.html — Overview (summary cards, key metrics)
2. deals.html — Deal details (full table of all deals)
3. reps.html — Rep performance (each rep's stats)

Add a navigation menu at the top of each page linking to all three.
Use consistent styling across all pages.

Adding interactivity (simple)

For basic interactivity without complex JavaScript:

Add these interactive elements:

1. Collapsible sections — click header to show/hide content
   (use HTML details/summary elements)

2. Hover effects on table rows — highlight on mouseover

3. A "print" button that triggers the browser's print dialog
   (simple onclick="window.print()")

This uses built-in HTML features rather than custom JavaScript.

Automated dashboard generation

Combine dashboards with scheduling:

bash

# weekly-dashboard.sh
#!/bin/bash
cd ~/weekly-dashboard

# Generate the dashboard
claude "Read all CSVs in /data. Generate weekly_dashboard.html following the CLAUDE.md template."

# Copy to web server (if you have one)
cp weekly_dashboard.html /var/www/dashboards/

# Or copy to shared drive
cp weekly_dashboard.html ~/Dropbox/team-dashboards/

Schedule this weekly, and your team always has a fresh dashboard.

Email-friendly dashboards

HTML emails are tricky. For dashboards that need to be emailed:

Generate an email-safe HTML report:
- Use table-based layout (more compatible with email clients)
- Inline all CSS (no <style> blocks)
- No JavaScript
- Keep images as inline SVG or skip them
- Width: 600px max (standard email width)
- Simple color scheme (dark text on white)

This creates HTML that looks decent in most email clients.

Embedding data for offline use

If someone might view the dashboard without internet:

Create a self-contained dashboard:
- Embed all data directly in the HTML (don't load from external files)
- Use only system fonts (no Google Fonts)
- All CSS inline
- No external resources

The HTML file should work completely offline.

Dashboard templates in CLAUDE.md

If you generate the same type of dashboard regularly, put the template in your CLAUDE.md:

markdown

# Dashboard Generation

When generating dashboards, follow this structure:

## HTML Structure
- DOCTYPE html5
- Viewport meta tag for responsiveness
- Title: [Report Name] - [Date]

## Layout
- Max width: 1200px, centered
- Header with title and date
- Summary cards row (4 cards max)
- Main content area
- Footer with generation timestamp

## Style
- Background: #f8fafc
- Cards: white with subtle shadow
- Accent: #2563eb
- Font: system-ui, -apple-system, sans-serif
- Table rows: alternate gray backgrounds

Now "generate a dashboard from this data" produces consistent results every time.

Real example: weekly metrics dashboard

Here's a complete dashboard workflow:

CLAUDE.md:

markdown

# Weekly Metrics Dashboard

Read these data sources:
- /data/sales.csv
- /data/traffic.csv
- /data/support.csv

Generate weekly_dashboard.html with:

## Summary Cards
- Total Revenue (from sales)
- Website Visits (from traffic)
- Support Tickets (from support)
- Avg Response Time (from support)

## Trends
- Revenue by day (bar chart)
- Traffic by day (bar chart)

## Tables
- Top 5 deals this week
- Top 5 pages by traffic
- Unresolved support tickets

Include week-over-week changes where previous data available.

The command:

bash

cd ~/weekly-metrics
claude "Generate this week's dashboard"
open output/weekly_dashboard.html

Three data sources, one visual dashboard, updated weekly.

Recap

Dashboards are just HTML files. Claude Code generates them from your data using your styling preferences. No chart libraries needed — CSS can handle simple visualizations. Combine with scheduling for automated, always-fresh dashboards your team can use.

The approach scales: start with simple reports, add complexity as needed, build templates for consistency.

Handle Errors in Claude Code Workflows Browse Automations