Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/keepYaoung/artifact-organizernpx agentmods add skills/keepyaoung/artifact-organizer/artifact-stylerWrote 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/keepyaoung/artifact-organizer/artifact-styler)<a href="https://agentmods.dev/skills/keepyaoung/artifact-organizer/artifact-styler"><img src="https://agentmods.dev/badge/skills/keepyaoung/artifact-organizer/artifact-styler/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/keepyaoung/artifact-organizer/artifact-styler"><img src="https://agentmods.dev/badge/skills/keepyaoung/artifact-organizer/artifact-styler.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.00119 | $0.01047 |
| Opus 5.5 | $0.00048 | $0.00419 |
| Sonnet 5.5 | $0.00024 | $0.00209 |
| Haiku 4.5 | $0.00012 | $0.00105 |
Grade A, and why
artifact-styler 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 2mo 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 — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Artifact Styler
Take an existing artifact and re-render it in a different theme. The styler never edits HTML by hand — it works on the semantic envelope and lets the renderer own every visual decision. Theme is the only thing that changes; the content stays identical.
When to use
- "Restyle this in the apple theme" / "make it look like tailwind".
- "Apply our brand style to this report."
- "Same dashboard, but the stripe look."
- You produced an Artifact Organizer output earlier and want a themed variant.
The 7 themes
| Theme | Character |
|---|---|
notion |
Warm cream, Notion Blue, reading-first (default) |
linear |
Dark-native, indigo, tight Inter |
vercel |
Gallery white, Geist, shadow-as-border |
stripe |
Weight-300 luxury, deep navy |
supabase |
Dark-native, emerald, border hierarchy |
apple |
SF-style, cool greys, Apple Blue, soft elevation, true-black dark |
tailwind |
Inter, slate ramp, indigo-600, layered shadows |
How the input is obtained
The renderer parses JSON envelopes, never HTML. So:
- Artifact Organizer output — every render saves a
<name>.jsonenvelope next to the<name>.html. Restyle by re-rendering that sidecar JSON with a new--theme. No re-extraction needed. - Raw HTML with no sidecar (e.g. a Claude chat artifact) — you (the
model) read the HTML and reconstruct the semantic envelope: map each block to
a catalog component (
Section,DataTable,Callout,KPICard,Chart,CodeBlock, diagrams, …). Emit data only — no colors, fonts, or classes. This "HTML → envelope" step is a model job, by design.
See references/catalog.md in the artifact-organizer skill for prop schemas.
How to use
-
Locate the renderer engine (shipped with the
artifact-organizerskill):AO=$(for p in \ ./.claude/skills/artifact-organizer ~/.claude/skills/artifact-organizer \ ./.codex/skills/artifact-organizer ~/.codex/skills/artifact-organizer \ ./.cursor/skills/artifact-organizer ~/.cursor/skills/artifact-organizer \ ./.opencode/skills/artifact-organizer ~/.opencode/skills/artifact-organizer \ ~/.claude/plugins/cache/artifact-organizer-marketplace/*/plugins/artifact-organizer \ ./plugins/artifact-organizer do [ -x "$p/scripts/outprint" ] && { echo "$p/scripts/outprint"; break; }; done)
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.
- 2mo ago First seen · 90 lines · 119 tokens per session scan A 609b36f49888
artifact-styler is a skill published in the GitHub repository keepYaoung/artifact-organizer (2 stars, last pushed 4mo ago), licensed MIT. It adds 119 tokens to every session and 1,047 once invoked, about $0.0005 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
avoid-ai-design
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the second-order "tasteful AI" ones (cream with terracotta, near-black with acid green, all-caps mono chrome, one accented…
web-design
A web design workflow for turning a brief, reference website, screenshot, or keywords into a design specification and then web code. It covers visual style, page structure, interaction, responsive layouts, and motion.
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
m3-expressive
Use when designing or implementing UI with Material Design 3 or M3 Expressive — Material components, motion springs, shape morphing, emphasized typography, color roles, adaptive layouts. Also for Material You, Jetpack Compose / MDC-Android / Flutter / web Material UI, making a UI feel "expressive", or reviewing a…
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
dashmotion
Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline…