name: lp-qa description: "QA completa landing page: build, Lighthouse, accessibilita, visual check 3 viewport, reduced-motion, CLS. Usa quando l'utente vuole verificare la qualita, testare la landing, o dice lp qa, controlla, verifica, test landing, qualita, lighthouse."
lp-qa — Quality Assurance Landing Page
Esegue una QA completa della landing page coprendo performance, accessibilita, responsive, animazioni e SEO.
Workflow
Step 1: Build check
pnpm build
DEVE passare senza errori. Se fallisce, correggi prima di continuare.
pnpm tsc --noEmit
DEVE passare senza errori TypeScript.
Step 2: Performance (Lighthouse)
Se MCP Lighthouse disponibile, usalo. Altrimenti:
npx lighthouse http://localhost:5173 --output=json --output-path=./lighthouse-report.json --chrome-flags="--headless"
Verifica target (da references/landing-qa-checklist.md):
- Performance Score > 90
- LCP < 2.5s
- CLS < 0.1
- TBT < 200ms
Step 3: Accessibilita
Se MCP A11y disponibile, usalo. Altrimenti analizza manualmente:
- Heading hierarchy (h1 → h2 → h3)
- Alt text su tutte le immagini
- Color contrast (4.5:1 testo, 3:1 large)
- Focus visible su interattivi
- ARIA labels su icone/bottoni senza testo
Step 4: Responsive check
Se MCP Playwright disponibile, cattura screenshot a 3 viewport:
- Mobile: 375x812
- Tablet: 768x1024
- Desktop: 1440x900
Verifica:
- Nessun overflow orizzontale
- Testo leggibile su ogni viewport
- CTA raggiungibili (touch target 44x44px)
- Griglia adattiva (colonne ridotte su mobile)
Step 5: Animation check
Verifica:
prefers-reduced-motionrispettato in OGNI componente animato- Animazioni usano solo
transformeopacity - Nessun layout shift da animazioni (CLS)
- GSAP usa
useGSAPhook (non useEffect) - Motion usa LazyMotion con domAnimation
- Timing coerente (stessi ease in tutta la pagina)
Step 6: SEO check
Verifica:
- Meta title e description presenti
- OG tags (title, description, image)
- Heading h1 unico
- Schema.org JSON-LD (se applicabile)
Step 7: Report
Genera report strutturato:
# QA Report — [Nome Progetto]
## Risultati
| Area | Score | Status |
|------|-------|--------|
| Build | Pass/Fail | OK/FIX |
| Performance | XX/100 | OK/WARN/FIX |
| Accessibility | XX/100 | OK/WARN/FIX |
| Responsive | 3/3 viewport | OK/FIX |
| Animations | X/Y check | OK/FIX |
| SEO | X/Y check | OK/FIX |
## Azioni correttive
1. [problema] → [soluzione]
2. ...
Output
Report in console + file qa-report.md se richiesto