What problem does it solve? AI-generated landing pages tend to look instantly recognizable: centered heroes, three identical feature cards, purple gradients, and generic copy. This Skill produces landing pages with editorial layouts, real design tokens, intentional motion, and copy that reads as human-written rather than template-generated. ## Core Features & Use Cases - Section-by-section composition: Plans and builds hero, proof, feature, FAQ, pricing, and CTA sections as real React components with varied layouts and deliberate motion. - Design system grounding: Loads tokens from a design system (e.g., claude-design-system-architect) instead of hardcoding arbitrary colors and sizes. - Anti-generated copy and critique pass: Strips AI-flavored phrasing, enforces house rules (no purple, no emoji, Lucide/Heroicons), and runs a mandatory design-critic review before shipping. - Use Case: Rebuilding a marketing site hero and pricing section in Next.js App Router with Tailwind v4 and Motion, then verifying the build compiles and passes an anti-AI design review. ## Quick Start Use the claude-landing-composer skill to build a landing page for my product with a hero, social proof, features, pricing, and CTA in Next.js and Tailwind.
