HTML CSS First

Pushar frontend-byggen mot native HTML/CSS (detaljer, popover, :has(), scroll-drivna animationer) innan JavaScript används.

av macdonst · macdonst/html-css-first

Testad · Fungerar ★ 9.2/10

HTML CSS First — Pushar frontend-byggen mot native HTML/CSS (detaljer, popover, :has(), scroll-drivna animationer) innan JavaScript används.

Vad den gör

En frontend kodgransknings- och byggreferens som kontrollerar, innan någon JavaScript-tung UI-mönster skrivs eller godkänns, om ett native HTML-element eller en modern CSS-funktion redan gör jobbet - modaler via dialog/popover, dragspel via details, flikar via radio+:has(), formulärvalidering via constraint-validation-attribut. Triggar på att bygga eller granska UI-komponenter (modaler, dragspel, flikar, verktygstips, menyer, karuseller, klistriga rubriker) eller frågor om 'hur bygger jag X i webbläsaren'.

Testrapport

Byggde och renderade samma FAQ-dragspel två gånger i en riktig webbläsare: baslinje-JS-versionen behöver cirka 15 rader klickhanteringskod och blir helt död med JS inaktiverat, medan färdighetens <details name="faq">-version får smidig CSS-animation OCH native ömsesidigt exklusiv öppen/stäng för gratis, verifierad live utan någon JavaScript ansluten.

Testad: 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

Kommandon och exempelprompter

/html-css-firstPushar frontend-byggen mot native HTML/CSS (detaljer, popover, :has(), scroll-drivna animationer) innan JavaScript används.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →