# Render HTML Report

Produce a human-facing visual report, a chart, dashboard, scorecard, or styled summary...

- Repository: https://github.com/screenpipe/screenpipe (22202 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add screenpipe/screenpipe --skill render-html-report -g -a claude-code -y`
Codex: `npx skills add screenpipe/screenpipe --skill render-html-report -g -a codex -y`
Cursor: `npx skills add screenpipe/screenpipe --skill render-html-report -g -a cursor -y`
Gemini CLI: `npx skills add screenpipe/screenpipe --skill render-html-report -g -a gemini-cli -y`

## Description

Produce a human-facing visual report, a chart, dashboard, scorecard, or styled summary, that renders as a live page in the screenpipe viewer instead of plain text. Use when the task asks for a visual/graphical output rather than a plain note; do NOT use for plain text or raw data (prefer a markdown note for those).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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)

The rest: https://github.com/screenpipe/screenpipe/blob/HEAD/crates/screenpipe-core/assets/skills/render-html-report/SKILL.md