HTML
Create or redesign self-contained single-file HTML artifacts with a visual direction...
Install
npx skills add plannotator/effective-html --skill html -g -a claude-code -y- Repository
- plannotator/effective-html3.8k
- Category
- Design
- Updated
- 4d ago
- License
- MIT
- Context cost
- Lightabout 1,494 tokens
- Runs scripts
- No, instructions only
What it does
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.
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-artifactwith 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-wireframewhen 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-prototypewhen 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-planwhen the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify. - Read and follow
html-diagramwhen relationships, sequence, topology, state, hierarchy, or system behavior are the main content. - Continue with
htmlfor reports, explainers, presentations, landing pages, data stories, tools, and mixed artifacts that do not have a clearer owner.
These sibling links are the nesting mechanism when the collection is installed together. If a specialized skill is unavailable, continue here and load the closest reference below. Do not make the user install another skill before completing the request.
