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 Pixel-Process-UG/superkit-agents --skill artifacts-buildergit clone --depth 1 https://github.com/Pixel-Process-UG/superkit-agentsWrote 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/pixel-process-ug/superkit-agents/artifacts-builder)<a href="https://agentmods.dev/skills/pixel-process-ug/superkit-agents/artifacts-builder"><img src="https://agentmods.dev/badge/skills/pixel-process-ug/superkit-agents/artifacts-builder/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/pixel-process-ug/superkit-agents/artifacts-builder"><img src="https://agentmods.dev/badge/skills/pixel-process-ug/superkit-agents/artifacts-builder.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00080 | $0.02316 |
| Opus 5.5 | $0.00032 | $0.00926 |
| Sonnet 5.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 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 — 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.
- 1mo ago 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 (3 stars, last pushed 7mo ago), licensed MIT. It adds 80 tokens to every session and 2,316 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-31.
Other skills, from other repositories
idea-refine
Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you want to expand options before converging on one. Triggers on "ideate", "refine this idea", or…
chinese-git-workflow
A reference for configuring Git with Chinese code-hosting services such as Gitee, Coding.net, GitLab China, and CNB, including SSH, HTTPS, credentials, CI, and repository mirroring.
chinese-documentation
A Chinese technical-documentation style guide covering spacing, punctuation, numbers, terminology, and links when Chinese and English appear together.
create-slack-app
Use when a developer wants to create, scaffold, or bootstrap a new Slack app or agent from scratch with the Slack CLI. Covers prerequisites, authentication, choosing a workspace to install into, and creating a project from a Bolt (JS or Python) template locally. Trigger on "create a Slack app", "new Bolt app", "start…
subagent-driven-development
A development workflow in which a fresh coding agent implements each independent task, another review checks that task, and a final review examines the complete set of changes.
music
A tool for creating and working with music using Mureka, an AI music service. It handles new songs, instrumental tracks, remixes, extensions, and audio analysis.