website-builder

Website Builder

Generate production-ready websites through a design interview: read the brief, ask only about genuine gaps, propose distinct design directions, prove the chosen one with a style preview, then build. Coordinates with copywriting, brand, fonts, section, and audit skills.

---

Working Alongside CLAUDE.md

This skill is the orchestrator referenced by Hakuto's CLAUDE.md. Follow CLAUDE.md's "Mandatory Workflow" (the 7-step index.css → Layout.astro → Project Plan → Components flow) alongside this skill's design workflows. CLAUDE.md is always loaded; this skill adds the conversational, design-aware layer on top of that mechanical sequence.

When the two overlap, CLAUDE.md owns the how (which files to touch, what conventions to follow) and this skill owns the what (which direction, which content strategy, when to invoke siblings).

---

Technical Constraints

These rules are enforced by CLAUDE.md and apply to every page this skill produces. See CLAUDE.md for full details.

• Tailwind CSS v4 — config lives in src/index.css via @theme {}, not tailwind.config.mjs (delete that file if present).
• className (not class) on React/shadcn components — <Button className="..."> is correct; <Button class="..."> is a TypeScript error. Native HTML in .astro keeps class.
• Astro Fonts API for custom fonts — experimental.fonts (5.x) or top-level fonts (6+) in astro.config.mjs. Never use @import or @font-face for custom fonts. ALWAYS invoke the fonts skill when custom fonts are involved.
• Cloudflare adapter imageService: "custom" with no image.service key, so Astro's sharp default survives. Both "compile" and "passthrough" replace sharp — "compile" does so despite the name.
• <Picture> for local images, <img> for external URLs — local assets go through astro:assets for WebP/responsive widths. Unsplash and other external URLs use plain <img>.
• Right-size every local image — width={W} widths={[W, W * 2]} sizes="…", all three: without widths Astro emits no srcset and the sizes is inert. Omit height unless a crop is intended — a pair that disagrees with the source ratio makes sharp crop.