website-theme

What problem does it solve?

Applies a consistent, production-ready visual theme to an existing website by generating archetype-driven design tokens and updating the codebase so colors, typography, shape, shadows, motion, and nav/footer styling are unified without changing layout or content structure.

Core Features & Use Cases

• Generates three distinct theme propositions based on different archetypes (safe, contrasting, bold) and enforces diversity rules for hues and fonts.
• Builds a complete token set (HSL colors, font imports, radii, shadows, motion timings) with WCAG contrast validation and produces exact CSS custom properties for both light and dark modes.
• Applies tokens to key files (app/globals.css, app/layout.tsx, lib/design-config.ts, components and animation libs) and scans for hardcoded radii, shadows, and durations to replace with variables.
• Use Case: Recolor and retheme a Next.js site to match a new brand direction while preserving layouts and ensuring accessible dark-mode parity.

Quick Start

Ask the skill to generate three archetype theme propositions for the website at the project path and then apply the chosen tokens to app/globals.css, app/layout.tsx, and lib/design-config.ts.