HTML CSS First
Tlačí frontendové buildy k nativním HTML/CSS (detaily, popover, :has(), animace řízená scroll) před sáhnutím po JS.
Otestováno · Funguje
Co umí
Referenční nástroj pro kontrolu kódu a build frontendů, který před psaním nebo schválením jakéhokoli UI vzoru s velkým množstvím JS zkontroluje, zda již nativní HTML prvek nebo moderní CSS funkce plní svou práci — modální okna přes dialog/popover, akordeony přes detaily, karty přes radio+:has(), validace formulářů pomocí atributů constraint-validation. Spouští se při vytváření nebo kontrole UI komponent (modální okna, akordeony, karty, tooltipy, dropdowny, karusely, sticky hlavičky) nebo při otázkách typu 'jak mám postavit X v prohlížeči'.
Testovací report
Postavil a vykreslil stejný FAQ akordeon dvakrát v reálném prohlížeči: základní JS verze potřebuje ~15 řádků kódu pro obsluhu kliknutí a zcela se stane nefunkční při vypnutém JS, zatímco verze <details name="faq"> dovednosti získává plynulou CSS animaci A nativní vzájemně exkluzivní otevírání/zavírání zdarma, ověřeno živě bez připojeného JavaScriptu.
Testováno: 2026-07-16 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/html-css-firstTlačí frontendové buildy k nativním HTML/CSS (detaily, popover, :has(), animace řízená scroll) před sáhnutím po JS.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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