MaxGiu67/lp-section
skills/lp-section/SKILL.md
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.
testing
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add MaxGiu67/landing-craft lp-sectionInstall 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 AM9.3s1 file scanned
SKILL.md
- name:
- lp-section
- description:
- 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.
lp-section — Generatore Sezioni Landing Page
Genera una sezione landing page completa con animazioni scroll-triggered.
Workflow
Step 1: Scegli tipo sezione
Se $ARGUMENTS specifica il tipo, usalo. Altrimenti chiedi:
| Tipo | Varianti | Animazione principale | |------|----------|----------------------| | features | grid-cards, showcase-alternating, icon-list | Stagger reveal, parallax immagini | | testimonials | carousel, grid, single-quote | AnimatePresence, stagger | | stats | counter-row, counter-cards | GSAP counter scroll-triggered | | pricing | 3-column, comparison-table, toggle-annual | Stagger cards, number morph | | comparison | vs-table, feature-matrix | Stagger rows | | cta | gradient-bg, split, minimal | Fade-up, CTA pulse/glow | | footer | 4-column, minimal, mega-footer | Fade-in on scroll |
Step 2: Leggi contesto
- Leggi
CLAUDE.mdper stack e convenzioni - Leggi
src/lib/animation-config.tsper timing coerente - Leggi sezioni esistenti in
src/components/sections/per coerenza stile - Consulta
references/landing-sections.mdper template - Consulta
references/gsap-patterns.mdereferences/motion-patterns.md
Step 3: Genera componente
Crea src/components/sections/[Nome].tsx con:
- Layout statico (React + Tailwind, mobile-first)
- Animazione scroll-triggered (Motion useInView o GSAP ScrollTrigger)
- Responsive (griglia adattiva, font scaling)
- Accessibilita (heading hierarchy, reduced-motion, ARIA)
- Performance (lazy load immagini, transform/opacity only)
Step 4: Integra nella pagina
- Aggiungi import e componente nella pagina principale
- Verifica ordine sezioni e spacing coerente
- Verifica che le animazioni non si sovrappongano
Output
File: src/components/sections/[Nome].tsx
Aggiornato: pagina principale con import e rendering
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-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
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