SkillProof tested Claude skills

HTML CSS First

Skubber frontend-builds mod native HTML/CSS (detaljer, popover, :has(), scroll-drevet animation) før brug af JS.

Af macdonst · macdonst/html-css-first

Testet · Virker ★ 9.2/10

HTML CSS First — Skubber frontend-builds mod native HTML/CSS (detaljer, popover, :has(), scroll-drevet animation) før brug af JS.

Hvad det gør

En frontend kode-gennemgang og build reference, der tjekker, før der skrives eller godkendes et JS-tungt UI-mønster, om et native HTML-element eller en moderne CSS-funktion allerede gør jobbet - modals via dialog/popover, accordions via details, tabs via radio+:has(), formularvalidering via constraint-validation attributter. Udløses ved opbygning eller gennemgang af UI-komponenter (modals, accordions, tabs, tooltips, dropdowns, carousels, sticky headers) eller 'hvordan bygger jeg X i browseren'-spørgsmål.

Testrapport

Byggede og gengav den samme FAQ accordion to gange i en reel browser: baseline JS-versionen kræver ~15 linjer klik-håndteringskode og bliver fuldstændig død med JS deaktiveret, mens færdighedens <details name="faq"> version får glat CSS-animation OG native gensidigt-eksklusiv åben/luk gratis, verificeret live uden JavaScript tilknyttet.

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

Installation

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-firstSkubber frontend-builds mod native HTML/CSS (detaljer, popover, :has(), scroll-drevet animation) før brug af JS.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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

Læs hele rapporten →