Skill1.4k estrellas del repoactualizado today

html

This skill generates a self-contained HTML file tailored to user requests, applying established design principles for alignment, visual density, and tone. Use it when creating reports, explainers, comparisons, interactive prototypes, or other content best delivered as a single HTML document rather than diagrams or structured plans. The output includes built-in dark mode support with CSS variables, a theme toggle, and localStorage persistence.

Ver fuente Repositorio: effective-html

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/plannotator/effective-html /tmp/html && cp -r /tmp/html/skills/html ~/.claude/skills/html

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# HTML

Review the files throughout `references/html-effectiveness/`.

Create an HTML file for whatever the user is describing. Use the references as best you can to match alignment — style, density, and tone.

Always include dark mode: hand-rolled CSS variables on `:root` / `html.dark`, a small theme toggle button, `localStorage` persistence, and an apply-before-paint script in `<head>` (default to `prefers-color-scheme`).

Del mismo repositorio

html-diagramSkill

Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.

html-planSkill

Create a self-contained HTML plan that is pragmatic, simple, and visually organized. Use when the user wants a plan page in the effective HTML style, wants the writing kept close to what they gave you, or wants the grammar cleaned up without turning it into a whole bigger thing.