Visual Output
Many agents operate in the terminal, but that does not mean your skills are limited to plain text output. Skills can generate HTML files and open them in the user's browser, producing rich visual reports, interactive dashboards, data visualizations, and formatted documentation. This pattern turns the agent into a report generator, chart builder, or visual analysis tool.
The HTML Generation Pattern
The core pattern is straightforward: a skill instructs the agent to generate an HTML file, write it to disk, and open it in the default browser. The HTML file is self-contained â all styles, scripts, and data are inlined or loaded from CDNs. No build step, no server, no dependencies.
---
description: Generate a visual dependency graph for the project
allowed-tools:
- Bash(npx depcheck)
- Bash(open)
- Glob
- Grep
- Read
- Write
---
# Dependency Visualizer
Analyze the project's dependency structure and generate an interactive
HTML visualization.
## Steps
1. Run `npx depcheck` to find unused and missing dependencies
2. Read `package.json` to get the full dependency list
3. Use Grep to find all import statements across the codebase
4. Build a dependency graph mapping which files import which packages
5. Generate a self-contained HTML file at `./dependency-report.html`
## HTML Requirements
- Use the D3.js library from CDN for the force-directed graph
- Include a search box to filter dependencies
- Color-code: green for used, red for unused, yellow for devDependencies
- Show import count as node size
- Include a summary table below the graph
- Make it responsive and visually polished
6. Open the file with `open ./dependency-report.html`Writing Self-Contained HTML
The key to the visual output pattern is that the generated HTML must be completely self-contained. It cannot rely on a local development server, bundler, or any project-specific setup. When opened with open file.html on macOS (or xdg-open on Linux), it should render immediately.
This means all dependencies come from CDNs, all data is inlined as JavaScript variables, and all styling is embedded. Here is the skeleton the agent typically generates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dependency Report â MyProject</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0a0a0a;
color: #e0e0e0;
padding: 2rem;
}
.chart-container { max-width: 800px; margin: 2rem auto; }
table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #333; }
th { color: #888; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }
.status-used { color: #4ade80; }
.status-unused { color: #f87171; }
</style>
</head>
<body>
<h1>Dependency Report</h1>
<p>Generated on <span id="date"></span></p>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
<table id="dep-table">
<thead>
<tr><th>Package</th><th>Version</th><th>Imports</th><th>Status</th></tr>
</thead>
<tbody></tbody>
</table>
<script>
// Data is inlined directly from the analysis
const data = {
dependencies: [
{ name: "react", version: "18.2.0", imports: 47, status: "used" },
{ name: "lodash", version: "4.17.21", imports: 0, status: "unused" },
// ... more entries generated from analysis
]
};
document.getElementById("date").textContent = new Date().toLocaleDateString();
// ... rendering logic
</script>
</body>
</html>Instruct your skill to use popular CDN-hosted libraries for visualization. Some of the most useful: Chart.js for standard charts, D3.js for custom visualizations, Mermaid.js for diagrams and flowcharts, Tailwind CSS via CDN for rapid styling, and highlight.js for code syntax highlighting. These libraries load quickly from CDN and require no installation.
Data Reports and Dashboards
One of the most practical applications is generating data reports. A skill can analyze code metrics, test results, performance data, or any structured information, then render it as a polished dashboard.
---
description: Generate a code quality dashboard for the project
allowed-tools:
- Bash(npx eslint . --format json)
- Bash(npx jest --json --coverage)
- Bash(find src -name '*.ts' | xargs wc -l)
- Bash(open)
- Read
- Write
---
# Code Quality Dashboard
Generate a comprehensive code quality dashboard as an HTML file.
## Data Collection
1. Run ESLint with JSON output to get linting issues
2. Run Jest with JSON output to get test results and coverage
3. Count lines of code per directory
4. Read `package.json` for project metadata
## Dashboard Sections
Create `./quality-dashboard.html` with these sections:
### Overview Cards
- Total files, total lines of code, test coverage %
- Lint errors count, lint warnings count
- Test pass rate
### Charts (use Chart.js)
- Donut chart: test pass/fail/skip breakdown
- Bar chart: lines of code per top-level directory
- Line chart: complexity distribution (files by line count buckets)
### Issue Table
- Sortable table of all lint issues
- Columns: file, line, rule, severity, message
- Click-to-sort headers
### Coverage Heatmap
- Grid showing coverage % per file
- Green (>80%), yellow (50-80%), red (<50%)
Use a dark theme. Make it print-friendly with @media print styles.
Open the file when done.The Output Flow
Here is what happens when a user invokes a visual output skill:
The user sees the analysis progress in the terminal, and the final visual report opens automatically in their browser. The terminal output provides a quick summary, while the HTML report provides the detailed, interactive visualization.
Adding Interactivity
Since the output is a full HTML page running in a browser, you can include interactive elements: search filters, sortable tables, tooltips, collapsible sections, and even forms that filter the displayed data. All of this is powered by inline JavaScript.
---
description: Generate an interactive API documentation page
allowed-tools:
- Glob
- Read
- Write
- Bash(open)
---
# API Documentation Generator
Scan all route handlers in src/app/api/ and generate interactive
API documentation as a self-contained HTML page.
For each endpoint, extract:
- HTTP method and path
- Request body type (from TypeScript types)
- Response type
- Authentication requirements (from middleware)
- Example request/response (from test files if available)
## Interactive Features
- Sidebar navigation grouped by resource (users, posts, etc.)
- Click to expand/collapse endpoint details
- "Try it" section with pre-filled curl commands (copy to clipboard)
- Search box that filters endpoints by path or description
- Toggle between light and dark theme
Write to `./api-docs.html` and open it.Generated HTML files are written to the project directory by default. Consider writing them to a dedicated output directory like .claude/reports/ and adding that path to .gitignore. This keeps generated artifacts out of version control while making them easy to find. You can include this cleanup guidance directly in your skill instructions.
Beyond Simple HTML
The visual output pattern extends beyond static reports. Some advanced applications include:
- Diff visualizers. Generate side-by-side HTML diffs of before/after refactoring with syntax highlighting.
- Architecture diagrams. Use Mermaid.js to render system architecture, data flow, or state machine diagrams from codebase analysis.
- Performance reports. Visualize benchmark results, bundle size analysis, or load test data with interactive charts.
- Migration trackers. Generate progress dashboards showing which files have been migrated from an old pattern to a new one, with clickable links to each file.
What's Next
Now that you can generate rich visual output from skills, the next lesson covers the most meta topic of all: meta-skills â skills that create other skills, bootstrapping your skill development workflow itself.