website-design-systemlisted

The visual build standards for a new site: mobile-first responsive graphics (WebP/AVIF, sized-to-display, srcset, lazy-load, descriptive alt, no layout shift), dark mode (CSS-variable theme tokens + a no-FOUC script + WCAG AA contrast in BOTH themes), and the brand/theme token block that BRAND.md mirrors. Use when building or reviewing layout, images, theming, or BRAND.md (step 5 of the new-website pipeline). Contrast is enforced by a11y.spec.ts (light+dark). Trigger phrases: "dark mode", "theme toggle", "responsive images", "mobile optimization", "image optimization", "WebP", "layout shift", "CLS", "design system", "theme tokens", "brand colors", "BRAND.md".
karero/website-builder · ★ 4 · Web & Frontend · score 74

Install: claude install-skill karero/website-builder

# Website design system Owns the **how it looks and performs visually** layer: mobile graphics, dark mode, and the theme tokens. Outputs/maintains `BRAND.md` (template in `~/.claude/skills/new-website/templates/brand.md`) and the token block in `~/.claude/skills/new-website/templates/astro/src/styles/global.css`. Image rules are below (WebP/AVIF via Astro's `astro:assets`); the `images.spec.ts` test enforces them. For generating image assets, use the `image` skill. ## Dark mode (first-class) - **Tokens, not hard-coded colours.** All colour flows through CSS custom properties; light is the `:root` default, dark overrides under `:root[data-theme="dark"]`, plus a `@media (prefers-color-scheme: dark)` block for no-JS visitors. The starter ships this exact structure. - **No-FOUC script** in `<head>` sets `data-theme` from `localStorage.theme` or the system preference *before first paint* (already wired in `Base.astro`). The toggle writes `localStorage.theme`. - **Contrast both themes:** every text/background pair passes WCAG AA (4.5:1 body, 3:1 large/UI). A colour that passes in light often fails in dark — the a11y test runs the full light+dark matrix, so check both. ## Mobile & responsive graphics - **Mobile first:** design from 360px up; tap targets ≥ 44px; no horizontal scroll. Verify at 360 / 768 / 1280 (preview_resize). - **Modern formats:** WebP (or AVIF) over JPEG/PNG for photos. - **Size to display, not source.** Never ship a 2000px image into an 80px