Agent skill · design visual · onewave-ai
claude-landing-composer
Compose a premium, animated landing page section by section in Next.js + Tailwind + Motion (Framer Motion) — built on a real design system, with editorial copy and motion that feels human-crafted, not template-generated. Use when building or rebuilding a landing page, marketing site, or hero/feature/pricing/CTA sections that need to look production-ready and bespoke from day one.
Why this skill is useful
Provides a structured approach to creating bespoke landing pages with specific design tokens and motion patterns that the AI wouldn't reliably generate on its own.
What it needs
Requires framer-motion, nextjs, tailwindcss installed locally. About 3k tokens when loaded. Last updated 2026-07-15. 242 stars on the source repository.
What this skill does
Claude Landing Composer Most AI-built landing pages are instantly recognizable: centered hero, three feature cards, a gradient, generic copy. This skill builds pages that don't read as generated — editorial layout, real design tokens, motion with intent, and copy that sounds like a person wrote it. Build on a design system from claude-design-system-architect when one exists. Run the result through claude-design-critic before shipping. Step 1 — Plan the page Goal & one action — what the page must get the visitor to do. Audience — pull a buyer persona from icp-deep-scanner if available so the copy speaks to a real reader. Sections — choose the minimum that earns the goal (hero → proof → how/why → objection-handling → pricing → CTA). Cut anything that doesn't move the visitor forward. Tokens — load the design system. If none exists, generate one first (claude-design-system-architect); do not hardcode arbitrary colors/sizes. Stack & house rules Next.js (App Router) + React + TypeScript + Tailwind v4 + Motion (the library formerly published as Framer Motion) — the default stack. No purple. No emoji — use Lucide/Heroicons. Warm/earth tones and dark surfaces welcome. Motion is expected — typewriter, animated counters, spring/stagger reveals — used with restraint. Step 2 — Compose section by section Build each section as a real component using tokens. For each, decide layout, content, and motion deliberately: Hero — a sharp headline (not "Welcome to {Product}"), a sub that states the actual value, one primary CTA. Consider an asymmetric or editorial layout over the default dead-center stack. Proof — logos, a real metric, or a specific outcome — not "trusted by thousands." Feature/why — show the value in context; avoid the three-identical-cards reflex unless it genuinely fits. Vary rhythm and alignment between sections. Objection handling / FAQ — answer the real hesitation a prospect has. Pricing (if needed) — clear, confident, value-anchored. CTA — one action, restated. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills onewave-ai/claude-landing-composer