skills.rest
screenpipe
screenpipeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

render-html-report

Generate self-contained HTML reports that render as live pages in the screenpipe viewer.

21.3k|2.2k|Updated Jun 19, 2024
Search Tags:#Dashboard#html report#screenpipe#activity report#self-contained html#SVG charts#Data Visualization
One-click install
npx skills add https://github.com/screenpipe/screenpipe --skill render-html-report
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: render-html-report
Source: https://github.com/screenpipe/screenpipe/tree/main/crates/screenpipe-core/assets/skills/render-html-report
Command: npx skills add https://github.com/screenpipe/screenpipe --skill render-html-report

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plain text notes and raw data are hard to scan when you need a visual summary of your activity. This Skill produces charts, dashboards, and styled reports that render as live pages inside the screenpipe viewer instead of showing as raw HTML source.

Core Features & Use Cases

  • Viewer Rendering Opt-In: Marks HTML files with the screenpipe:render=human marker so the viewer renders them as pages rather than source code.
  • Sandbox-Safe Output: Enforces fully self-contained files with inline CSS/JS and data-URI images, since the viewer sandbox blocks all network access including CDN chart libraries.
  • Inline SVG Charts: Provides a copy-and-fill template using inline SVG bars and styled cards instead of external chart libraries.
  • Use Case: After analyzing a day of screenpipe activity, generate a daily focus report showing tracked hours, top apps, and meeting counts as a rendered dashboard linked from your note.

Quick Start

Create a visual daily focus report of my screenpipe activity as a rendered HTML page and link it from a note.

Frequently Asked Questions about render-html-report

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render an HTML report in the screenpipe viewer?▼

Add the marker <!-- screenpipe:render=human --> as the first line of the HTML file, or a meta tag with name screenpipe:render in the head. Then link the file from a note using an absolute path, and the viewer offers a preview rendered option.

Why does my HTML report show as raw source code in screenpipe?▼

The file is missing the opt-in render marker. Without <!-- screenpipe:render=human --> on the first line or the corresponding meta tag, the viewer displays the HTML as source text instead of a rendered page.

Can I use Chart.js or other CDN libraries in screenpipe HTML reports?▼

No. The viewer renders files in a locked-down sandbox with zero network access, so CDN-loaded scripts render blank. Draw charts with inline SVG or plain HTML and CSS bars instead, with all CSS and JS inlined.

Why are images or styles missing from my rendered report?▼

External resources are blocked by the sandbox. Embed images as data: URIs and place all CSS in a style tag and all JS in a script tag; external link, script src, fetch calls, and POST forms are silently blocked.

Does the screenpipe viewer support dark mode in HTML reports?▼

Yes, the viewer matches the host light or dark theme. Style your report with a @media (prefers-color-scheme: dark) query if you want the report to adapt to dark mode.

Related Skills

Explore More Data & Analytics Skills→
malue-aimalue-ai
36

screenpipe

Search screen activity, audio transcripts, and app usage history via Screenpipe's MCP server.

Official
Intermediate
mkalkeremkalkere
4

publish-artifact

Publish artifacts to shared memory with frontmatter and bus notifications.

Community
Intermediate
InnerScopeHearingInnerScopeHearing

daily-digest

Generates a structured daily Markdown file of company activities, decisions, and learnings.

Official
Advanced
cy-walicy-wali

instrument-data-to-allotrope

Convert raw instrument exports into Allotrope Simple Model JSON and CSV.

Community
Advanced