SkillFoxx

Type a name, a task or a service

Effective HTML

Six focused skills for building self-contained HTML artifacts: wireframes, prototypes, mockups, plans and diagrams

Skill

Low risk

We rate an entry low when it mostly gives the agent instructions and reference material.

Why this level

  • The skills produce self-contained static HTML files and read project context for visual direction
All reasons and checks

plannotator/effective-htmlAuthor:Plannotator

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/effective-html

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Assembled automatically, review before installing.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .claude/skills
cp -R "$tmp/skills/html" .claude/skills/html
cp -R "$tmp/skills/design-artifact" .claude/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .claude/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .claude/skills/html-prototype
cp -R "$tmp/skills/html-plan" .claude/skills/html-plan
cp -R "$tmp/skills/html-diagram" .claude/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .github/skills
cp -R "$tmp/skills/html" .github/skills/html
cp -R "$tmp/skills/design-artifact" .github/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .github/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .github/skills/html-prototype
cp -R "$tmp/skills/html-plan" .github/skills/html-plan
cp -R "$tmp/skills/html-diagram" .github/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .devin/skills
cp -R "$tmp/skills/html" .devin/skills/html
cp -R "$tmp/skills/design-artifact" .devin/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .devin/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .devin/skills/html-prototype
cp -R "$tmp/skills/html-plan" .devin/skills/html-plan
cp -R "$tmp/skills/html-diagram" .devin/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .cline/skills
cp -R "$tmp/skills/html" .cline/skills/html
cp -R "$tmp/skills/design-artifact" .cline/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .cline/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .cline/skills/html-prototype
cp -R "$tmp/skills/html-plan" .cline/skills/html-plan
cp -R "$tmp/skills/html-diagram" .cline/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .roo/skills
cp -R "$tmp/skills/html" .roo/skills/html
cp -R "$tmp/skills/design-artifact" .roo/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .roo/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .roo/skills/html-prototype
cp -R "$tmp/skills/html-plan" .roo/skills/html-plan
cp -R "$tmp/skills/html-diagram" .roo/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagram

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 26, 2026, commit 2ac1dfe.

Text for your agent

Install the set: npx skills add plannotator/effective-html. Or as a Claude Code plugin: /plugin marketplace add plannotator/effective-html, then /plugin install plannotator-effective-html@effective-html.

Other ways from the author
npx skills add plannotator/effective-html

Installs the whole collection. For one skill add --skill html-wireframe. To list skills use --list.

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 layout

Limitations

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.

Security check

  • The skills produce self-contained static HTML files and read project context for visual direction

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.

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.

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.

Official

A self-hosted knowledge base with block-level references and a built-in MCP server for connecting AI agents to your notes

MCP serverMedium risk46.5K
Editors’ pick

A CLI for every Google Workspace API with JSON output and agent skills: Drive, Gmail, Calendar, Sheets and more

CLIHigh risk31.2K
Editors’ pick

Local search over Markdown notes, docs and meeting transcripts: keywords, semantic search and reranking, with an MCP server

CLIMedium riskNo VPN needed30.1K
Editors’ pick

A task manager for AI-driven development: breaks a PRD into dependent tasks and guides the agent through them via MCP or CLI

MCP serverMedium risk28.1K
Foxx AIEffective HTML

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.