New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HTML Explainer

by greenfield-inc in greenfield-inc/Pane

The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm…

Custom licenceAuto-check: notesFrontend & Design

Install HTML Explainer

skills CLI
$ npx skills add greenfield-inc/Pane --skill html-explainer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install greenfield-inc/Pane html-explainer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/greenfield-inc/Pane.git skills-src && mkdir -p .claude/skills && cp -r skills-src/main/src/services/paneChatBundle/skills/html-explainer .claude/skills/html-explainer && rm -rf skills-src

Use ~/.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/

Facts

Skill name
html-explainer
GitHub stars
519
Token cost
~1.6k tokens
SKILL.md length
798 words
Files
1
Skills in repo
35
Repo updated
First seen
Licence
Custom licence

At a glance

The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm…

  • Works in 6 steps: The drawings could carry the page alone:… → Renders complete with JavaScript… → Nothing is fetched: no src, href, or… → …
  • A skills instructions say to render its output per the html-explainer standards
  • SKILL.md covers Task: $ARGUMENTS, The file, Tokens and Drawings, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

HTML Explainer is an agent skill from greenfield-inc/Pane. The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm, graphic-first look. Use when a skill's instructions say to render its output per the html-explainer standards, or when the user asks for an HTML explainer of anything and no more specific skill applies.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Typography, Design tokens and HTML artifacts. The repository describes itself as: Terminal-first, open-source AI agent manager for any CLI agent (agent agnostic), any OS (mac, windows, linux). The Open-Source Agentic Development Environment for running…

When your agent uses it

  • A skills instructions say to render its output per the html-explainer standards
  • The user asks for an HTML explainer of anything and no more specific skill applies

Example prompts

  • “/html-explainer”

Requirements

  • Pre-approved tools (allowed-tools): Read, Grep, Glob, Bash, Write

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. The drawings could carry the page alone: a reader who skims only
  2. Renders complete with JavaScript disabled and every details
  3. Nothing is fetched: no src, href, or url() that loads an
  4. Both color schemes hold: readable in light and dark.
  5. Every fact on the page came from the caller's material; the page
  6. One h1, sections in reading order, nothing beyond the component

What it can do on your machine

Read from SKILL.md and the folder at commit b08541d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Glob
    • Bash
    • Write

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

    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 Explainer loads about 1.6k tokens when it runs. Until then it costs about 104 tokens; SKILL.md has 798 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~104
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Grep, Glob, Bash, Write

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 798 words (~1,603 tokens).

“A page for a person is pictures interrupted by words. The diagram carries the argument and the prose annotates it, the way a whiteboard sketch carries a design review; a section that has no visual either earns its place in…”

— opening of SKILL.md by greenfield-inc, Custom licence
name
html-explainer
allowed-tools
Read, Grep, Glob, Bash, Write
argument-hint
[what to explain, when invoked directly]

Read the full SKILL.md on GitHub

Files

Just SKILL.md in main/src/services/paneChatBundle/skills/html-explainer of greenfield-inc/Pane.

Open the folder on GitHubat commit b08541d

Compare with similar skills

HTML Explainer 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.

HTML Explainer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Explainer this skillgreenfield-inc/Pane519—~1.6kAutomated safety check: NotesCustom licence
Concept DiagramsTommy-yw/RunbookHermes5463 repos~4.3kAutomated safety check: PassMIT
Design Systemaffaan-m/ECC275k—~698Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Stitch Taste Design Systemgoogle-labs-code/stitch-skills8.4k15 repos~3.1kAutomated safety check: PassApache-2.0
Scalar Design Systemscalar/scalar16k—~2.7kAutomated safety check: PassMIT

Similar skills

  • Concept Diagrams

    Tommy-yw/RunbookHermes

    Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark…

    546 GitHub starsUsed in 3 repos~4.3k tokens
    Frontend & DesignAuto-check passed

  • Design System

    affaan-m/ECC

    Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…

    275k GitHub stars~698 tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Stitch Taste Design System

    google-labs-code/stitch-skills

    Official

    Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.

    8.4k GitHub starsUsed in 15 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Scalar Design System

    scalar/scalar

    Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

    16k GitHub stars~2.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

More from greenfield-inc/Pane

All 35 skills in this repo

  • Page

    greenfield-inc/Pane

    House standard for any HTML page written for a person. An agent skill from greenfield-inc/Pane.

    519 GitHub stars~759 tokensUpdated today
    Auto-check passed

  • Session Trace

    greenfield-inc/Pane

    Publish an agent session as a readable trace page in Grain, with the story, key moments, every request and step on a timeline, subagents, and the pull requests it opened.

    519 GitHub stars~836 tokensUpdated today
    Auto-check passed

  • Discussion

    greenfield-inc/Pane

    Have an interactive discussion about a topic, approach, feature, or bug without making code changes.

    519 GitHub stars~666 tokensUpdated today
    Auto-check passed

  • Excalidraw PR Diagrams

    greenfield-inc/Pane

    Create Excalidraw diagram JSON files and PR visual overviews that make visual arguments.

    519 GitHub stars~9.4k tokensUpdated today
    Auto-check passed

  • Pane Work

    greenfield-inc/Pane

    Answer questions about the user's own work in Pane, read-only.

    519 GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Runpane

    greenfield-inc/Pane

    Drive Pane through the runpane CLI. An agent skill from greenfield-inc/Pane.

    519 GitHub stars~3.7k tokensUpdated today
    Auto-check passed

Categories

Questions about HTML Explainer

What does HTML Explainer do?

The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm…. HTML Explainer is an agent skill from greenfield-inc/Pane. The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm, graphic-first look.

When should I use HTML Explainer?

HTML Explainer fits situations like: A skills instructions say to render its output per the html-explainer standards; the user asks for an HTML explainer of anything and no more specific skill applies.

How do I install HTML Explainer in Claude Code?

Run `npx skills add greenfield-inc/Pane --skill html-explainer -a claude-code`. Or copy the skill folder (main/src/services/paneChatBundle/skills/html-explainer in greenfield-inc/Pane) into .claude/skills/html-explainer in your project. Claude Code loads it when a task matches its description.

How do I install HTML Explainer in Codex?

Run `npx skills add greenfield-inc/Pane --skill html-explainer -a codex`. Or copy the skill folder (main/src/services/paneChatBundle/skills/html-explainer in greenfield-inc/Pane) into .agents/skills/html-explainer in your project. Codex loads it when a task matches its description.

Can I use HTML Explainer 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 greenfield-inc/Pane --skill html-explainer -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-explainer, .gemini/skills/html-explainer, .github/skills/html-explainer and .opencode/skills/html-explainer in your project.

What does HTML Explainer need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Explainer is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Grep, Glob, Bash, Write.

Does HTML Explainer 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 Explainer safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does HTML Explainer use?

HTML Explainer has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does HTML Explainer use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HTML Explainer?

Skills that share tags, products or a category with HTML Explainer: Concept Diagrams (Tommy-yw/RunbookHermes, 546 stars), Design System (affaan-m/ECC, 275k stars), Design System (Ohh-889/skyroc, 795 stars) and Stitch Taste Design System (google-labs-code/stitch-skills, 8.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Explainer?

greenfield-inc (a GitHub organization) maintains it in greenfield-inc/Pane, which has 519 GitHub stars. The repository holds 35 skills in this directory. The repository was last updated on October 7, 2026.

Source: greenfield-inc/Pane on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.