MaxGiu67/lp-animate
skills/lp-animate/SKILL.md
Aggiunge animazioni a componenti React esistenti senza ristrutturarli. Tipi: entrance, scroll, hover, stagger, parallax. Usa quando l'utente vuole animare un componente, aggiungere movimento, o dice lp animate, anima, aggiungi animazione, troppo statico.
development
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add MaxGiu67/landing-craft lp-animateInstall 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 AM15.4s1 file scanned
SKILL.md
- name:
- lp-animate
- description:
- Aggiunge animazioni a componenti React esistenti senza ristrutturarli. Tipi: entrance, scroll, hover, stagger, parallax. Usa quando l'utente vuole animare un componente, aggiungere movimento, o dice lp animate, anima, aggiungi animazione, troppo statico.
lp-animate — Aggiungi Animazioni a Componenti Esistenti
Aggiunge un layer di animazione a un componente React esistente senza ristrutturare la logica.
Workflow
Step 1: Identifica componente e tipo animazione
Argomenti: $ARGUMENTS = <percorso-file> [tipo]
| Tipo | Cosa fa | Libreria | |------|---------|----------| | entrance | Fade-up al mount del componente | Motion.dev | | scroll | Reveal quando entra nel viewport | Motion.dev useInView | | hover | Scale + shadow on hover | Motion.dev whileHover | | stagger | Children appaiono in sequenza | Motion.dev variants | | parallax | Movimento differenziato con scroll | GSAP ScrollTrigger |
Se il tipo non e specificato, analizza il componente e suggerisci il piu appropriato.
Step 2: Leggi e analizza il componente
- Leggi il file sorgente
- Identifica: elementi principali, children iterati, immagini, testi
- Leggi
src/lib/animation-config.tsper timing coerente - Consulta reference GSAP/Motion per il pattern scelto
Step 3: Aggiungi animazione
Regole di modifica:
- Non ristrutturare — aggiungi solo il layer animazione
- Preserva tutti i props e la logica esistente
- Importa da "motion/react" per UI, da "gsap" per scroll-heavy
- Wrappa con
<motion.div>o<m.div>(con LazyMotion) - Aggiungi
prefers-reduced-motioncheck - Usa timing da
animation-config.ts
Step 4: Verifica
- Il build compila senza errori
- L'animazione usa solo transform/opacity
- prefers-reduced-motion rispettato
- Nessun layout shift introdotto
Output
File: componente aggiornato con animazione Nessun nuovo file creato (modifica in-place)
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