SkillProof tested Claude skills

HTML CSS First

Empuja las compilaciones frontend hacia HTML/CSS nativo (detalles, popover, :has(), animación controlada por scroll) antes de recurrir a JS.

Por macdonst · macdonst/html-css-first

Probado · Funciona ★ 9.2/10

HTML CSS First — Empuja las compilaciones frontend hacia HTML/CSS nativo (detalles, popover, :has(), animación controlada por scroll) antes de recurrir a JS.

Qué hace

Una referencia de revisión de código y compilación frontend que verifica, antes de escribir o aprobar cualquier patrón de UI intensivo en JS, si un elemento HTML nativo o una característica CSS moderna ya hacen el trabajo — modales a través de dialog/popover, acordeones a través de details, pestañas a través de radio+:has(), validación de formularios a través de atributos constraint-validation. Se activa al construir o revisar componentes de UI (modales, acordeones, pestañas, tooltips, dropdowns, carruseles, encabezados fijos) o preguntas de 'cómo construyo X en el navegador'.

Informe de la prueba

Construyó y renderizó el mismo acordeón de FAQ dos veces en un navegador real: la versión JS base necesita ~15 líneas de código de manejador de clics y queda completamente muerta con JS deshabilitado, mientras que la versión <details name="faq"> de la habilidad obtiene animación CSS suave Y apertura/cierre mutuo nativo gratis, verificado en vivo sin ningún JavaScript adjunto.

Probado el: 2026-07-16 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

  • /html-css-firstEmpuja las compilaciones frontend hacia HTML/CSS nativo (detalles, popover, :has(), animación controlada por scroll) antes de recurrir a JS.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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

Informe completo →