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

1. Single-File Output Only: The entire artifact must fit within one .html file.
2. Zero Dependencies: Do NOT use external CSS frameworks (no Tailwind, Bootstrap, etc.) or external font files.
3. Inline Everything: All styles must be in a <style> block. Use inline <svg> for graphics.
4. 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:

• [references/patterns.md](references/patterns.md): Read this for specific architectural patterns, CSS-only interactivity, and the Review Checklist.
• [references/styles.md](references/styles.md): The design system for colors, typography, and spacing.
• [references/components.md](references/components.md): Use this for pre-built interactive components (tabs, diffs, timelines).
• [assets/boilerplate.html](assets/boilerplate.html): Use this file as the structural starting point.

Workflow

For New Artifacts

1. Analyze Request: Determine the optimal page type (see [references/pagetypes.md](references/pagetypes.md)).
2. Plan Layout: Decide on the grid structure and interaction model.
3. Implement: Use the boilerplate and component library to build the file.

For Review & Refactoring

1. Audit: Compare the current HTML against the Review Checklist in patterns.md.
2. Identify Bottlenecks: Find external dependencies, generic styles, or low-density layouts.
3. Apply Surgical Updates:

Inline external CSS/JS. Swap web fonts for the system font stack. Update colors to the Ivory/Slate/Clay palette. Refactor lists or simple tables into high-density Grids or Tabs.

1. Verify Interactivity: Ensure state handling (e.g. tabs) is refactored to use the CSS-only radio engine where appropriate.

Output Code

Output the complete HTML code within a standard code block for the user to copy, or write it directly to an HTML file if instructed. Do not truncate the code.