Effective HTML skill
Six focused skills for building self-contained HTML artifacts: wireframes, prototypes, mockups, plans and diagrams
- 4,124 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills produce self-contained static HTML files and read project context for visual direction
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/effective-htmlDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills produce self-contained static HTML files and read project context for visual direction
This is third-party code. Review the repository files before installing.
What it does
The set gives the agent six skills for single-file HTML artifacts that open without a build step and run from one file. The html skill reads the request and routes it to a specialist: html-wireframe for low-fidelity structure and navigation, html-prototype for working prototypes and mockups with real states, html-plan for plans and roadmaps, html-diagram for schemes and diagrams. The design-artifact skill sets a subject-specific visual direction without a single reusable house style. Each skill works on its own, and the repository can be read as a reference without installing anything.
Who it is for. For designers, product managers, engineers and writers who need visual HTML artifacts to discuss and validate ideas.
Good fit when
- You need a UI wireframe or prototype as a single HTML file
- You need a plan, roadmap or report in a visual form
- You need an architecture, process or state diagram
- You need a self-contained artifact for review without a build step or external dependencies
Not a fit when
- You need a full application, not a standalone HTML file
- The design already exists and only needs coding inside the project
Example request
Build an onboarding screen prototype as a single HTML file with working states and responsive layoutLimitations
The skills own a single self-contained HTML file, not integration into a codebase or production frontend. Verifying the result in a browser requires the agent to have browser tooling. The visual direction comes from the request and the project, so without a clear brief the result is less predictable.
How to disable. Uninstall the plannotator-effective-html plugin via /plugin, or remove the skill folders from ~/.claude/skills/ and the project directory.
FAQ
Do I have to install the whole set?
No. You can install a single skill, for example npx skills add plannotator/effective-html --skill html-wireframe, or use the repository as a reference without installing.
How does a wireframe differ from a prototype?
A wireframe stays intentionally low fidelity and tests structure, hierarchy and navigation. A prototype implements one credible flow with states and interaction.
Discussion
No questions or reviews yet.
Related
Skills19 skills: Claude Code builds an HTML page, you work with it in the browser and the answer returns to the agent with no copying
18 skills and 6 agents for UX strategy: from research and flows to accessibility, ethics and engineering handoff
Five skills from one author: arXiv reports, technical diagrams, a report site, a design system library and agent guardrails
cafe3310's personal skill collection: spec-driven project work, reviews, reports, browser, 3D and video in one repository
A collection of 26 agent skills: idea scoring, GEO audits, design systems, AI-text cleanup and plugin evaluation
A job-hunt skill bundle: JD decoding, template resumes, behavioral interview prep, offer comparison and negotiation
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Effective HTML (this card) | no | 4,124 | |
| Lavish Editor (lavish-axi) | no | 4,556 | the agent builds a plan or comparison as an HTML page |
| Design OS | yes | 1,879 | a workspace for Claude Code |
README in short
The README describes a collection of six optional skills for pragmatic visual artifacts and stresses that the repository can be used as a reference before any install. The html skill acts as a router and hands the request to a wireframe, prototype, plan or diagram specialist, while design-artifact supplies creative direction without a predetermined house style. Installation works via npx skills add, as a Claude Code plugin, or as a Codex plugin. Every artifact is made responsive, accessible, self-contained and verified in a browser. MIT licensed.
README badge
Original SKILL.md
--- name: html description: 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-artifact with the chosen workflow when palette, type, composition, theming, or overall visual register remain open. - Read and follow html-wireframe when structure, information hierarchy, navigation, or task flow is still unsettled. - Read and follow html-prototype when the user needs a polished mockup or a working interactive flow. - Read and follow html-plan when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document. - Read and follow html-diagram when relationships, sequence, topology, state, hierarchy, or system behavior are the main content.