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 data via the local screenpipe REST API at localhost:3030 — screen recordings, audio, UI elements, usage analytics, and the user's persistent memory store. Use when the user asks about their screen activity, meetings, apps, productivity, media export, retranscription, connected services, OR when they ask to save / remember / store / note information so it can be retrieved later (POST /memories — survives across sessions and is queryable by Claude/external agents via the same API).
Manage screenpipe pipes (scheduled AI automations) and connections (Telegram, Slack, Discord, etc.) via the CLI. Use when the user asks to create, list, enable, disable, run, or debug pipes, or manage service connections from the command line.
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.
Query the org's screenpipe telemetry as an enterprise admin — devices, members, recent activity, and substring search across the team's screen recordings and audio transcripts. Use when the user asks about their team, a teammate's activity, what their organization worked on, app usage across the org, or anything that requires seeing data beyond the user's own machine. The skill is only installed for enterprise admins; ordinary users won't see it.