effective-html
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
Effective HTML is a collection of six agent skills designed to help AI assistants generate self-contained HTML artifacts including wireframes, interactive prototypes, diagrams, and project plans. Each skill provides focused guidance that separates creative direction from technical reliability, ensuring outputs are responsive, accessible, and browser-verified. The skills can be used individually or as a complete set, and work by routing requests through specialized workflows that maintain appropriate fidelity levels—wireframes stay intentionally low-fidelity while prototypes implement realistic interactions and states.
Key Features
Use Cases
- 01Generating low-fidelity wireframes to validate content hierarchy and navigation flows
- 02Building working interactive prototypes to demonstrate user flows and interface behavior
- 03Creating technical diagrams for architecture, sequences, and system relationships
- 04Producing project plans and roadmaps that maintain original commitments
- 05Designing landing pages, reports, and presentation materials with consistent quality
- 06Routing complex HTML requests to the appropriate specialist skill for optimal results
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
effective-html — FAQ
What is effective-html?+
Effective HTML is a set of agent skills that help AI assistants create useful HTML artifacts including wireframes, prototypes, diagrams, and plans. Each skill provides structured workflows that ensure outputs are self-contained, responsive, and accessible.
How do I install effective-html agent skills?+
Install the full collection with 'npx skills add plannotator/effective-html' or add individual skills using the --skill flag followed by the skill name (design-artifact, html-wireframe, html-prototype, etc.). For Claude Code, use '/plugin marketplace add plannotator/effective-html' then '/plugin install plannotator-effective-html@effective-html'.
Which AI clients work with effective-html?+
The skills work with Claude Code (as a plugin) and Codex (as a plugin), and can be used as reference documentation with any AI assistant that can read the skill files.
Do I need API keys to use effective-html?+
No API keys are required. The skills are reference documents and workflows that guide the AI assistant; they don't make external API calls.
Is effective-html free to use?+
Yes, effective-html is open source and freely available on GitHub under the plannotator organization.
Can I use effective-html without installing it?+
Yes, the repository is designed to be used as a reference first. You can point your AI assistant to the skill files directly or follow the Effective HTML guide at effectivehtml.com without any installation.
How do I install effective-html?+
Open the source repository on GitHub and follow its README. effective-html is a skill — MCP Agents Market links you directly to the official repo.
Is effective-html free?+
effective-html is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.