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 virgoC0der/awesome-claude-code --skill variant-swatch-imagegit clone --depth 1 https://github.com/virgoC0der/awesome-claude-codeWrote 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/virgoc0der/awesome-claude-code/variant-swatch-image)<a href="https://agentmods.dev/skills/virgoc0der/awesome-claude-code/variant-swatch-image"><img src="https://agentmods.dev/badge/skills/virgoc0der/awesome-claude-code/variant-swatch-image/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/virgoc0der/awesome-claude-code/variant-swatch-image"><img src="https://agentmods.dev/badge/skills/virgoc0der/awesome-claude-code/variant-swatch-image.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.00300 | $0.03278 |
| Opus 5.5 | $0.00120 | $0.01311 |
| Sonnet 5.5 | $0.00060 | $0.00656 |
| Haiku 4.5 | $0.00030 | $0.00328 |
Grade A, and why
variant-swatch-image 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 — 207 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Variant Swatch Image
把多个 variant 颜色塞回到一张主图里 —— 让 shop tab / consolidated listing 的主图能一眼看出有几个色号。
每次运行输出 6 张 1:1 (1000×1000) PNG，主图相同、色块排版不同。下游可以挑一张推回各渠道，也可以拿 6 张做 A/B。
Layout 清单
| Layout ID | 描述 | Overflow 处理 |
|---|---|---|
bare-bl-square |
裸方形色块、左下角、横向排列 | 全部展示，无 +N |
bare-bl-circle |
裸圆形色块、左下角、横向排列 | 全部展示，无 +N |
bare-tr-square |
裸方形色块、右上角、竖向排列 | 全部展示，无 +N |
bare-tr-circle |
裸圆形色块、右上角、竖向排列 | 全部展示，无 +N |
pill-br-h |
白色圆角胶囊、右下角、横向，max 3 + "+N" | 超过 3 显示 "+N" |
pill-br-v |
白色圆角胶囊、右下角、竖向，max 3 + "+N" | 超过 3 显示 "+N" |
裸色块都带 2px 白描边 + 浅阴影，能在深色主图上保持识别。
When to use
- AfterShip Feed 的 Consolidated Listing 主图增强
- TikTok Shop / SHEIN / Shopify 多色商品在 shop tab 缩略图找色号难
- 商家有多个 color variant 但每个 variant 的主图都长得一样，买家只能点进去才知道有几个色
- 需要批量生成"主图 + 色块"的增强图，推回各渠道作为新的 listing 主图
不适用：单色商品；尺寸 / 材质 variant（这个 skill 只处理 color variant）；商家原始主图本身就已经有色块条（先检测，跳过）。
Pipeline overview
variant 图列表 ──► analyzer.py (CV 提色 / 花色检测) ──► swatch 数据
│
▼
主图 + layouts.py (6 个 layout 函数) ──► renderer.py
│
▼
pltf-capture 截图服务 ──► 6 张 public URL + 本地 PNG
截图走的是 AfterShip 内网的 http://pltf-capture.as-in.io/v1/internal/screenshots，需要环境变量 AM_API_KEY。
Quick start
export AM_API_KEY=<your-am-api-key>
Mode A — 已经有了主图和 variant 图
python scripts/run.py \
--main-image /path/to/main.jpg \
--variants /path/to/v1.jpg /path/to/v2.jpg /path/to/v3.jpg \
--output-dir ./out
# 可选: --layouts bare-bl-square,pill-br-h # 子集而非全 6
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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 · 207 lines · 300 tokens per session scan A 6de1c341a3c2
variant-swatch-image is a skill published in the GitHub repository virgoC0der/awesome-claude-code (1 stars, last pushed 1mo ago), licensed MIT. It adds 300 tokens to every session and 3,278 once invoked, about $0.0012 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-09-12.
Other skills, from other repositories
hero-receipt-print
A thermal receipt feeds down from a dark checkout slot. Function: transaction / publish confirmation print.
product-configurator-design
Designing build-your-own product configurators (Tesla-style, custom-pricing, plan-builders) with constraint logic, real-time pricing, validation, and save-and-share mechanics. Honest about infinite-options (decision paralysis), canned-bundles-only (no real customization), and guided-configuration (smart defaults plus…
style
Luxe fashion-commerce editorial design with a deep-indigo canvas, oversized numerals, large image-led storytelling, rounded capsules/cards, and restrained monochrome accents.
etsy-shop-branding
Shop branding — banner design, logo, brand story, cohesive listing photography, packaging.
revenuecat-paywall-design
Must invoke for any request to create, edit, evaluate, understand, or improve a RevenueCat Paywall in the dashboard — including questions about a specific paywall or general paywall design recommendations, and uploading images or fonts to paywall resources / the Media Gallery. Not for presenting a paywall in app code…
linkfox-multimodal-product-similarity
An image-comparison tool that groups products whose main photos look alike, using features such as appearance, colour, composition, and material.