plannotator/effective-html
3 skills5.9k installs4.8k starsGitHub
Install
npx skills add https://github.com/plannotator/effective-htmlSkills in this repo
1Html DiagramThe html-diagram skill is designed for 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. HTML Diagram Review the SVG diagrams used throughout references/html-effectiveness/. There are a bunch in there, and some of them are focused on architecture and whatnot. Invoke when the user 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.2.1kinstalls2Html PlanThe html-plan skill 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. # HTML Plan Review the files throughout `references/html-effectiveness/`. After reviewing them, create an HTML file for the plan in a similar style. Keep it pragmatic and simple. 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`). # HTML Plan Review the files throughout `references/html-effectiveness/`. After reviewing them, create an HTML file for the plan in a similar style. Keep it pragmatic and simple. 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`).1.9kinstalls3HtmlThe html skill create a self-contained HTML file for whatever the user is describing, in the effective HTML style. Use when the user wants an HTML artifact that isn't specifically a diagram or a plan - a report, explainer, comparison, deck, prototype, or anything else best delivered as one HTML file. # 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`). # 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`).1.8kinstalls