HTML CSS First

Presser frontend-bygg mot native HTML/CSS (details, popover, :has(), scroll-driven animation) før JavaScript tas i bruk.

av macdonst · macdonst/html-css-first

Bestått ★ 9.2/10

HTML CSS First — Presser frontend-bygg mot native HTML/CSS (details, popover, :has(), scroll-driven animation) før JavaScript tas i bruk.

Hva den gjør

En frontend kode-gjennomgang og bygge-referanse som sjekker, før skriving eller godkjenning av et JS-tungt UI-mønster, om et native HTML-element eller en moderne CSS-funksjon allerede gjør jobben - modaler via dialog/popover, trekkspill via details, faner via radio+:has(), skjema-validering via constraint-validation-attributter. Utløses ved bygging eller gjennomgang av UI-komponenter (modaler, trekkspill, faner, verktøytips, nedtrekksmenyer, karuseller, sticky headere) eller 'hvordan bygger jeg X i nettleseren'-spørsmål.

Testrapport

Bygget og rendret samme FAQ-trekkspill to ganger i en ekte nettleser: basis JS-versjonen trenger ~15 linjer med klikk-håndteringskode og blir helt død med JS deaktivert, mens ferdighetens <details name="faq">-versjon får jevn CSS-animasjon OG native gjensidig utelukkende åpen/lukking gratis, verifisert live uten noe JavaScript festet.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

/html-css-firstPresser frontend-bygg mot native HTML/CSS (details, popover, :has(), scroll-driven animation) før JavaScript tas i bruk.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

Build a FAQ accordion that only opens one item at a time, no JS needed
Review this modal component and tell me if I can drop the JavaScript
How do I build tabs using just radio buttons and CSS instead of JS

Full rapport →