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/45ck/skill-harness/visual-source-artifactnpx 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.svg" alt="Measured on agentmods" 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 | $0.00031 | $0.00853 |
| Opus 5 | $0.00015 | $0.00426 |
| Sonnet 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 4d 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.
- 4d 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 2mo ago), licensed MIT. It adds 31 tokens to every session and 853 once invoked, about $0.0002 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-30.
Other skills, from other repositories
devx-ux
Activate when designing or modifying CLI command surfaces, command help text, install/init/run flows, error wording, or first-run experience in the APM CLI -- even when the user does not say "UX" explicitly.
ux-writing
Judgment rules for user-facing text and docs: CLI and diagnostic output, error and help text, README and docs structure, code comments, titles, and generated reports, decks, or exports. Use when writing or changing any user-visible string, when adding or restructuring docs or deciding which page owns a fact, when a…
frontend-specialist
前端开发专家。用于前端应用、页面、组件、现有 UI 增量改进、已有页面视觉优化、UI/UX 改造、视觉重设计、响应式布局、表单和输入框视觉一致性、设计系统落地、React/Vue/Next.js/Nuxt、Tailwind、shadcn/ui、Radix、MUI、AntD、仪表盘、SaaS、Landing Page、移动端适配、前端性能优化、浏览器截图检查和去除 AI 味 UI。触发后应把“做好看”转化为可执行设计约束，优先复用项目现有组件与视觉语言，小步实现并尽量通过浏览器或 Playwright 做视觉反馈闭环；当用户要改进当前页面或已有界面时，默认先诊断再做局部优化，而不是从 0 重做。.
kirby-panel-and-blueprints
Designs Kirby blueprints and Panel UI, including blueprint reuse/extends, programmable blueprints, and custom Panel fields/sections/areas. Use when changing the Panel experience or schema.
awesome-design-md
Create a DESIGN.md style baseline BEFORE building UI. Use FIRST when no design draft exists — installs a proven visual style, then invoke frontend-design to implement. For borrowing a known product style, getting consistent typography/colors/spacing, or needing a fast visual starting point.
applying-ui-design-system
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens…