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 Design Examples

by sammcj in sammcj/agentic-coding

Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML.

Apache-2.0Auto-check passedFrontend & Design

Install HTML Design Examples

skills CLI
$ npx skills add sammcj/agentic-coding --skill html-design-examples -a claude-code

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

GitHub CLI
$ gh skill install sammcj/agentic-coding html-design-examples --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/sammcj/agentic-coding.git skills-src && mkdir -p .claude/skills && cp -r skills-src/Skills/html-design-examples .claude/skills/html-design-examples && 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-design-examples
GitHub stars
162
Token cost
~1.5k tokens
SKILL.md length
746 words
Files
22
Skills in repo
62
Repo updated
First seen
Licence
Apache-2.0

At a glance

Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML.

  • Works in 5 steps: Pick the example that most closely… → Read that file in full before writing… → Match the shared conventions (see… → …
  • The user wants to explain
  • SKILL.md covers Why HTML, not markdown, How to use this skill, Resource catalogue and Conventions across all examples, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

HTML Design Examples is an agent skill from sammcj/agentic-coding. Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML. Use when the user wants to explain, showcase, demo, plan, review, or present an idea within an HTML file.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files.

It sits in Frontend & Design, covering HTML artifacts. The repository describes itself as: Agentic Coding Rules, Templates etc... The licence is Apache-2.0.

When your agent uses it

  • The user wants to explain
  • Present an idea within an HTML file

Example prompts

  • “/html-design-examples”

Workflow steps

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

  1. Pick the example that most closely matches the user's intent (catalogue below).
  2. Read that file in full before writing your own. The reference's style, density, and structure are the point.
  3. Match the shared conventions (see "Conventions").
  4. Adapt to the user's real content. The examples use a fictional "Birchline" brand and fixture data - do not carry that across.
  5. If the artifact is an editor or any interactive surface, end it with a "copy as JSON" or "copy as prompt" button so the user's work flows…

What it can do on your machine

Read from SKILL.md and the folder at commit 62ba5a2. 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 Design Examples loads about 1.5k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 746 words of instructions outside code blocks.

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

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 sammcj/agentic-coding at commit 62ba5a2, republished under its Apache-2.0 licence (© sammcj). 746 words, ~1,477 tokens.

Download SKILL.mdSave it as .claude/skills/html-design-examples/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
html-design-examples
description
Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML. Use when the user wants to explain, showcase, demo, plan, review, or present an idea within an HTML file.
metadata.source
Adapted from https://x.com/trq212/status/2052809885763747935

HTML Design Examples

A library of self-contained .html files showing how a static HTML artifact can carry more signal than the same content as markdown. Use them as visual and structural references when building an HTML deliverable for a similar task.

Why HTML, not markdown

The bottleneck is human attention, not what the agent can produce. A 500-line markdown plan goes unread; the same content as one HTML page with diagrams, tables and inline controls gets engaged with. HTML carries tables, SVG, CSS layout, scripts and spatial composition in a single file, opens in any browser, and shares as a URL rather than an attachment. The token and latency cost is real, and worth it for any artifact that needs to be read by a human.

Prefer HTML for human-facing, ephemeral artifacts (specs, plans, reports, writeups, prototypes, throwaway editors). Stay with markdown or source for things that need durable, line-by-line review in a repo (RFCs, ADRs, runbooks) - HTML diffs are noisy.

How to use this skill

  1. Pick the example that most closely matches the user's intent (catalogue below).
  2. Read that file in full before writing your own. The reference's style, density, and structure are the point.
  3. Match the shared conventions (see "Conventions").
  4. Adapt to the user's real content. The examples use a fictional "Birchline" brand and fixture data - do not carry that across.
  5. If the artifact is an editor or any interactive surface, end it with a "copy as JSON" or "copy as prompt" button so the user's work flows back into the agent loop.

Resource catalogue

Files live in resources/. Open resources/index.html for the rendered gallery with thumbnails.

Exploration & Planning
  • 01-exploration-code-approaches.html - side-by-side comparison of three implementation approaches with trade-offs called out inline.
  • 02-exploration-visual-designs.html - layout and palette options rendered live for visual comparison.
  • 16-implementation-plan.html - milestones on a timeline, data-flow diagram, inline mockups, risky code, risk table.
Code Review & Understanding
  • 03-code-review-pr.html - annotated diff with margin notes, severity tags, jump links.
  • 17-pr-writeup.html - author-side PR description with motivation, before/after, file-by-file tour.
  • 04-code-understanding.html - unfamiliar package drawn as boxes and arrows with the hot path highlighted.
Design
  • 05-design-system.html - colours, type scale, and spacing tokens rendered as copyable swatches.
  • 06-component-variants.html - every size, state, and intent of one component on a single contact sheet.
Prototyping
  • 07-prototype-animation.html - a transition in isolation with sliders for duration and easing.
  • 08-prototype-interaction.html - four linked screens, enough fidelity to feel the interaction.
Illustrations & Diagrams
  • 10-svg-illustrations.html - inline SVG figure sheet suitable for a blog post.
  • 13-flowchart-diagram.html - annotated flowchart with click-to-reveal step detail.
Decks
  • 09-slide-deck.html - arrow-key navigable slides as one HTML file, no build step.
Research & Learning
  • 14-research-feature-explainer.html - TL;DR, collapsible request-path steps, tabbed config snippets, FAQ.
  • 15-research-concept-explainer.html - interactive demo, comparison table, hover-linked glossary.
Show full SKILL.md (303 more words)Show less
Reports
  • 11-status-report.html - weekly status: what shipped, what slipped, small chart.
  • 12-incident-report.html - post-mortem with minute-by-minute timeline, log excerpts, follow-up checklist.
Custom Editing Interfaces
  • 18-editor-triage-board.html - drag tickets across Now / Next / Later / Cut, then export the ordering as markdown.
  • 19-editor-feature-flags.html - grouped toggles with dependency warnings and a copy-diff button for changed keys.
  • 20-editor-prompt-tuner.html - editable template with highlighted variable slots; three sample inputs re-render live as you type.

Conventions across all examples

  • One .html file, opens directly in a browser. No build, no npm, no CDN scripts, no external stylesheets.
  • CSS custom properties at :root for the colour palette and font stacks.
  • Serif display headings paired with a sans-serif body is the recurring typographic pattern.
  • Any interactivity is vanilla JS in a single <script> tag.
  • Calm, editorial aesthetic: paper tones, restrained accent colour, generous whitespace (But not a narrow column of information. Use the available screen real estate wisely).
  • Interactive surfaces export their state - a "copy as JSON" or "copy as prompt" button is the closing affordance.

Aesthetic consistency

When the user has an existing project with its own design language, generate or reference a single design-system HTML file (see 05-design-system.html for the shape) and use it as the style anchor for subsequent artifacts. Defer to the project's own brand and tokens rather than copying the gallery's editorial palette wholesale.

Gotchas

  • HTML diffs are noisy. If the artifact will live in a repo and be reviewed line-by-line over time, write markdown instead.
  • An editor without an export button is half a tool. Always finish interactive artifacts with a way to get the result back into text.
  • If the user wants an arrow-key slide deck specifically, the html-slides skill is purpose-built. If they want a configurable explorer with a copy-as-prompt button, the playground skill is purpose-built. This skill is for the broader case of any single-file HTML deliverable.

© sammcj, Apache-2.0. 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 21 other files in Skills/html-design-examples of sammcj/agentic-coding.

  • SKILL.md
  • resources/01-exploration-code-approaches.html
  • resources/02-exploration-visual-designs.html
  • resources/03-code-review-pr.html
  • resources/04-code-understanding.html
  • resources/05-design-system.html
  • resources/06-component-variants.html
  • resources/07-prototype-animation.html
  • resources/08-prototype-interaction.html
  • resources/09-slide-deck.html
  • resources/10-svg-illustrations.html
  • resources/11-status-report.html
  • resources/12-incident-report.html
  • resources/13-flowchart-diagram.html
  • resources/14-research-feature-explainer.html
  • resources/15-research-concept-explainer.html
  • resources/16-implementation-plan.html
  • resources/17-pr-writeup.html
  • resources/18-editor-triage-board.html
  • resources/19-editor-feature-flags.html
  • … and 2 more

Open the folder on GitHubat commit 62ba5a2

Compare with similar skills

HTML Design Examples 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 Design Examples compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Design Examples this skillsammcj/agentic-coding162—~1.5kAutomated safety check: PassApache-2.0
Previewhanamizuki/solopreneur152—~5.2kAutomated safety check: PassMIT
Show Metellahq/opensession392—~1.6kAutomated safety check: PassMIT
Generative UIhimself65/finance-skills3.4k—~3.1kAutomated safety check: PassMIT
Show Memirumee/nimara-ecommerce1297 repos~809Automated safety check: PassBSD-3-Clause
Design Itsmallnest/goal-workflow289—~1.1kAutomated safety check: PassMIT

Similar skills

  • Preview

    hanamizuki/solopreneur

    Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…

    152 GitHub stars~5.2k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed

  • Show Me

    tellahq/opensession

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    392 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Generative UI

    himself65/finance-skills

    Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.

    3.4k GitHub stars~3.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Show Me

    mirumee/nimara-ecommerce

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    129 GitHub starsUsed in 7 repos~809 tokens
    Frontend & DesignAuto-check passed

  • Design It

    smallnest/goal-workflow

    A skill your agent uses when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents…

    289 GitHub stars~1.1k tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed

  • 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

More from sammcj/agentic-coding

All 62 skills in this repo

  • Yue2 Music

    sammcj/agentic-coding

    A skill your agent uses when generating songs with YuE2, covering a recording via SheetSage2 audio-to-ABC, editing a score or lyrics with melody preservation, or building a reproducible listening…

    162 GitHub stars~2.3k tokensUpdated today
    Auto-check passed

  • Bento Slides

    sammcj/agentic-coding

    A skill your agent uses when creating or editing Bento (.bento.html) slide decks, including any request for a single-file HTML slide deck.

    162 GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Idrive Backup

    sammcj/agentic-coding

    A skill your agent uses whenever the user wants you to manage, discuss or diagnose iDrive Backup configuration on macOS

    162 GitHub stars~1.7k tokensUpdated today
    Auto-check: notes

  • Piper Tts Training

    sammcj/agentic-coding

    Train custom TTS voices for Piper (ONNX format) using fine-tuning or from-scratch approaches.

    162 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • PPTX To Md

    sammcj/agentic-coding

    Convert a PPTX slide deck into per-slide markdown that preserves both the verbatim text and the meaning of embedded screenshots, diagrams and charts in their original layout positions.

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

  • Skill Creator Primer

    sammcj/agentic-coding

    You MUST load this skill before the skill-creator skill AND before making ANY change to, or conducting a review of ANY Agent Skill.

    162 GitHub stars~9.8k tokensUpdated today
    Auto-check passed

Categories

Questions about HTML Design Examples

What does HTML Design Examples do?

Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML. HTML Design Examples is an agent skill from sammcj/agentic-coding. Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML.

When should I use HTML Design Examples?

HTML Design Examples fits situations like: the user wants to explain; present an idea within an HTML file.

How do I install HTML Design Examples in Claude Code?

Run `npx skills add sammcj/agentic-coding --skill html-design-examples -a claude-code`. Or copy the skill folder (Skills/html-design-examples in sammcj/agentic-coding) into .claude/skills/html-design-examples in your project. Claude Code loads it when a task matches its description.

How do I install HTML Design Examples in Codex?

Run `npx skills add sammcj/agentic-coding --skill html-design-examples -a codex`. Or copy the skill folder (Skills/html-design-examples in sammcj/agentic-coding) into .agents/skills/html-design-examples in your project. Codex loads it when a task matches its description.

Can I use HTML Design Examples 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 sammcj/agentic-coding --skill html-design-examples -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-design-examples, .gemini/skills/html-design-examples, .github/skills/html-design-examples and .opencode/skills/html-design-examples in your project.

What does HTML Design Examples need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Design Examples is instructions for the agent only.

Does HTML Design Examples 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 Design Examples 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 Design Examples use?

HTML Design Examples is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Design Examples use?

About 1.5k tokens (SKILL.md is roughly 5.9k 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 Design Examples?

Skills that share tags, products or a category with HTML Design Examples: Preview (hanamizuki/solopreneur, 152 stars), Show Me (tellahq/opensession, 392 stars), Generative UI (himself65/finance-skills, 3.4k stars) and Show Me (mirumee/nimara-ecommerce, 129 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Design Examples?

sammcj (a GitHub user) maintains it in sammcj/agentic-coding, which has 162 GitHub stars. The repository holds 62 skills in this directory. The repository was last updated on October 7, 2026.

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