Html

Skill Pawel-Kica/skills-that-ship/skills/html

Moved to claude-code-100.

Install

npx -y skills add Pawel-Kica/skills-that-ship --skill html

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

Render a non-trivial answer as a self-contained HTML page and open it in the browser.

SKILL.md

2.0 KB, 487 tokens by cl100k_base, as published. Nobody here has run it

HTML

When the output is non-trivial, a single .html you open in the browser beats a wall of markdown. (Idea popularized by Thariq Shihipar's html-effectiveness.)

See examples/ for ready-to-crib pages in this exact style: a decision tree, a comparison matrix, an annotated code review, a report dashboard, and an inline-SVG diagram. Open examples/index.html for the gallery.

Explicit trigger only. When invoked: read the context, pick a category, ship. Don't ask what they want.

Category	Use for
Exploration / Planning	Decision trees, option matrices
Code Review	Diff annotations, risk callouts
Design	Visual comparisons
Prototyping	Throwaway UI
Diagrams	Architecture, flows, state machines
Decks	Slide-style sections
Research	Multi-source synthesis, comparisons
Reports	Summaries, metrics, dashboards
Custom editors	One-off data tools

Rules

Self-contained .html. Inline CSS/JS, no build. CDN libs only when earned (Chart.js, D3, Mermaid). Mock data inline as a JS const. An eye-readable layout beats clever source. Throwaway by default.

Style

Minimal: cream #F6F2EA, near-black text, serif headlines, sans body, accent #C8553D used sparingly, max-width 720-900px for prose. No shadows, gradients, or emoji. "Make it pop" → go bolder and commit.

Stuck for a layout: crib from the examples/ folder, one per category.

Output

Write to /tmp/claude-html/<slug>.html (or your project's artifacts folder if you keep one).

After: print the path, run open <path> (open -a "Google Chrome" <path> to force the browser), and give a one-sentence summary. The file is the answer.

What ships with it: 6 files

21.7 KB alongside SKILL.md