plannotator/effective-html: 6 Agent Skills
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
| Repository | plannotator/effective-html · website |
|---|---|
| GitHub stars | 3,576 |
| Skills | 6 |
| Category | Design and frontend |
| License | MIT |
| Last updated | Sep 14, 2026 |
| Install counts | plannotator/effective-html on skills.sh, Vercel's skills directory, which shows installs and security audits per skill |
Install plannotator/effective-html
| All skills, any agent | npx skills add plannotator/effective-html |
|---|---|
| One skill | npx skills add plannotator/effective-html --skill design-artifact |
| Only for Claude Code | npx skills add plannotator/effective-html -a claude-code, or copy a skill folder to ~/.claude/skills/ (all projects) or .claude/skills/ (one project) |
npx skills is the open-source skills CLI; it asks which agents to install for. Skills can include scripts that your agent will run: read a skill before installing it, as you would any code.
Skills in plannotator/effective-html
| Skill | What it does |
|---|---|
| design-artifact | Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output… |
| html-diagram | Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do… |
| html-plan | Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a plan request here. Do not activate… |
| html-prototype | Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request… |
| html-wireframe | Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here.… |
| html | 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… |
Names and descriptions come from each skill's SKILL.md and are written by the pack's authors.
More design and frontend skill packs
| # | Skill pack | Skills | GitHub stars | Updated |
|---|---|---|---|---|
| 1 |
Leonxlnx/taste-skill Taste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop
|
13 | 93.8K | 2026-10-08 |
| 2 |
tt-a1i/archify Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
|
2 | 80K | 2026-10-08 |
| 3 |
openai/skills Skills Catalog for Codex
|
44 | 27.9K | 2026-09-08 |
| 4 |
teng-lin/notebooklm-py Unofficial Python API and agentic skill for Google Gemini Notebook. Full programmatic access to NotebookLM's features—including c…
|
1 | 19.7K | 2026-10-07 |
| 5 |
JimLiu/baoyu-design Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wirefr…
|
2 | 4,264 | 2026-09-23 |
| 6 |
glitternetwork/pinme Deploy Your Frontend in a Single Command. Claude Code Skills supported.
|
7 | 3,747 | 2026-09-12 |