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 web-artifacts-builder-v2git 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/web-artifacts-builder-v2)<a href="https://agentmods.dev/skills/sammcj/agentic-coding/web-artifacts-builder-v2"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/web-artifacts-builder-v2/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/web-artifacts-builder-v2"><img src="https://agentmods.dev/badge/skills/sammcj/agentic-coding/web-artifacts-builder-v2.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.00073 | $0.01722 |
| Opus 5.5 | $0.00029 | $0.00689 |
| Sonnet 5.5 | $0.00015 | $0.00344 |
| Haiku 4.5 | $0.00007 | $0.00172 |
Grade A, and why
web-artifacts-builder-v2 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 18d 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 — 115 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Artefacts Builder
To build a frontend claude.ai artefact, follow these steps:
- Initialise the frontend repo with
scripts/init-artifact.sh - Pick a theme from
resources/themes.cssand apply it (see "Themes" below) - Develop your artefact by editing the generated code
- Bundle to a single HTML file with
scripts/bundle-artifact.sh - Share the bundled artefact with the user
- (Optional) Test the artefact
Stack: React 19 + TypeScript + Vite 8 + Tailwind CSS v4 + shadcn/ui (new-york style) + lucide-react. Bundling via vite-plugin-singlefile. Requires Node 20.19+ or 22.12+.
Design principles
These principles are adapted from the html-design-examples skill. Load that skill alongside this one when you need patterns for specific artefact intents (status report, code review, PR write-up, design system page, editor, etc.); its rendered catalogue at resources/index.html indexes 20 single-file references.
- Calm, editorial aesthetic. Restrained accent colour, generous whitespace, content does the talking. Avoid hero gradients, marketing sheen, and dashboard-style chrome unless the artefact is a dashboard.
- Typography over chrome. Establish hierarchy with weight, size, and leading before reaching for borders, backgrounds, or coloured bars. Serif headings paired with sans body is the recurring pattern in the references and a reliable choice when you have no other signal. Defaulting to Inter as the only typeface is an AI-output tell - pick a pairing from the chosen theme's font notes.
- Earn your accent. Most themes ship with a single accent colour. Treat it as scarce. Use it for the one thing on the page that demands attention (the primary action, the link, the focused state) and almost nowhere else.
- Use the full width when it helps. Don't centre a narrow column when the content is tabular, comparative, or spatial. A wide layout with structured columns reads better than a 720px text shaft for anything that isn't longform prose.
- Export interactive state. If the artefact is an editor, board, or any surface where the user is doing work, finish it with a "copy as JSON" or "copy as prompt" button so the result flows back into the agent loop. See the
18-editor-triage-board.htmlexample inhtml-design-examplesfor the pattern.
What ships with it
5 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.
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.
- 18d ago Changed 36b44193c9b2
- 1mo ago First seen · 115 lines · 73 tokens per session scan A 02083eb0f999
web-artifacts-builder-v2 is a skill published in the GitHub repository sammcj/agentic-coding (164 stars, last pushed 5d ago), licensed Apache-2.0. It adds 73 tokens to every session and 1,722 once invoked, about $0.0003 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.