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/pixel-process-ug/superkit-agents/artifacts-buildernpx skills add Pixel-Process-UG/superkit-agents --skill artifacts-buildergit clone --depth 1 https://github.com/Pixel-Process-UG/superkit-agentsWhat 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.00080 | $0.02316 |
| Opus 5 | $0.00040 | $0.01158 |
| Sonnet 5 | $0.00016 | $0.00463 |
| Haiku 4.5 | $0.00008 | $0.00232 |
Grade A, and why
artifacts-builder 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 yesterday.
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 — 294 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Artifacts Builder
Overview
Generate self-contained, production-quality HTML/CSS/JS artifacts that run in any modern browser without a build step. Each artifact is a single file (or minimal file set) containing everything needed for an interactive demo, prototype, data visualization, or utility tool. Emphasis on progressive enhancement, responsive design, and clean code.
Phase 1: Scope Definition
- Clarify the artifact's purpose (demo, prototype, tool, visualization)
- Determine interactivity level (static, interactive, data-driven)
- Identify required dependencies (none, CDN-loaded, embedded)
- Define responsive requirements (mobile, desktop, both)
- Set constraints (file size, browser support, offline capability)
STOP — Confirm scope and constraints with user before architecture decisions.
Artifact Type Decision Table
| Purpose | Complexity | Dependencies | Example |
|---|---|---|---|
| Static demo | Low | None | Product mockup, landing page |
| Interactive widget | Medium | None or Alpine.js | Calculator, form builder |
| Data visualization | Medium-High | D3.js or Chart.js | Dashboard, chart explorer |
| Prototype | Medium | Alpine.js or Petite-Vue | Clickable UI prototype |
| Utility tool | Medium-High | Varies | JSON formatter, color picker |
| Generative art | Medium | None | Canvas animation, pattern generator |
| Presentation | Medium | None or Mermaid | Slide deck, diagram viewer |
Phase 2: Architecture
- Choose single-file or multi-file approach
- Select CDN dependencies (if any)
- Plan component structure within the file
- Define state management approach
- Plan progressive enhancement layers
STOP — Present architecture and dependency choices for approval.
Architecture Decision Table
| Constraint | Single-File | Multi-File |
|---|---|---|
| Easy sharing (email, paste) | Yes | No |
| File size < 100KB | Yes | Either |
| Multiple pages/views | Possible (SPA) | Better |
| Team collaboration | Difficult | Better |
| Offline use | Yes (self-contained) | Needs bundling |
| SEO requirements | N/A | N/A (artifacts are tools) |
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.
- yesterday First seen · 294 lines · 80 tokens per session scan A 48080471321f
artifacts-builder is a skill published in the GitHub repository Pixel-Process-UG/superkit-agents (1 stars, last pushed 5mo ago), licensed MIT. It adds 80 tokens to every session and 2,316 once invoked, about $0.0004 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-31.
Other skills, from other repositories
browser-trace
Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user wants to debug a failed run, audit network/console/DOM activity, attach a trace to an in-progress session, or feed structured per-page…
kimi-webbridge
Kimi WebBridge lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login sessions. Use this skill whenever the user wants to interact with websites, automate browser tasks, scrape web content, or perform any action requiring a real…
awesome-content-publisher
Publishes a prepared batch of scheduled posts to the user's own accounts through their live browser (Playwright MCP --extension bridge to Chrome or Edge): a preflight that names which browser and profile it attached to, post-source scan with hard-stop format validation, per-platform login checks with a wait-or-skip…
awesome-content-voice
Builds a durable, reusable author-voice profile from whatever evidence exists — the user's own posts read through their logged-in browser, files of past writing, pasted samples, a website (via awesome-style-mimic), or an interview alone — and writes one profile file other skills read instead of re-deriving a voice per…
awesome-style-mimic
Learns a website's writing style by deep-crawling it in a live browser and distills a reusable style guide (voice, tone rules, lexicon, rhythm, structure, golden samples), then rewrites any documents or page sources in that voice with a cross-document consistency pass. Use when the user says 'learn the style of '…
visual-validate
Validate UI changes in a real browser using Chrome DevTools or Playwright MCP. Takes screenshots, compares before/after, exercises interactions, captures console errors. Use when user asks to "visual validate", "/visual-validate", "check the UI", "screenshot before/after", or finishes a UI change. Don't use for unit…