HTML Builder
Installation
SKILL.md
HTML Builder
A design reference and helper tool for web development. Quickly look up color palettes, font pairings, layout grids, icon libraries, spacing scales, responsive breakpoints, contrast checkers, shadow presets, mockup tools, and design checklists — all from your terminal.
Commands
| Command | Description |
|---|---|
palette |
Display a curated color palette with Primary (#2563EB), Secondary (#7C3AED), and Accent (#F59E0B) values |
font |
Show recommended font pairings — Heading: Inter/Poppins, Body: Open Sans/Lato |
layout |
Output layout template specs — 12-column grid, 8px base spacing, 1200px max-width |
icon |
List popular icon libraries — Heroicons, Lucide, Phosphor, Tabler |
spacing |
Show spacing scale guide — xs:4 sm:8 md:16 lg:24 xl:32 2xl:48 |
breakpoint |
Display responsive breakpoints — sm:640 md:768 lg:1024 xl:1280 2xl:1536 |
contrast |
Provide contrast checker reference (webaim.org tool link) |
shadow |
Show box-shadow presets — sm, md, lg with CSS values |
mockup |
List recommended mockup/design tools — Figma, Sketch, Adobe XD |
checklist |
Output a design checklist — consistent spacing, color contrast, mobile responsive |
help |
Show all available commands |
version |
Display current version (v2.0.0) |