MaxGiu67/lp-hero
skills/lp-hero/SKILL.md
Genera hero section animata per landing page. Supporta 4 varianti: minimal, bold, video-bg, split-screen. Usa quando l'utente vuole creare la hero, la sezione principale, o dice lp hero, crea hero, hero section, sezione principale.
testing
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add MaxGiu67/landing-craft lp-heroInstall 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.0s1 file scanned
SKILL.md
- name:
- lp-hero
- description:
- Genera hero section animata per landing page. Supporta 4 varianti: minimal, bold, video-bg, split-screen. Usa quando l'utente vuole creare la hero, la sezione principale, o dice lp hero, crea hero, hero section, sezione principale.
lp-hero — Generatore Hero Section
Genera una hero section animata completa con React, Tailwind CSS e GSAP/Motion.
Workflow
Step 1: Scegli variante
Se $ARGUMENTS specifica uno stile, usalo. Altrimenti chiedi:
| Variante | Descrizione | Quando usarla | |----------|-------------|---------------| | minimal | Testo centrato, fade-up sequenziale, social proof | SaaS, tool, app | | bold | Heading enorme (8-12vw), SplitText char-by-char | Brand, statement | | video-bg | Video background con overlay, testo sovrapposto | Prodotto fisico, lifestyle | | split-screen | Testo a sinistra, immagine/demo a destra | App con screenshot, dashboard |
Step 2: Leggi contesto
- Leggi
CLAUDE.mdper stack e convenzioni - Leggi
src/lib/animation-config.tsper timing coerente - Consulta
references/landing-sections.mdper il template della variante - Consulta
references/gsap-patterns.mdereferences/motion-patterns.md
Step 3: Genera componente
Crea src/components/sections/Hero.tsx con:
-
Layout statico (React + Tailwind, mobile-first)
- Heading h1 semantico
- Sottotitolo p
- CTA primario + secondario
- Social proof o elemento visivo
- Responsive: stack su mobile, layout su desktop
-
Animazione (scelta in base alla variante)
- minimal: Motion.dev fade-up sequenziale con stagger
- bold: GSAP SplitText per heading + Motion per CTA
- video-bg: Video lazy load + Motion fade per overlay content
- split-screen: GSAP timeline (testo da sinistra, immagine da destra)
-
Performance
- Hero image: preload o eager (e LCP)
- Font heading: preload
- No blocking resources
will-changesolo durante animazione
-
Accessibilita
prefers-reduced-motionrispettato- Heading h1 unico nella pagina
- CTA con focus visible
- Alt text per immagini
Step 4: Verifica
- Il componente compila senza errori TypeScript
- Responsive su 3 viewport (375, 768, 1440)
- Animazione fluida (transform/opacity only)
- reduced-motion disabilita le animazioni
Output
File: src/components/sections/Hero.tsx
Stile: componente autonomo, importabile in App/page
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-qa
development
VerifiedTrustedCommunity
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.
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