HTML CSS First
Spinge le build frontend verso HTML/CSS nativi (dettagli, popover, :has(), animazione guidata dallo scroll) prima di ricorrere a JS.
Promosso
Cosa fa
Un riferimento di revisione del codice frontend e di build che verifica, prima di scrivere o approvare qualsiasi pattern UI pesante in JS, se un elemento HTML nativo o una funzionalità CSS moderna fa già il lavoro - modali tramite dialog/popover, fisarmoniche tramite details, tab tramite radio+:has(), validazione moduli tramite attributi constraint-validation. Si attiva su costruzione o revisione di componenti UI (modali, fisarmoniche, tab, tooltip, dropdown, caroselli, header sticky) o domande 'come costruisco X nel browser'.
Rapporto di test
Ho costruito e renderizzato la stessa fisarmonica FAQ due volte in un browser reale: la versione JS di base richiede circa 15 righe di codice click-handler e diventa completamente inattiva con JS disabilitato, mentre la versione <details name="faq"> della skill ottiene animazione CSS fluida E apertura/chiusura mutua esclusiva nativa gratuitamente, verificata dal vivo senza JavaScript allegato.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/macdonst/html-css-first.git cd html-css-first mkdir -p ~/.claude/skills cp -r . ~/.claude/skills/html-css-first
Comandi e prompt di esempio
/html-css-firstSpinge le build frontend verso HTML/CSS nativi (dettagli, popover, :has(), animazione guidata dallo scroll) prima di ricorrere a JS.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Build a FAQ accordion that only opens one item at a time, no JS neededReview this modal component and tell me if I can drop the JavaScriptHow do I build tabs using just radio buttons and CSS instead of JS