website-design-stack

What problem does it solve?

This Skill prevents design drift and implementation mismatch by providing a production-grade rubric for building consistent, conversion-ready landing pages.

Core Features & Use Cases

• Animation-tier classification without mixing: Chooses a conservative/moderate/aggressive/editorial/static direction and enforces consistency across the page.
• Opinionated technical scaffolding: Recommends a tier-appropriate stack (Next/React/TS/Tailwind plus motion/3D tooling when needed) to avoid arbitrary component choices.
• Mandatory section blueprint: Ensures the landing page includes the required six sections in the right order (Hero, Social proof, Feature grid, Showcase, CTA, Footer).
• Quality and ship gate checklist: Verifies Lighthouse/mobile readiness, theme correctness, console cleanliness, CTA testing, OG/meta presence, hover states, reduced-motion support, and real-device validation.
• On-demand reference repo cloning guidance: Provides canonical clone commands and grep paths for specific libraries so you can extract exact patterns from source when truly needed.

Quick Start

Invoke the website-design-stack skill to classify your landing page tier, scaffold the right tech stack, and produce a complete six-section implementation plan before you write the first commit.