Effective HTML

Los agentes de código suelen devolver paredes de Markdown cuando lo que te falta es ver jerarquía, flujo y estados. Estas skills desplazan el contexto a artefactos HTML autocontenidos: los abres en el navegador, los anotas y el prompt apunta a esos archivos en vez de reexplicar el diseño otra vez.

La dirección visual sale de la conversación, el proyecto y el público; no hay un estilo de casa impuesto. design-artifact aporta un proceso de diseño reutilizable. Los wireframes se quedan deliberadamente inacabados para que revises estructura, no píxeles. Los prototipos implementan un flujo creíble con estados, teclado y comportamiento adaptable. Los planes conservan los compromisos de la fuente. Los diagramas eligen el modelo visual que encaja con la relación que explicas. Cada pieza se espera accesible, autocontenida y comprobada en el navegador.

Seis skills opcionales e independientes

• html: peticiones amplias, informes, presentaciones, landings, herramientas y enrutado al especialista.
• html-wireframe: layouts de baja fidelidad para probar contenido, jerarquía, navegación y estructura adaptable.
• html-prototype: prototipos que funcionan, con estados realistas e interacción.
• html-plan: roadmaps, despliegues y secuencias de implementación.
• html-diagram: arquitectura, secuencia, procesos, estados, jerarquías y líneas temporales.
• design-artifact: dirección creativa según el tema, sin un look reutilizable forzado.

Puedes usar el repositorio solo como referencia, sin instalar nada, o cargar la colección en tu agente con npx skills, como plugin de Claude Code o de Codex. Cada skill funciona por separado.