name: landing-page description: Use when building a landing page or marketing site from scratch (greenfield) — any "build me a landing/website/one-pager for X" request. Owns the technical layer every landing page needs: fast Lighthouse-grade rendering, SEO (metadata, sitemap, robots, JSON-LD), favicon + app icons + OG image, and generated imagery so no slot ships empty. Delegates all visual/design decisions to the Impeccable skill. Domain-agnostic (any industry, any language). user-invocable: true
Build a production landing page from greenfield. This skill owns the technical layer (perf, SEO, icons, images, verification). Impeccable owns the design. Don't reinvent visuals — hand them off.
First: ask only what's missing
Don't assume. If any of these are unclear from the request, ASK (batch 2–4 at a time, in the user's language):
- Brand: name, what they do, one-line value prop, logo file (or generate one?).
- Audience + goal: who visits, single primary conversion (WhatsApp / form / call / signup / buy).
- Sections / content: what blocks exist and their real copy (services, about, process, contact…). Never invent facts, prices, stats, or testimonials — mark unknowns as
// PLACEHOLDER — editar. - Look: any inspo/reference image, palette or brand colors, language/locale, target domain (for SEO
SITE_URL). - Images: confirm the Gemini key is in
.envasGEMINI-IMAGES-API(see images step).
Workflow
-
Scaffold — Next.js App Router + TS + Tailwind. Read the project's own framework docs first (e.g.
node_modules/next/dist/docs/); APIs may differ from training data. Keep files <350 lines. One source of truth for content: ALL editable values — every headline, paragraph, list item, brand name, link, phone/WhatsApp, prices, SEO strings — live in a single typed file (lib/content.ts, orsite.config.ts). Components import from it and contain NO hardcoded copy. Per-environment values (SITE_URL, contact number) come from.envand are re-exported through that one file. Goal: a non-developer changes all content by editing one file. -
Design → Impeccable. This is non-optional for visual quality. Run
/impeccable initfor a greenfield project (it sets up PRODUCT.md/DESIGN.md, picks a brand register + palette), then/impeccable craft <section>per block. Impeccable's anti-slop rules (no eyebrow-on-every-section, no 01/02/03 scaffolding, no identical card grids, contrast ≥4.5:1, intentional motion) are the bar. Goal: clean, minimal, visually striking — not AI slop. -
Images — fill every visual slot. Write
public/images/manifest.json, runscripts/generate-images.mjs, post-process, verify. One sharedstyle= a cohesive set. NEVER read or print.env— onlynode --env-file=.env. → references/images.md -
Performance — next/image (AVIF,
sizes,priorityonly on LCP), next/font, shrink sources, no real content gated behindopacity:0reveals (ships blank on prerender), reduced-motion fallbacks. → references/performance.md -
SEO + favicon — Metadata API (canonical, OG 1200×630, twitter),
viewport,robots.ts,sitemap.ts, JSON-LD,<html lang>, and icons/OG from the logo viascripts/make-icons.mjs. → references/seo.md -
Verify —
npm run buildclean + headless screenshot that actually paints (large--virtual-time-budget; tiny PNG = blank = reveal trap) + Lighthouse 95+ if available. Read generated images before wiring them in.
Scripts
scripts/generate-images.mjs— Gemini image gen from a manifest.node --env-file=.env <script> public/images/manifest.json [names…] [--dry]. ReadsGEMINI-IMAGES-API, never logs it.scripts/make-icons.mjs— favicon.ico + icon.png + apple-icon.png + og.jpg from a logo (needssharp).node <script> --logo public/logo.png [--mark …] [--out-app src/app] [--bg "#fafaf8"] [--title "…"] [--crop "L,T,W,H"].
Hard rules
- Never read/echo
.envor the API key. - All editable content in ONE file; components have no hardcoded copy.
- Design quality goes through Impeccable; don't ship default-looking output.
- No invented facts/stats/testimonials — placeholders, clearly marked.
- Don't gate real content behind JS-triggered reveals (blank-page trap).