Renders session output into self-contained designed HTML artifacts via a deterministic TypeScript renderer.
npx skills add https://github.com/ruban-s/DevOS --skill html-ruban-s
Please help me install this Agent Skill. Skill: HTML Source: https://github.com/ruban-s/DevOS/tree/main/skills/HTML Command: npx skills add https://github.com/ruban-s/DevOS --skill html-ruban-s
Tools/Render.ts converts a typed content JSON (sections, quotes, tables, callouts, lists) into one self-contained HTML file with inline CSS and zero external requests. - Design Registers: Two built-in visual themes — dossier (dark ink-green/orange for evidence files and red teams) and ledger (dark navy/gold serif for reports and plans) — selectable via CLI flag. - Artifact-Safe Output: Fonts embedded as data URIs, all numbering emitted as real DOM text, and no document skeleton tags, making output safe for Artifact CSP and screenshot pipelines. - Use Case: After finishing a red-team investigation, run /HTML to distill the findings into content JSON, render it with the dossier register, and publish it as a verified, self-contained HTML artifact. ## Quick Start Ask the agent to render the session's finished analysis as an HTML artifact using the HTML skill, for example by saying "/HTML" after a research or report session.High-intent search queries and answers about installing and using this skill.
Distill the session output into a typed content JSON with title and sections, then run bun Tools/Render.ts --json content.json --register dossier --out artifact.html. The renderer produces one self-contained HTML file with inline CSS and no external requests.
Two registers ship with the renderer: dossier (dark ink-green with orange accents, suited to evidence files and red teams) and ledger (dark navy with gold serif, suited to reports and plans). Run Render.ts with --registers to list them.
No. The skill is explicitly not for deployed websites, web apps, or UI design systems; those should be built directly as projects. It only renders finished session content into a single presentation artifact.
DOM-render screenshot pipelines drop CSS pseudo-element generated content, so counters and ::before labels vanish from captures. Render.ts avoids this by emitting all numbering and labels as real DOM text, and new registers must never add CSS counters.
Artifacts block all external requests, so a Google Fonts link fails silently and falls back to system fonts. Render.ts embeds fonts as data-URI @font-face from local font files when available, or you design on system font stacks.
danielmiesslerRenders session output into self-contained designed HTML artifacts via a deterministic TypeScript renderer.
AcosmiRender HTML/React artifacts, capture screenshots, and evaluate JavaScript in sandboxed Canvas sessions.
bitwize-music-studioGather and cross-verify primary-source evidence across 3+ independent sources.
lance-donifImplement, debug, and deploy React, Vue, or Vite frontend applications.