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.
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.
**Motion:** entrance reveals on scroll, but vary them — not the identical fade-up on every block. Respect `prefers-reduced-motion`. Motion should guide the eye to what matters, not decorate everything equally.
## Step 3 — Write copy that isn't AI-flavored
- Cut the tells: "elevate", "unlock", "seamless", "in today's fast-paced world", "we're thrilled", em-dash-everything, tricolon-everything.
- Specific > generic. Confident > hedged. Short > padded.
- Match the user's voice: direct, no corporate fluff.
- Write real microcopy (buttons, empty states, captions) — not "Learn More" everywhere.
## Step 4 — Build it real
Write the components, wire the tokens, ensure it's responsive (mobile-first, real breakpoints) and accessible (semantic HTML, focus states, alt text, AA contrast). Run the dev server / build and confirm it compiles before claiming it works.
## Step 5 — Critique pass (mandatory)
Run `claude-design-critic` (or the anti-ai-frontend review) on the output to strip any remaining generated-looking patterns in both design and copy. Then deliver with the file paths and a short note on the choices made.
## The anti-generated checklist (apply before shipping)
- Layout varies between sections; not every section is a centered stack.
- Whitespace is generous and intentional, not uniform.
- One confident accent; no rainbow gradients; never default-purple.
- Headlines are specific and human; no filler value-props.
- Motion has variety and restraint; reduced-motion respected.
- Icons, never emoji. Real microcopy, never "Learn More" x5.
## Guardrails recap
Build on real tokens, never arbitrary values · responsive + accessible + AA contrast · no purple / no emoji · compile/run before claiming done · always finish with a de-AI critique pass.
Related in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".