| name | good-html |
| description | Generate or review high-density, interactive, self-contained HTML artifacts based on Thariq Shihipar's "Unreasonable Effectiveness of HTML" patterns. Use this skill when asked to "create HTML," "build a dashboard," "format a PR review," "make an interactive explainer," or when you need to "review and update" existing HTML using the "good-html" style. |
Good HTML Artifact Generator
This skill enables Claude to generate or refactor highly effective, visually distinct, and functional HTML artifacts rather than relying on standard Markdown or low-resolution HTML. It is based on the design patterns from Thariq Shihipar's "The Unreasonable Effectiveness of HTML".
The core philosophy is that a single HTML file can act as a high-density "mini-app" or interactive document that is completely self-contained and highly portable.
Core Rules for HTML Generation & Review
- Single-File Output Only: The entire artifact must fit within one
.html file.
- Zero Dependencies: Do NOT use external CSS frameworks (no Tailwind, Bootstrap, etc.) or external font files.
- Inline Everything: All styles must be in a
<style> block. Use inline <svg> for graphics.
- Avoid "AI Defaults": Do not use generic bright blue/purple gradients or basic Bootstrap aesthetics. Use the provided earthy, muted color palette and robust system fonts.
Resources
When generating or reviewing an artifact, consult the following resources:
