SkillProof tested Claude skills

HTML CSS First

Pousse les constructions frontend vers HTML/CSS natif (détails, popover, :has(), animation pilotée par défilement) avant de recourir au JS.

par macdonst · macdonst/html-css-first

Testé · Fonctionne ★ 9.2/10

HTML CSS First — Pousse les constructions frontend vers HTML/CSS natif (détails, popover, :has(), animation pilotée par défilement) avant de recourir au JS.

Ce que fait

Une référence de revue de code et de construction frontend qui vérifie, avant d'écrire ou d'approuver tout schéma d'interface utilisateur lourd en JS, si un élément HTML natif ou une fonctionnalité CSS moderne fait déjà le travail — modales via dialog/popover, accordéons via details, onglets via radio+:has(), validation de formulaire via attributs constraint-validation. Se déclenche lors de la construction ou de la revue de composants d'interface utilisateur (modales, accordéons, onglets, infobulles, menus déroulants, carrousels, en-têtes collants) ou de questions du type 'comment construire X dans le navigateur'.

Rapport de test

A construit et rendu le même accordéon FAQ deux fois dans un vrai navigateur : la version JS de base nécessite environ 15 lignes de code de gestionnaire de clic et devient complètement morte si JS est désactivé, tandis que la version <details name="faq"> de la compétence obtient une animation CSS fluide ET une ouverture/fermeture mutuellement exclusive native gratuitement, vérifiée en direct sans aucun JavaScript attaché.

Testé le: 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

Commandes et exemples de prompts

  • /html-css-firstPousse les constructions frontend vers HTML/CSS natif (détails, popover, :has(), animation pilotée par défilement) avant de recourir au JS.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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

Rapport complet →