HTML CSS First
Przesuwa budowę frontendową w kierunku natywnych HTML/CSS (detale, popover, :has(), animacja sterowana przewijaniem) zanim sięgnie po JS.
Testowano · Działa
Co robi ten skill
Narzędzie do przeglądu kodu frontendowego i referencji budowy, które sprawdza, zanim napisze lub zatwierdzi jakikolwiek wzorzec UI intensywnie wykorzystujący JS, czy natywny element HTML lub nowoczesna funkcja CSS już wykonuje zadanie — modale przez dialog/popover, akordeony przez details, karty przez radio+:has(), walidacja formularzy przez atrybuty constraint-validation. Aktywuje się przy budowaniu lub przeglądaniu komponentów UI (modale, akordeony, karty, podpowiedzi, rozwijane listy, karuzele, nagłówki przyklejone) lub pytaniach 'jak zbudować X w przeglądarce'.
Raport z testu
Zbudowano i wyrenderowano ten sam akordeon FAQ dwukrotnie w rzeczywistej przeglądarce: wersja JS baseline wymaga około 15 linii kodu obsługi kliknięć i całkowicie przestaje działać przy wyłączonym JS, podczas gdy wersja <details name="faq"> umiejętności otrzymuje płynną animację CSS ORAZ natywne, wzajemnie wykluczające się otwieranie/zamykanie za darmo, zweryfikowane na żywo bez żadnego dołączonego JavaScript.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/html-css-firstPrzesuwa budowę frontendową w kierunku natywnych HTML/CSS (detale, popover, :has(), animacja sterowana przewijaniem) zanim sięgnie po JS.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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