html-plan
html-plan is a skill in plannotator/effective-html, last changed 2 Aug 2026. It is instructions only: no scripts, no named hosts and no pre-approved tools. Our pattern check flagged nothing at commit 975b047 on 27 Oct 2026.
Pattern check: nothing flagged · commit 975b047 · 27 Oct 2026
InstallDirect-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 independently from a general request.
- Licence
- MIT
- Repo stars
- 3.8k
- Folder last changed
- 2 Aug 2026 (opens in a new tab)
- Publisher
- plannotator
- Files
- 2 files
- Checked
- 975b047 (opens in a new tab) · 27 Oct 2026
Install
Each tab says whether it installs commit 975b047, the one we checked, or the latest version.
No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.
Pinned to commit 975b047, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .claude/skills &&
mkdir .claude/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .claude/skills/html-plan/ &&
rm -rf "$tmp"If Claude Code was already running and this created the skills folder, run /reload-skills.
Pinned to commit 975b047, the one we checked.
Skills in the Claude apps belong to your account rather than to a project.
Make html-plan.zip, with the skill folder at the top level:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
out="$(mktemp -d)" &&
cp -R "$tmp"/skills/html-plan "$out"/html-plan &&
(cd "$out" && zip -qr - html-plan) > html-plan.zip &&
rm -rf "$tmp" "$out"In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose html-plan.zip.
On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.
Pinned to commit 975b047, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .agents/skills &&
mkdir .agents/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .agents/skills/html-plan/ &&
rm -rf "$tmp"Codex picks up new skills on its own; restart it if this one does not appear.
Pinned to commit 975b047, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .cursor/skills &&
mkdir .cursor/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .cursor/skills/html-plan/ &&
rm -rf "$tmp"Pinned to commit 975b047, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .github/skills &&
mkdir .github/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .github/skills/html-plan/ &&
rm -rf "$tmp"In a running Copilot CLI session, run /skills reload.
Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.
gh skill install plannotator/effective-html skills/html-plan/SKILL.md@975b047f6da6874e176db54f048c0c31c30e9f65 --agent github-copilot --scope projectPinned to commit 975b047, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .gemini/skills &&
mkdir .gemini/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .gemini/skills/html-plan/ &&
rm -rf "$tmp"In a running session, run /skills reload.
Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.
gemini skills install https://github.com/plannotator/effective-html.git --path skills/html-plan --scope workspacePinned to commit 975b047, the one we checked.
Codex, Cursor, Copilot, VS Code, Gemini CLI, OpenCode, Goose, Amp and Zed all read .agents/skills; Claude Code and Kiro list only their own folders.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin 975b047f6da6874e176db54f048c0c31c30e9f65 &&
git -C "$tmp" sparse-checkout set -- skills/html-plan &&
git -C "$tmp" checkout -q 975b047f6da6874e176db54f048c0c31c30e9f65 &&
mkdir -p .agents/skills &&
mkdir .agents/skills/html-plan &&
cp -R "$tmp"/skills/html-plan/. .agents/skills/html-plan/ &&
rm -rf "$tmp"Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.
npx skills@1.7.4 add plannotator/effective-html --skill html-planWhat it can touch
From the files and frontmatter at commit 975b047. This is how much a skill can do, not whether it is risky.
What it can touch: Instructions only
It is instructions only: no scripts, no named hosts and no pre-approved tools.
Pattern check
Pattern check: nothing flagged · commit 975b047 · 27 Oct 2026
We checked every text file in this skill, at commit 975b047 on 27 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.
Format check
Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.
Agent Skills specPasses with warnings
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Warning
Paths that may not work once the skill is installed: line 14: ../design-artifact/SKILL.md (outside the skill folder). B6
Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Note
There is no license field, so readers can't tell whether they may reuse the skill. O2
Fix: Add license: with an SPDX name such as MIT or Apache-2.0, or the name of a bundled licence file.
- Warning
Claude CodePasses with warnings
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Warning
Paths that may not work once the skill is installed: line 14: ../design-artifact/SKILL.md (outside the skill folder). B6
Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Warning
Claude apps & API uploadPasses with warnings
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Warning
Paths that may not work once the skill is installed: line 14: ../design-artifact/SKILL.md (outside the skill folder). B6
Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Note
The description is 329 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Warning
OpenAI (Codex & API)Passes with warnings
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Warning
Paths that may not work once the skill is installed: line 14: ../design-artifact/SKILL.md (outside the skill folder). B6
Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Warning
VS Code & CopilotPasses with warnings
VS Code reads skills one folder below .github/skills, .claude/skills or .agents/skills and falls back to the folder name when the name is missing or differs; GitHub's Copilot docs require the exact name SKILL.md.
- Warning
Paths that may not work once the skill is installed: line 14: ../design-artifact/SKILL.md (outside the skill folder). B6
Fix: Use forward-slash paths relative to SKILL.md, and copy shared files into the skill.
- Warning
SKILL.md
Files
2 files
| Path | Size |
|---|---|
| SKILL.md (opens in a new tab) | 2.4 KB |
| agents/openai.yaml (opens in a new tab) | 252 B |
More from plannotator/effective-html
big-pics-little-words
plannotator/effective-html
Explain the current subject in HTML with large visuals and minimal text while preserving key details.
- Instructions only
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 15 Oct 2026
design-artifact
plannotator/effective-html
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 must not look generically AI-generated.
- Runs shell commands
- Reaches the network
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 3 Aug 2026
html
plannotator/effective-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 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.
- Instructions only
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 2 Aug 2026
html-diagram
plannotator/effective-html
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 not activate independently from a general request.
- Instructions only
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 2 Aug 2026
html-prototype
plannotator/effective-html
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 here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill.
- Names web addresses
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 2 Aug 2026
html-wireframe
plannotator/effective-html
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. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.
- Names web addresses
Pattern check: Nothing flaggedMIT · 3.8k repo stars · Updated 2 Aug 2026
