Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/sammcj/agentic-coding/html-design-examplesnpx skills add sammcj/agentic-coding --skill html-design-examplesgit clone --depth 1 https://github.com/sammcj/agentic-codingWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00047 | $0.01303 |
| Opus 5 | $0.00023 | $0.00651 |
| Sonnet 5 | $0.00009 | $0.00261 |
| Haiku 4.5 | $0.00005 | $0.00130 |
Grade A, and why
html-design-examples scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 86 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
- Pick the example that most closely matches the user's intent (catalogue below).
- Read that file in full before writing your own. The reference's style, density, and structure are the point.
- Match the shared conventions (see "Conventions").
- Adapt to the user's real content. The examples use a fictional "Birchline" brand and fixture data - do not carry that across.
- 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.
What ships with it
21 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- resources/01-exploration-code-approaches.html 14 KB
- resources/02-exploration-visual-designs.html 14 KB
- resources/03-code-review-pr.html 26 KB
- resources/04-code-understanding.html 17 KB
- resources/05-design-system.html 18 KB
- resources/06-component-variants.html 16 KB
- resources/07-prototype-animation.html 12 KB
- resources/08-prototype-interaction.html 11 KB
- resources/09-slide-deck.html 16 KB
- resources/10-svg-illustrations.html 18 KB
- resources/11-status-report.html 16 KB
- resources/12-incident-report.html 15 KB
- resources/13-flowchart-diagram.html 15 KB
- resources/14-research-feature-explainer.html 12 KB
- resources/15-research-concept-explainer.html 13 KB
- resources/16-implementation-plan.html 28 KB
- resources/17-pr-writeup.html 24 KB
- resources/18-editor-triage-board.html 18 KB
- resources/19-editor-feature-flags.html 18 KB
- resources/20-editor-prompt-tuner.html 21 KB
- resources/index.html 38 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 86 lines · 47 tokens per session scan A 838e81ca246c
html-design-examples is a skill published in the GitHub repository sammcj/agentic-coding (158 stars, last pushed 8d ago), licensed Apache-2.0. It adds 47 tokens to every session and 1,303 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
aksel-spacing
Lag responsive layouts med Aksel Design System (v8+) - spacing tokens, layout primitives (Box, HStack, VStack, HGrid, Page, Bleed) og ResponsiveProp.
web-design-reviewer
Visuell inspeksjon av nettsider for å identifisere og fikse designproblemer. Trigges av forespørsler som "sjekk designet", "gå gjennom UI-en", "fiks layouten", "finn designfeil". Finner problemer med responsivt design, tilgjengelighet, visuell konsistens og layout, og fikser dem i kildekoden.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…
reskin
Author a NEW skin for the reskinnable-demo app. A skin is a self-contained domain plugin under src/skins/ / that implements the frozen Skin contract (src/shell/skin-contract.ts) to swap the app's entire experience — brand, theme, layout, pages, tools, data, and agent — as a live sales demo. Use when the user says "add…
web-animation-design
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use…
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…