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 skills add sammcj/agentic-coding --skill html-design-examplesgit clone --depth 1 https://github.com/sammcj/agentic-codingWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sammcj/agentic-coding/html-design-examples)<a href="https://agentmods.dev/skills/sammcj/agentic-coding/html-design-examples"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/html-design-examples/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sammcj/agentic-coding/html-design-examples"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/html-design-examples.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What 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.1 | $0.00047 | $0.01303 |
| Opus 5.5 | $0.00019 | $0.00521 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (164 stars, last pushed 5d 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.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
ai-interface-reviewer
Audit AI-powered interfaces against the uxuiprinciples Part V taxonomy — 44 principles covering transparency, trust calibration, human override, consent, agentic workflows, and conversational design. Returns structured findings with severity and remediation. API key optional — enriched output requires…
stitch-ui-design
Expert guidance for crafting effective prompts in Google Stitch, the AI-powered UI design tool by Google Labs. This skill helps create precise, actionable prompts that generate high-quality UI designs for web and mobile applications.
figma-automation
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
rayden-use
Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement.
rayden-code
Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns.
uxui-principles
Evaluate interfaces against 168 research-backed UX/UI principles, detect antipatterns, and inject UX context into AI coding sessions.