SkillProof tested Claude skills

HTML CSS First

Pushes frontend builds toward native HTML/CSS (details, popover, :has(), scroll-driven animation) before reaching for JS.

von macdonst · macdonst/html-css-first

Getestet · Funktioniert ★ 9.2/10

HTML CSS First — Pushes frontend builds toward native HTML/CSS (details, popover, :has(), scroll-driven animation) before reaching for JS.

Was es kann

A frontend code-review and build reference that checks, before writing or approving any JS-heavy UI pattern, whether a native HTML element or modern CSS feature already does the job - modals via dialog/popover, accordions via details, tabs via radio+:has(), form validation via constraint-validation attributes. Triggers on building or reviewing UI components (modals, accordions, tabs, tooltips, dropdowns, carousels, sticky headers) or 'how do I build X in the browser' questions.

Testbericht

Built and rendered the same FAQ accordion twice in a real browser: the baseline JS version needs ~15 lines of click-handler code and goes completely dead with JS disabled, while the skill's <details name="faq"> version gets smooth CSS animation AND native mutually-exclusive open/close for free, verified live with zero JavaScript attached.

Getestet am: 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

Befehle & Beispiel-Prompts

  • /html-css-firstPushes frontend builds toward native HTML/CSS (details, popover, :has(), scroll-driven animation) before reaching for JS.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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

Vollständiger Testbericht (Englisch) →