lp-init

lp-init — Setup Progetto Landing Page

Inizializza un progetto landing page completo con React, Tailwind CSS v4, GSAP, Motion.dev, e configurazione Claude Code ottimizzata.

Workflow

Step 1: Chiedi info progetto

Chiedi all'utente (o inferisci dal contesto):

• Nome progetto (es. "acme-landing")
• Stack: React+Vite (default) o Next.js
• Sezioni previste: hero, features, testimonials, pricing, CTA, footer
• Stile: minimal, bold, corporate, playful
• Deploy target: Vercel, Netlify, altro

Step 2: Scaffold progetto

Se il progetto non esiste ancora, crea con:

React + Vite (default):

pnpm create vite@latest [nome] --template react-ts
cd [nome]
pnpm add gsap @gsap/react motion tailwindcss @tailwindcss/vite
pnpm add -D prettier eslint typescript

Next.js:

pnpm create next-app@latest [nome] --typescript --tailwind --app --src-dir
cd [nome]
pnpm add gsap @gsap/react motion

Step 3: Struttura cartelle

Crea la struttura:

src/
├── components/
│   ├── sections/          # Hero.tsx, Features.tsx, Pricing.tsx, CTA.tsx, Footer.tsx
│   ├── ui/                # Button.tsx, Badge.tsx, Card.tsx (shadcn-style)
│   └── animations/        # ScrollReveal.tsx, StaggerContainer.tsx, CountUp.tsx
├── hooks/
│   ├── useScrollProgress.ts
│   ├── useReducedMotion.ts
│   └── useInView.ts
├── lib/
│   ├── utils.ts           # cn(), constants
│   └── animation-config.ts # durate, ease, stagger values centralizzati
└── styles/
    └── globals.css         # Tailwind v4 @import, font, base styles

Step 4: File di configurazione animazione

Crea src/lib/animation-config.ts:

export const ANIMATION = {
  duration: { fast: 0.3, normal: 0.6, slow: 0.8 },
  ease: { default: "power2.out", bounce: "back.out(1.7)", smooth: [0.25, 0.46, 0.45, 0.94] },
  stagger: { fast: 0.05, normal: 0.1, slow: 0.15 },
  scroll: { start: "top 80%", end: "top 20%" }
} as const;

Step 5: Componenti base animazione

Crea wrapper riutilizzabili in src/components/animations/:

• ScrollReveal.tsx — wrapper Motion.dev con useInView
• StaggerContainer.tsx — container con stagger children
• CountUp.tsx — counter animato GSAP per numeri/stats

Step 6: Genera CLAUDE.md

Crea CLAUDE.md nella root del progetto con:

• Stack e versioni
• Struttura progetto
• Comandi dev/build/lint
• Regole critiche (reduced-motion, performance, mobile-first)
• Istruzioni di compattazione

Step 7: Genera hook QA

Crea .claude/settings.json con:

• PostToolUse: Prettier auto-format su ogni edit
• PostToolUse: ESLint auto-fix su ogni edit
• PreToolUse: blocca modifica config senza approvazione
• Stop: type-check TypeScript a fine risposta

Step 8: Mostra prossimi passi

Progetto inizializzato! Prossimi passi:
1. /lp-hero [stile]     — genera la hero section
2. /lp-section [tipo]   — genera sezioni (features, pricing, etc.)
3. /lp-qa               — verifica qualita completa

Output

• Progetto scaffold con dipendenze installate
• Struttura cartelle pronta
• CLAUDE.md ottimizzato per landing page
• Hook QA configurati
• Componenti animazione base