agentsclimarketplace

Html output

Skill ceilidhboy/skills/skills/html-output

Agent skills for Laravel and PHP development. Installable via npx skills@latest add ceilidhboy/skills

Install
npx -y skills add ceilidhboy/skills --skill html-output

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

HTML output generator for output that would benefit from being presented in a visually rich document. Use when communicating architectural plans, design options, code review summaries, workflows, comparisons, novel concepts, color choices, or any information that benefits from visual illustration — inline SVG diagrams, color swatches, structured comparison grids, interactive controls. Not needed for simple lists, linear text, or straightforward data using well-understood terminology.

SKILL.md

5.2 KB, as published. Nobody here has run it

HTML Output

Generate self-contained HTML documents instead of Markdown when the information benefits from visual illustration. Read the supporting files below as needed for the specific task.

Output Location

Resolve the output directory using this fallback chain:

  1. Environment variable PI_HTML_OUTPUT_DIR — if set, use this path
  2. Pi global settings — check htmlOutputDir key in ~/.pi/agent/settings.json
  3. Fallback — use ~/.pi/agent/html-output/ (creates it if needed)

Name files descriptively, e.g. oauth-flows-explainer.html.

Presenting the result

When the file is written, present the clickable link to the user on its own line, prefixed with the pointing-finger emoji:

👉 file:///C:/Users/YourName/Documents/Pi%20Output/filename.html

  • If htmlOutputFileUri is set, construct the link by replacing {filename} with the actual filename, then present it as above.
  • If htmlOutputFileUri is not set, present the raw filesystem path instead:

👉 /home/user/output/filename.html

This format is mandatory — every agent invoking this skill must use the 👉 emoji before the file link in its response. This applies universally across all users, platforms, and sessions.

Windows / WSL file:// URIs

On Windows with WSL, the resolved path (e.g. /mnt/c/Users/...) is correct for file operations but won't work as a clickable link. To produce a working file:// URI in the agent's response, use one of these settings in ~/.pi/agent/settings.json:

Option A: htmlOutputFileUri (filename template)

"htmlOutputFileUri": "file:///C:/Users/YourName/Documents/Pi%20Output/{filename}"

The placeholder {filename} is replaced with the actual output filename. When this setting is present, the agent reports a clickable link instead of the raw filesystem path.

Option B: htmlOutputFileUriPrefix (WSL path prefix)

"htmlOutputFileUriPrefix": "file://wsl.localhost/Ubuntu-24.04"

When this setting is present, the agent presents the link as:

👉 {prefix}/home/.../full/filesystem/path/to/filename.html

Where {prefix} is the value of htmlOutputFileUriPrefix. The agent appends the full filesystem path (from /home onwards) to the prefix to form the clickable WSL link.

Prefer this option when the project files live directly on the WSL filesystem and don't have a C: drive equivalent. The agent outputs the HTML file to the project's docs/adr/html/ directory (not to a separate Pi Output directory).

Setup instructions for Pi agents: When a user says "set up HTML output" or "I'm on Windows/WSL and the links don't work", do this:

  1. Check if htmlOutputDir is already set in ~/.pi/agent/settings.json
  2. If using a C: drive path:
    • Convert /mnt/c/... → file:///C:/...
    • Replace spaces with %20
    • Append /{filename} and write it as htmlOutputFileUri
  3. If using WSL native paths:
    • Get the WSL distro name from the user (e.g. Ubuntu-24.04)
    • Write "htmlOutputFileUriPrefix": "file://wsl.localhost/{distro}"
    • The agent will append the full filesystem path from /home onwards
  4. Note the change to the user so they know what was set

Decision Heuristic

"Would the human reader get more understanding from seeing this than from reading it?"

Use HTML when the information has depth — novel concepts, relationships, tradeoffs, workflows, color choices — anything requiring mental visualization.

Use Markdown when the information is wide — linear lists using standard terminology that carries the meaning. HTML adds no cognitive value there.

Cost awareness: HTML takes 2-4× longer to generate. Only use when the cognitive benefit justifies the cost.

Supporting Files

FileWhen to read it
DESIGN_SYSTEM.mdWhen building the HTML — contains color palette, typography, layout tokens, CSS patterns, and HTML boilerplate. Swap this file to use a custom design system.
SVG_GUIDELINES.mdWhen a diagram or illustration would help — contains SVG conventions, diagram types (flowchart, timeline, fan-out), and download button code.
TEMPLATES.mdWhen choosing a document structure — contains 7 use case templates with prompt patterns for exploration, code review, design, reports, explainers, slide decks, and custom editors.

References

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.