HTMLCraft — Claude Code Skill

Generate production-quality, self-contained HTML files from a plain-language description.

Supports canvas animations, WebGL shaders, Three.js 3D scenes, and polished UI design — no coding required.

Current version: 1.1.0

---

Usage

/htmlcraft <your idea in any language>

Examples

/htmlcraft a dark luxury AI agent product site with particle light trails

/htmlcraft a generative art page with flowing simplex noise fields, dark background

/htmlcraft a personal portfolio in editorial style, black and white palette

/htmlcraft a cyber terminal dashboard showing system metrics with green-on-black aesthetic

/htmlcraft an organic botanical brand landing page, warm cream palette, Three.js floating leaves

Output is saved as output.html in your current directory. Open in any browser — zero dependencies.

---

What it generates

• Completely self-contained HTML files (all CSS + JS inline, CDN-only for libraries)
• 10 distinct visual styles: Dark Luxury, Editorial, Brutalist, Organic, Cyber/Terminal, Glassmorphism, Retro/CRT, Dashboard, Experimental Art, Minimal Product
• 3 rendering techniques: Three.js + GLSL ShaderMaterial, Canvas 2D animation, CSS-only
• Production patterns: Simplex noise orbs, particle systems, network graphs, waveforms, displacement terrain, dot grids, and more

---

Installation

Option A: npx skills (recommended)

Install via the skills CLI:

npx skills add SunChJ/htmlcraft

The CLI will prompt you to install globally (~/.claude/skills/) or per-project (.claude/skills/). Choose symlink to keep it auto-updatable.

Option B: git clone — user-level (available in all projects)

git clone https://github.com/SunChJ/htmlcraft ~/.claude/skills/htmlcraft

Option C: git clone — project-level (current project only)

mkdir -p .claude/skills
git clone https://github.com/SunChJ/htmlcraft .claude/skills/htmlcraft

After installing, restart Claude Code (or open a new session) for the skill to appear.

---

File structure

htmlcraft/
├── SKILL.md                        # Skill definition (read by Claude Code)
├── README.md                       # This file
├── CHANGELOG.md                    # Version history
└── references/
    ├── style-catalog.md            # 10 visual design languages
    ├── design-systems.md           # Color palettes, typography, CSS patterns
    ├── threejs-patterns.md         # Three.js + GLSL code templates
    └── canvas-patterns.md          # Canvas 2D animation patterns

---

Tips

• More specific = better output: Include mood, colors, content sections, and inspiration references
• Best model: Switch to Opus for more elaborate shader code — /model opus before invoking
• Iterate: After the first output, say things like "make it darker", "add a particle system", "switch to editorial style"
• Custom output path: Specify a filename in your prompt — e.g. /htmlcraft ... save to landing.html

---

Versioning

This skill uses Semantic Versioning:

• MAJOR: Breaking changes to SKILL.md interface or reference file structure
• MINOR: New styles, patterns, or techniques added to references
• PATCH: Bug fixes, copy improvements, minor reference updates

See CHANGELOG.md for full history.

To update to the latest version:

cd ~/.claude/skills/htmlcraft && git pull

---

License

MIT