html

Featured

Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a standalone HTML file is not the deliverable.

Web & Frontend 3,104 stars 215 forks Updated 1 months ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
100
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# HTML Build one self-contained HTML file that makes the subject clearer, easier to use, or easier to understand. The standard is consistent care, not a consistent look. Do not reproduce a house palette, typography stack, card system, or layout from prior runs. ## Route the request first Use the narrowest skill that owns the main review question: - Read and compose [`design-artifact`](../design-artifact/SKILL.md) with the chosen workflow when palette, type, composition, theming, or overall visual register remain open. It provides creative direction; it does not replace the specialist that owns fidelity, structure, or behavior. - Read and follow [`html-wireframe`](../html-wireframe/SKILL.md) when structure, information hierarchy, navigation, or task flow is still unsettled. It should remain visibly low fidelity and may compare two or three layout directions. - Read and follow [`html-prototype`](../html-prototype/SKILL.md) when the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill. - Read and follow [`html-plan`](../html-plan/SKILL.md) when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify. - Read and follow [`html-diagram`](../html-diagram/SKILL.md) when relationships, sequence, topology, state, hierarchy, or system behavior are the main content. - Continue with `html` for reports, explainers, presentations, landin...

Details

Author
plannotator
Repository
plannotator/effective-html
Created
3 months ago
Last Updated
1 months ago
Language
HTML
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

html-artifacts

Produce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "summary," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "incident report," "playground," or a one-off "editor" or "tool" for triaging/reordering/tuning anything — even if they don't explicitly say "HTML" or "artifact." Also trigger when the user asks Claude to "explain," "summarize," "compare," "explore options for," "brainstorm directions for," or "walk through" a non-trivial topic. Stay in markdown only for short conversational replies, code-only outputs, terminal-style command answers, and content that's genuinely just a few sentences.

1 Updated today
dovydaskarbutovskis20-art
Web & Frontend Listed

crafting-html

Use when producing a standalone HTML artifact that is not already covered by another workbench skill (writing-spec, writing-plans, brainstorming, systematic-debugging) or by research:research. Covers PR walkthroughs, code explainers, slide decks, status and incident reports, design prototypes, SVG illustrations, custom editing interfaces, and similar single-file HTML outputs. Bundles 20 reference examples plus an index file (21 files total) for inspiration; read individual files lazily, not all at once.

0 Updated 1 months ago
pgoell
AI & Automation Listed

htmlize

Technical explanation and HTML artifact protocol. Decides whether a deliverable beats markdown, models the reader's questions, chooses a single page or multi-page briefing site, builds it against a craft baseline, and reviews existing artifacts. Fires on three branches: an explicit ask for an HTML, visual, interactive, or site-level deliverable; a plan, report, system explainer, comparison, deck, or diagram whose structure is lost in linear markdown; and improving an HTML deliverable that looks generic, fragmented, or hard to navigate. Production frontend is kiln's territory; a growing knowledge base is wiki-it's; hand-maintained project docs should remain markdown.

0 Updated 1 months ago
lroolle