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 45ck/skill-harness --skill visual-source-artifactgit clone --depth 1 https://github.com/45ck/skill-harnessWrote 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/45ck/skill-harness/visual-source-artifact)<a href="https://agentmods.dev/skills/45ck/skill-harness/visual-source-artifact"><img src="https://agentmods.dev/badge/skills/45ck/skill-harness/visual-source-artifact/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/45ck/skill-harness/visual-source-artifact"><img src="https://agentmods.dev/badge/skills/45ck/skill-harness/visual-source-artifact.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.00031 | $0.00853 |
| Opus 5.5 | $0.00012 | $0.00341 |
| Sonnet 5.5 | $0.00006 | $0.00171 |
| Haiku 4.5 | $0.00003 | $0.00085 |
Grade A, and why
visual-source-artifact 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 — 71 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Source Artifact
Use this skill when a human needs to inspect product, business, data, research, UX, or mockup work visually while agents need durable source they can diff, update, and verify.
Core Rule
Use a source-first pair:
- Canonical source: Markdown, TOON, JSON, YAML, specgraph-compatible docs, model text, or structured data.
- Generated review surface: static HTML, dashboard, state board, prototype, journey map, schema map, evidence board, or comparison page under
generated/review/. - For human-facing discovery and planning, the generated review surface should be infographic-style HTML under
generated/review/<family>/.
Generated visual files are never the only durable source. Edit source first, then regenerate or discard the review surface.
Default Fidelity
- High-fidelity is the default for UI, product, customer-facing workflow, and mockup review.
- Low-fidelity sketches are scratch artifacts only unless the project explicitly records them as research evidence.
- Use realistic states, dense data, error paths, accessibility cues, assumptions, and evidence strength in the review surface.
- Use scan-friendly metrics, charts, timelines, evidence/freshness panels, and source links for non-UI human review artifacts.
- Use Mermaid for authored diagrams, Vega-Lite as the default chart grammar, Observable Plot for compact exploratory charts, D3 for bespoke static layouts, Graphviz for node-edge maps, ECharts only as generation-time/static output, RAWGraphs for exported design-led SVGs, and Chart.js only through server-rendered/static output or an equivalent static chart.
- Put chart and graph intent in
artifact-infographicJSON fences or manifestinfographicsarrays when the project has the generic renderer.
Artifact Families
- Product: PRD, opportunity brief, feature map, roadmap, acceptance matrix.
- Business: business model, pricing assumptions, stakeholder map, operating risk, go-to-market assumptions.
- Data: schema, data dictionary, metric definition, lineage, quality rule, sample records.
- Research: claim-evidence matrix, literature theme map, interview synthesis, assumption register.
- UX: design brief, component state spec, interaction flow, high-fidelity prototype source, journey map.
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 · 71 lines · 31 tokens per session scan A 2c519a92a8be
visual-source-artifact is a skill published in the GitHub repository 45ck/skill-harness (15 stars, last pushed 4mo ago), licensed MIT. It adds 31 tokens to every session and 853 once invoked, about $0.0001 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
Art
Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper — via Flux, Nano Banana Pro, and GPT-Image-2. USE WHEN art, illustration, diagram, flowchart, infographic, header image, blog social thumbnail, visualize, generate image, mermaid, architecture diagram…
Webdesign
Design and integrate web interfaces via three paths: DirectDesign (write design inline with Anthropic frontend-design philosophy — the default workhorse), native /design + /design-sync Claude Code commands (preferred for code integration and design-system sync), or ClaudeDesign (drive claude.ai/design through…
prototype
Build a throwaway prototype to flush out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine…
dxf
Generate, regenerate, and validate 2D DXF drawings from Python build123d sources. Use for DXF files, .py drawing scripts, @dxf models, 2D profiles, outlines, templates, gaskets, panels, flat patterns, laser/plasma/waterjet cut layouts, and 2D drawing exports of CAD geometry. Open and visually review existing DXF files…
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating a new screen, page, or component that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers screen layout (width…