LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.
Install HTML
$ npx skills add plannotator/effective-html --skill html -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install plannotator/effective-html html --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html .claude/skills/html && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .claude/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/plannotator/effective-html/tree/main/skills/htmlType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add plannotator/effective-html --skill html -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install plannotator/effective-html html --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/html .agents/skills/html && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .agents/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add plannotator/effective-html --skill html -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install plannotator/effective-html html --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/html .cursor/skills/html && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .cursor/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/plannotator/effective-html.git --path skills/html--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add plannotator/effective-html --skill html -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install plannotator/effective-html html --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/html .gemini/skills/html && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .gemini/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install plannotator/effective-html htmlInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add plannotator/effective-html --skill html -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/html .github/skills/html && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .github/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add plannotator/effective-html --skill html -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install plannotator/effective-html html --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/plannotator/effective-html.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/html .opencode/skills/html && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "html" agent skill from https://github.com/plannotator/effective-html/tree/main/skills/html into .opencode/skills/html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
html- GitHub stars
- 3.6k
- Token cost
- ~1.6k tokens
- SKILL.md length
- 798 words
- Files
- 7 (incl. references)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- MIT
At a glance
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.
- Works in 4 steps: The user's explicit visual and… → The project's established design system… → The subject matter, audience, and… → …
- HTML is the deliverable for a report
- SKILL.md covers Route the request first, Read the room before designing, Load only the guidance the… and Build contract, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
HTML is an agent skill from 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…
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `agents/openai.yaml`, `references/charts-and-data.md` and `references/creative-direction.md`).
It sits in Frontend & Design, covering HTML artifacts, UI design and Landing pages. The repository describes itself as: Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams. The licence is MIT.
When your agent uses it
- HTML is the deliverable for a report
- Ordinary application implementation when a standalone HTML file is not the deliverable
Example prompts
- “/html”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- The user's explicit visual and functional instructions.
- The project's established design system and conventions.
- The subject matter, audience, and purpose of this artifact.
- Your own design judgment.
What it can do on your machine
Read from SKILL.md and the folder at commit 2ac1dfe. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML loads about 1.6k tokens when it runs, and up to ~4.9k if it reads all its reference files. Until then it costs about 136 tokens; SKILL.md has 798 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from plannotator/effective-html at commit 2ac1dfe, republished under its MIT licence (© plannotator). 798 words, ~1,637 tokens.
Download SKILL.mdSave it as
.claude/skills/html/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- 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-artifactwith the chosen workflow when palette, type, composition, theming, or overall visual register remain open. It provides creative direction; it does not replace the specialist that owns fidelity, structure, or behavior. - Read and follow
html-wireframewhen structure, information hierarchy, navigation, or task flow is still unsettled. It should remain visibly low fidelity and may compare two or three layout directions. - Read and follow
html-prototypewhen the user needs a polished mockup or a working interactive flow. A mockup is the static fidelity mode inside that skill. - Read and follow
html-planwhen the artifact is primarily a plan, roadmap, implementation sequence, or rollout document whose source commitments must remain easy to verify. - Read and follow
html-diagramwhen relationships, sequence, topology, state, hierarchy, or system behavior are the main content. - Continue with
htmlfor reports, explainers, presentations, landing pages, data stories, tools, and mixed artifacts that do not have a clearer owner.
These sibling links are the nesting mechanism when the collection is installed together. If a specialized skill is unavailable, continue here and load the closest reference below. Do not make the user install another skill before completing the request.
Read the room before designing
Inspect the user's request and any material they supplied. When working in a repository, look for its design language in AGENTS.md, CLAUDE.md, design-system documentation, tokens, existing components, and nearby artifacts.
Authority runs in this order:
- The user's explicit visual and functional instructions.
- The project's established design system and conventions.
- The subject matter, audience, and purpose of this artifact.
- Your own design judgment.
Before coding, settle five things in working notes:
- Audience and job: who will use this, and what should they understand or do?
- Form: document, presentation, interface, diagram, or data visualization.
- Register: quiet and workmanlike, polished and editorial, or intentionally expressive.
- Fidelity: whether to preserve the user's structure and wording or synthesize more freely.
- Interaction: what benefits from exploration, sequencing, filtering, or motion, if anything.
If the project already answers the visual questions, follow it. Otherwise read
and compose design-artifact when it is
available. If the collection was installed without that sibling skill, read
references/creative-direction.md before
choosing the palette, type, composition, or motion.
Load only the guidance the artifact needs
- For reports, briefs, plans, explainers, and decks, read
references/documents-and-presentations.md. - For interfaces, calculators, and other tools that remain in this broad skill, read
references/interfaces.md. - For architecture, process, sequence, state, hierarchy, or concept diagrams, read
references/diagrams.md. - For quantitative charts, tables, metrics, or data stories, read
references/charts-and-data.md.
Requests can span forms. Read every reference that materially applies, then give the artifact one coherent direction.
Show full SKILL.md (308 more words)Show less
Build contract
- Produce one
.htmlfile with its essential CSS and JavaScript inline. It should work when opened directly, without a build step. Do not require a network connection unless the user permits external dependencies. - Use real content. Do not fill prominent space with placeholder copy, decorative statistics, or controls that do nothing.
- Let content determine structure. A sequence should read in order; a comparison should make differences easy to scan; an interface should expose state and actions; a diagram should make relationships legible.
- Use semantic HTML, responsive layout, accessible contrast, visible keyboard focus, and reduced-motion handling. Make interactive elements work with a keyboard.
- Keep the page body free of accidental horizontal overflow. Put intentionally broad content in a contained scrolling or pannable region.
- Define a small set of CSS tokens for the chosen direction and use them consistently. Tokens are an implementation tool, not a predetermined palette.
- Treat motion as explanation or feedback. If removing an animation loses no meaning or useful feedback, remove it.
- Follow the user's or project's theme policy. When none exists, give durable utility artifacts considered light and dark themes if that improves their use. A deliberate single-theme concept is valid.
Finish the work
Write the file to the requested location, or choose a clear filename in the current workspace. When browser tooling is available, open it and inspect a wide and narrow viewport. Exercise its controls, check the console, and fix clipping, overlap, illegible text, broken states, and accidental overflow.
Before delivery, run one originality check: if the subject were swapped for a neighboring topic, would the same visual concept still make just as much sense? If yes, the direction is too generic; revise the composition, type, color, imagery, or interaction so it belongs to this subject.
Return the absolute path and a short description of the artifact's visual and interaction choices.
© plannotator, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 6 other files (references) in skills/html of plannotator/effective-html.
- SKILL.md
- agents/openai.yaml
- references/charts-and-data.md
- references/creative-direction.md
- references/diagrams.md
- references/documents-and-presentations.md
- references/interfaces.md
Open the folder on GitHubat commit 2ac1dfe
Compare with similar skills
HTML next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HTML this skillplannotator/effective-html | 3.6k | — | ~1.6k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| UI UX Pro Maxsaoudi-h/solar-icons | 182 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Frontend Designanthropics/skills | 180k | 38 repos | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Cc DesignZeroZ-lab/cc-design | 827 | — | ~2.2k | Automated safety check: Notes | None |
Similar skills
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
- Official
Frontend Design
anthropics/skills
Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
More from plannotator/effective-html
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.
HTML Plan
plannotator/effective-html
Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability.
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.
Related
Categories
Questions about HTML
What does HTML do?
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. HTML is an agent skill from 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.
When should I use HTML?
HTML fits situations like: HTML is the deliverable for a report; ordinary application implementation when a standalone HTML file is not the deliverable.
How do I install HTML in Claude Code?
Run `npx skills add plannotator/effective-html --skill html -a claude-code`. Or copy the skill folder (skills/html in plannotator/effective-html) into .claude/skills/html in your project. Claude Code loads it when a task matches its description.
How do I install HTML in Codex?
Run `npx skills add plannotator/effective-html --skill html -a codex`. Or copy the skill folder (skills/html in plannotator/effective-html) into .agents/skills/html in your project. Codex loads it when a task matches its description.
Can I use HTML in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add plannotator/effective-html --skill html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html, .gemini/skills/html, .github/skills/html and .opencode/skills/html in your project.
What does HTML need to run?
SKILL.md names no scripts, command-line tools or credentials: HTML is instructions for the agent only.
Does HTML access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is HTML safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does HTML use?
HTML is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HTML use?
About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.3k tokens, read only when the agent opens those files.
What are the alternatives to HTML?
Skills that share tags, products or a category with HTML: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), UI UX Pro Max (saoudi-h/solar-icons, 182 stars), Frontend Design (anthropics/skills, 180k stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML?
plannotator (a GitHub organization) maintains it in plannotator/effective-html, which has 3,555 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 14, 2026.
Source: plannotator/effective-html on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.