MaxGiu67/lp-qa
skills/lp-qa/SKILL.md
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.
development
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add MaxGiu67/landing-craft lp-qaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 1:02 AM10.1s1 file scanned
SKILL.md
- 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
Related Skills
MaxGiu67/lp-status
testing
VerifiedTrustedCommunity
Dashboard stato landing page: sezioni completate, score Lighthouse, checklist. Usa quando l'utente vuole vedere lo stato, il progresso, o dice lp status, stato, a che punto siamo, progresso landing.
SKILL.mdUpdated Apr 23, 2026
MaxGiu67/lp-section
testing
VerifiedTrustedCommunity
Genera sezione landing page con animazioni scroll-triggered. Tipi: features, testimonials, stats, pricing, comparison, cta, footer. Usa quando l'utente vuole aggiungere una sezione, o dice lp section, aggiungi sezione, crea features, pricing, testimonials.
SKILL.mdUpdated Apr 23, 2026
MaxGiu67/lp-methodology
tools
VerifiedTrustedCommunity
Overview del plugin Landing Craft. Mostra skill disponibili, workflow, stack e references. Usa quando l'utente chiede aiuto sul plugin, vuole vedere le skill, o dice help landing, come funziona, lp help.
SKILL.mdUpdated Apr 23, 2026
MaxGiu67/lp-init
development
VerifiedTrustedCommunity
Inizializza progetto landing page animata: scaffold React+Tailwind+GSAP+Motion, genera CLAUDE.md, hook QA, struttura cartelle. Usa quando l'utente vuole creare una nuova landing page, setup progetto landing, o dice lp init, nuova landing, setup landing, crea landing page.
SKILL.mdUpdated Apr 23, 2026