Html Report

HTML Output

Generate analysis, reports, and reviews as a self-contained single-page HTML file using semantic HTML styled by Pico.css (loaded via CDN). Write the file using the write tool, then open it in the user's browser so they can review the results immediately.

When to Use

Activate this skill whenever the user request involves:

• Codebase analysis or audit
• Architecture review or technical report
• Data analysis summary or visualization
• Benchmark or performance report
• Comparison or evaluation of options
• Any output where a formatted, navigable document adds value

Output File

• Use the write tool to create an .html file in the project root or a sensible location
• Name the file descriptively, e.g. report-codebase-analysis.html, report-auth-review.html
• After writing, open the file in the browser: open report-.html (macOS) or xdg-open report-.html (Linux)

Styling Approach

• No custom CSS — all styling comes from Pico.css loaded via CDN
• Use semantic HTML elements (`, , , , , , `, etc.) to leverage Pico's built-in styles
• Use Pico utility classes where needed (e.g. .grid, .container, .contrast)

HTML Structure

Always produce a single self-contained file. The only external dependency is the Pico.css CDN link. All JS must be embedded inline in `` tags.

Template

  
  
  {{ descriptive title }}
  

  
    
      {{ Title }}
      {{ Date }} · {{ Author / Agent }}
    
  

  
    
    
      
        Summary
        Detailed Findings
        
      
    

    
    
      Summary
      …
    

    
    
      Detailed Findings
      
    
  

Semantic Component Guide

Use the following semantic HTML patterns instead of custom CSS classes:

Cards → ``

Use `` for self-contained content blocks. Pico styles these with padding and a subtle border.

  Card Title
  Card body content goes here.
  Optional footer or metadata

Badges / Tags → `, , `

• `` — highlighted label (yellow background)
• `` — keyboard/code-style tag (subtle box)
• `` — numeric or computed value tag

Status: Active
Priority: High
Score: 42

Callouts → `, , `

• `` — tangential notes and tips (Pico provides distinct styling)
• ` / ` — collapsible callouts, useful for lengthy notes
• `` — quoted or emphasized content with attribution

  Info
  This is an informational callout using semantic aside.

  Click to expand warning details
  Hidden content revealed on click.

  An important quoted statement or key takeaway.
  — Source

Metrics Grid → .grid + ``

Use Pico's .grid utility with `` cards for key numbers at a glance.

  
    Metric Name
    42
    Description
  
  

Bar Charts → ``

Use the native `` element for horizontal bar visualizations. No JS library needed.

Test Coverage

78%

Technical Debt

35%

Tables → ``

Pico provides clean, responsive table styling out of the box. Use semantic table elements directly.

  
    
      File
      Issues
      Severity
    
  
  
    
      src/auth.ts
      3
      High
    
  

Code Blocks → ``

Pico styles ` and ` automatically with a monospace font and background.

npm install --save-dev typescript

Inline code:

Edit the config.json file to change settings.

Figures → ``

Use for images, diagrams, or any content with a caption.

  
  Figure 1: System architecture overview

Content Guidelines

1. Header — Always include a descriptive title and generation date using ``
2. Table of Contents — Use ` with to link to every by id`
3. Summary first — Lead with a concise executive summary or key findings
4. Visual hierarchy — Use semantic elements (`, , , , , `) to make information scannable
5. Tags/Labels — Use ` for severity levels, for status tags, ` for values
6. Callouts — Use ` for important notes and tips, for collapsible warnings, ` for key takeaways
7. Metrics — Use .grid with `` cards for key numbers at a glance
8. Bar charts — Use `` elements for simple horizontal bar visualizations
9. Tables — Use for structured comparisons, file listings, dependency inventories, etc.
10. Code blocks — Use `` for file paths, snippets, or commands mentioned in the analysis
11. Print-friendly — Pico includes built-in print styles; ensure content works on paper too

Anti-Patterns

• Do not split the report across multiple files — one HTML file only
• Do not use external CSS/JS files — everything must be embedded (except the Pico.css CDN link)
• Do not write custom CSS in `` tags — use Pico.css classes and semantic HTML only
• Do not use frameworks (React, Vue, etc.) — plain HTML/JS only
• Do not use additional CSS frameworks or libraries alongside Pico.css
• Do not omit the table of contents for reports longer than a single screen

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: shaftoe
• Source: shaftoe/pi-shared
• License: MIT

Install and usage instructions live in the source repository linked above.