tufte-report
Tufte-inspired HTML data reports with Chart.js, sparklines, and editorial prose.
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files. Uses EB Garamond for text, Monaspace Argon for numbers, Chart.js for interactive charts, and inline SVG sparklines. Produces publication-quality reports with 2-column narrative+data layouts, status dashboards, scroll animations, and responsive mobile support. Use this skill whenever the user wants to create a data report, activity dashboard, infographic, personal analytics page, health tracker visualization, or any document that combines narrative text with interactive charts and tables. Also triggers for "make a report like Tufte", "create an infographic", "build a dashboard", "visualize my data", or requests for beautiful data-driven documents.
What it does
Creates publication-quality data reports and infographic dashboards as standalone HTML files, inspired by Edward Tufte’s principles of data visualization. Combines editorial prose with interactive charts in a clean, typographically rich layout.
Design system
- Typography — EB Garamond for narrative text, Monaspace Argon for numbers and data
- Charts — Chart.js for interactive charts, inline SVG sparklines for compact trends
- Layout — 2-column narrative+data layouts with scroll animations
- Responsive — works on desktop and mobile
Report types
- Data reports — narrative + charts combining story with evidence
- Status dashboards — key metrics with trend indicators
- Infographics — visual data summaries with publication-quality design
- Personal analytics — health, activity, productivity visualizations
Key features
- Standalone — single HTML file, no server or build step needed
- Interactive — hoverable charts, scroll-triggered animations
- Publication quality — high information density without clutter
When to use
When you need a beautiful, data-driven document — activity reports, health dashboards, quarterly reviews, or any context where narrative text meets interactive charts.