good-html
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
.htmlfile. - 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:
- references/patterns.md: Read this for specific architectural patterns, CSS-only interactivity, and the Review Checklist.
- references/styles.md: The design system for colors, typography, and spacing.
More from duyet/claude-plugins
react-nextjs-patterns
React and Next.js implementation patterns for performance and maintainability. Use when building frontend components, pages, and applications with React ecosystem.
150backend-api-patterns
Backend and API implementation patterns for scalability, security, and maintainability. Use when building APIs, services, and backend infrastructure.
42quality-gates
Systematic quality verification procedures for code review and delivery. Use when validating completed work, conducting code reviews, or ensuring production readiness.
37gemini-prompting
Prompt engineering guidance for Gemini (Google) model. Use when crafting prompts for Gemini to leverage system instructions, multimodal capabilities, ultra-long context, and strong reasoning features.
27frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
22claude-prompting
Prompt engineering guidance for Claude (Anthropic) model. Use when crafting prompts for Claude to leverage XML-style tags, long-context capabilities, extended thinking, and strong instruction following.
20