SkillProof tested Claude skills

HTML CSS First

Duwt frontend-builds naar native HTML/CSS (details, popover, :has(), scroll-gedreven animatie) voordat er naar JS wordt gegrepen.

Door macdonst · macdonst/html-css-first

Getest · Werkt ★ 9.2/10

HTML CSS First — Duwt frontend-builds naar native HTML/CSS (details, popover, :has(), scroll-gedreven animatie) voordat er naar JS wordt gegrepen.

Wat het doet

Een frontend code-review en build-referentie die controleert, voordat er enige JS-intensieve UI-patroon wordt geschreven of goedgekeurd, of een native HTML-element of moderne CSS-functie de taak al uitvoert — modale vensters via dialog/popover, accordeons via details, tabbladen via radio+:has(), formuliervalidatie via constraint-validation attributen. Wordt geactiveerd bij het bouwen of beoordelen van UI-componenten (modale vensters, accordeons, tabbladen, tooltips, dropdowns, carrousels, sticky headers) of vragen als 'hoe bouw ik X in de browser'.

Testrapport

Dezelfde FAQ-accordeon twee keer gebouwd en weergegeven in een echte browser: de basis JS-versie heeft ongeveer 15 regels click-handler code nodig en wordt volledig onbruikbaar met JS uitgeschakeld, terwijl de <details name="faq">-versie van de skill soepele CSS-animatie EN native wederzijds exclusieve open/sluit gratis krijgt, live geverifieerd zonder enige JavaScript bijgevoegd.

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

Installatie

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

Commando's en voorbeeldprompts

  • /html-css-firstDuwt frontend-builds naar native HTML/CSS (details, popover, :has(), scroll-gedreven animatie) voordat er naar JS wordt gegrepen.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →