# Render Html

> |

- **Type:** Skill
- **Install:** `agentstack add skill-mifunedev-agro-render-html`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mifunedev](https://agentstack.voostack.com/s/mifunedev)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [mifunedev](https://github.com/mifunedev)
- **Source:** https://github.com/mifunedev/agro/tree/main/.agro/skills/render-html
- **Website:** https://agro.mifune.dev

## Install

```sh
agentstack add skill-mifunedev-agro-render-html
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Render HTML

Take an artifact (file path or in-context material) plus a one-line intent and produce a single, self-contained HTML file optimized for the moment a human reads it once to make a decision.

**Core principle (from Thariq's HTML-over-Markdown thesis):** every invocation produces bespoke HTML, picked widget-by-widget for *this* artifact. **No templates.** A template forces the format back into the Markdown mindset of pre-baked structure and defeats the point.

## When to use

Use when **all three** are true:
1. The artifact is a synthesis the human will read once to decide something.
2. The Markdown version would exceed ~100 lines or carry signal a table/SVG/collapsible would express more cleanly (severity, dependency, status, time).
3. No downstream pipeline (Ralph, GitHub, another LLM, grep) consumes the artifact.

Common targets in this harness:
- `/audit harness` tier-ranked report → filterable findings dashboard
- `/strategic-proposal` council artifact → phase-column roadmap with critic challenges inline
- `/audit skills` verdict matrix → sortable scoring table with CURRENT/STALE/BROKEN/DELETE badges
- Weekly digest of cron liveness (`crons/.cron.log`) → timeline coloured by outcome

## When NOT to use

Skip when the artifact is **source or pipeline input** — Markdown stays the substrate of the harness:
- PRDs (`.agro/tasks/*/prd.md`), briefings, commit messages, PR bodies, `CHANGELOG.md`
- The cron liveness trail itself (`crons/.cron.log`)
- Skill/identity sources (`CLAUDE.md`, `.claude/skills/`)
- Agent-to-agent handoffs (advisor → executor briefings)

If asked to render any of the above, refuse and explain.

## Instructions

### 1. Parse arguments

Arguments received: `$ARGUMENTS`

| Position | Meaning |
|----------|---------|
| `$0` | **slug** (required, kebab-case, no extension) — becomes the filename |
| `--from ` | optional source artifact to read |
| `--intent ` | optional human-purpose hint (e.g. "pick next 3 audit actions") |

If `slug` is missing, ask the user for one. Slug rules: lowercase, kebab-case, no slashes, no `.html` extension.

If `slug` collides with an existing file in today's date directory, append `-2`, `-3`, etc. — never overwrite.

### 2. Resolve output path

```bash
TODAY=$(date -u +%Y-%m-%d)
OUT_DIR="${TMPDIR:-/tmp}/oh-render/$TODAY"             # ephemeral, outside the repo
mkdir -p "$OUT_DIR"
OUT="$OUT_DIR/.html"
```

Always use UTC. Always create the directory first.

### 3. Gather source material

- If `--from` is given: read the file. If it does not exist, error out — do not invent content.
- If `--from` is absent: use the conversation context the orchestrator already has. Do not re-fetch what you already know.
- If both are absent and the conversation has no obvious artifact: ask the user what to render.

### 4. Generate bespoke HTML

Produce **one** self-contained `.html` file. Rules:

- **Single file, inline everything.** All CSS in ``. All SVG inline. No `` to external CSS or fonts. No ``. The artifact must work offline and travel as one file.
- **Semantic HTML5.** ``, ``, ``, ``, ``, ``/`` for collapsibles. Skip divs when a semantic tag fits.
- **System-font stack.** `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;` — no Google Fonts.
- **Colour as meaning, not decoration.** Severity, status, phase. Pick a small palette (3–5 tokens) and apply consistently. Include a legend if non-obvious.
- **Pick widgets for the data shape:**
  - tabular → `` with sortable headers (inline JS allowed for sort/filter only)
  - dependency / flow → inline ``
  - long evidence → `` (collapsed by default past the third one)
  - timelines → flex row with date axis, or inline SVG
  - multi-perspective synthesis → tabs or side-by-side columns
- **Print-friendly.** Add `@media print` rules that expand `` and drop interactive chrome.
- **Header block.** Title, generated-at UTC timestamp, source citation (path or "in-context"), one-line intent.
- **JavaScript is opt-in, not default.** Only include JS when interaction earns its keep (filter, sort, copy-to-clipboard, expand-all). Never for animations. Never for analytics.
- **No external fetches at runtime.** No `fetch()`, no images by URL — use inline SVG or data URIs only.

### 5. Write the file

Use the `Write` tool. Confirm the byte size is plausible (>2 KB for any non-trivial artifact, /`), and that it is ephemeral — copy it out to keep it.
2. A one-sentence summary of what was rendered (so the user knows what they'll see).
3. The open command suggestion: `/agent-browser file://` (or `open file://...` if running locally).

## Anti-patterns

- **Templating.** "Generic dashboard template, fill in the variables." Defeats the thesis. Generate bespoke each time.
- **External assets.** CDN links to Tailwind, Google Fonts, Chart.js, etc. The artifact must work offline and travel as one file.
- **Decorative JS.** Animations, fade-ins, gradients. The reader is making a decision, not watching a demo.
- **Rendering source.** Producing `prd.html`, `CLAUDE.html`, `IDENTITY.html`. Those files are pipeline input or indexed source — leave them in Markdown.
- **Multi-file output.** Separate `.css`/`.js` companions. Single file or nothing.
- **Writing anywhere under the repo.** The output is ephemeral scratch, never a tracked or ignored path inside `.agro/`. No exceptions.
- **Overwriting an existing artifact.** Suffix `-2`, `-3` instead — older renders may still be referenced in the conversation.

## Examples

```
/render-html audit-harness-tier --from /tmp/audit-raw.md --intent "pick next 3 actions"
→ $TMPDIR/oh-render/2026-05-18/audit-harness-tier.html

/render-html roadmap-council --intent "review council deliberation before publishing pinned issue"
→ $TMPDIR/oh-render/2026-05-18/roadmap-council.html
  (source was the strategic-proposal output already in context)

/render-html week-19-digest --from crons/.cron.log --intent "what ran this week"
→ $TMPDIR/oh-render/2026-05-18/week-19-digest.html
```

## Source & license

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

- **Author:** [mifunedev](https://github.com/mifunedev)
- **Source:** [mifunedev/agro](https://github.com/mifunedev/agro)
- **License:** Apache-2.0
- **Homepage:** https://agro.mifune.dev

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mifunedev-agro-render-html
- Seller: https://agentstack.voostack.com/s/mifunedev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.