render-html-report
The render-html-report skill generates self-contained HTML dashboards, charts, and styled reports that display as live pages within the screenpipe viewer rather than as plain text. Use this when a task requires visual or graphical output such as a dashboard or chart, but only after including the screenpipe:render marker and ensuring all assets are inlined without external network requests.
git clone --depth 1 https://github.com/screenpipe/screenpipe /tmp/render-html-report && cp -r /tmp/render-html-report/crates/screenpipe-core/assets/skills/render-html-report ~/.claude/skills/render-html-reportSKILL.md
# render an html report
screenpipe's in-app viewer can render a standalone `.html` file as a live page (charts, dashboards, styled reports) — but only when you **opt in** and keep the file **self-contained**. Otherwise it shows as raw source.
## the two rules
1. **Opt in.** The first line of the file must be the marker:
```
<!-- screenpipe:render=human -->
```
(or `<meta name="screenpipe:render" content="human">` inside `<head>`). Without it the file shows as source, not a rendered page.
2. **Self-contained — no network.** It renders in a locked-down sandbox with **zero network access**. So:
- inline **all** CSS in a `<style>` tag and **all** JS in a `<script>` tag;
- embed any images as `data:` URIs;
- **no** external `<script src>` / `<link rel=stylesheet>` / CDN, **no** `fetch`, **no** forms that POST.
Anything that touches the network is silently blocked — **a CDN-loaded chart library renders blank**. Draw charts with **inline SVG** or plain HTML/CSS bars instead (see the template).
## how the user sees it
Write the file (e.g. `./output/report.html`), then link it with an **absolute** path from your note or notification — e.g. `[open report](/Users/me/.../output/report.html)`. The user clicks it; the viewer offers **"preview rendered"**; it renders inside the sandbox. Only standalone `.html` / `.htm` files render — HTML pasted inside a markdown note does not.
The viewer matches the host light/dark theme; if you care about dark mode, style with `@media (prefers-color-scheme: dark)`.
## template (copy, then fill in with real data)
```html
<!-- screenpipe:render=human -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; padding: 24px; font-family: system-ui, -apple-system, sans-serif; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: #666; font-size: 13px; margin: 0 0 20px; }
.cards { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.card { flex: 1; min-width: 120px; background: #f4f4f5; border-radius: 10px; padding: 12px 14px; }
.card .label { font-size: 12px; color: #666; }
.card .value { font-size: 24px; font-weight: 600; }
.bar { fill: #3b82f6; }
.axis { fill: #999; font-size: 11px; }
</style>
</head>
<body>
<h1>daily focus report</h1>
<p class="sub">where your time went today</p>
<div class="cards">
<div class="card"><div class="label">tracked</div><div class="value">6.4h</div></div>
<div class="card"><div class="label">top app</div><div class="value">vs code</div></div>
<div class="card"><div class="label">meetings</div><div class="value">3</div></div>
</div>
<!-- inline SVG chart — no chart library (CDNs are blocked in the sandbox) -->
<svg viewBox="0 0 400 180" width="100%" role="img" aria-label="hours per app">
<rect class="bar" x="20" y="40" width="50" height="120"></rect>
<rect class="bar" x="90" y="80" width="50" height="80"></rect>
<rect class="bar" x="160" y="110" width="50" height="50"></rect>
<rect class="bar" x="230" y="130" width="50" height="30"></rect>
<text class="axis" x="45" y="174" text-anchor="middle">code</text>
<text class="axis" x="115" y="174" text-anchor="middle">chrome</text>
<text class="axis" x="185" y="174" text-anchor="middle">slack</text>
<text class="axis" x="255" y="174" text-anchor="middle">mail</text>
</svg>
</body>
</html>
```
## checklist before you save
- [ ] first line is `<!-- screenpipe:render=human -->`
- [ ] all CSS/JS inline; all images are `data:` URIs
- [ ] no CDN / `<script src>` / `fetch` / forms
- [ ] linked from the note or notification with an **absolute** pathRelease the screenpipe monorepo. Bumps versions, triggers GitHub Actions for app, CLI, MCP, and JS packages.
Query the user's local and synced-device data via the screenpipe REST API at localhost:3030 — recordings, audio, UI, meetings, connected services, and memory. Use for screen activity, other-device or cross-device history, productivity, media export, connections, or durable memory.
Set up and operate screenpipe from the terminal, including always-on recording, service modes, capture health, storage, local search, pipes, and connections. Use when the user asks to install, run, inspect, query, automate, or debug screenpipe without relying on the desktop app.
Check Screenpipe health status, process state, and diagnose common issues
Retrieve and analyze Screenpipe CLI backend logs and desktop app logs for debugging
Add or change Tauri commands and TypeScript bindings in the screenpipe desktop app. Use when editing #[tauri::command] handlers, lib/utils/tauri.ts, or Rust types exported to the frontend.
Use the native Screenpipe CLI to query Enterprise team activity or safely preview, deploy, and schedule managed team Pipes. Injected only by the Enterprise app for active admins.
Develop and test Screenpipe Windows-native changes on a disposable Azure VM created from the prepared Screenpipe Windows dev image. Use for Windows compiler, process, service, local API, desktop, capture, installer, or permission behavior. Do not use for React-only work proved by the browser mock.