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 pixiv/charcoal --skill choosing-charcoal-tokensgit clone --depth 1 https://github.com/pixiv/charcoalWrote 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/pixiv/charcoal/choosing-charcoal-tokens)<a href="https://agentmods.dev/skills/pixiv/charcoal/choosing-charcoal-tokens"><img src="https://agentmods.dev/badge/skills/pixiv/charcoal/choosing-charcoal-tokens/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/pixiv/charcoal/choosing-charcoal-tokens"><img src="https://agentmods.dev/badge/skills/pixiv/charcoal/choosing-charcoal-tokens.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.00111 | $0.01297 |
| Opus 5.5 | $0.00044 | $0.00519 |
| Sonnet 5.5 | $0.00022 | $0.00259 |
| Haiku 4.5 | $0.00011 | $0.00130 |
Grade A, and why
choosing-charcoal-tokens 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 yesterday.
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 — 73 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Charcoal のトークンを選ぶ
Charcoal の値は好みで決めない。用途ごとに使うトークンが決まっている。迷ったら推測せず、 下の参照先で用途の表を引く。
原則として、hex・px の直書きをしない。 値はトークン名で書く。
どれを読むか
| 決めること | 参照 |
|---|---|
| 背景・文字・アイコン・ボーダーの色、状態（hover/press）、強さ | references/color.md |
| 本文か見出しか、Body / Caption / Heading / Paragraph の選択、字間・字幅 | references/typography.md |
| 余白、要素間の間隔、コンポーネント内部の padding、タップ領域の大きさ | references/spacing.md |
| 角丸の大きさ、円形にするかどうか | references/radius.md |
| 線を引くかどうか、太さ、どの色か | references/border.md |
| 上の各ガイドラインに無い判断、全体の方針 | references/design-philosophy.md |
読む前に外さないこと
参照を開かずに書き始める場合でも、次は守る。
- 文字色に
#000000を使わない。 既定はtext.default。 - プライマリーカラーは重要アクションと誘導にだけ使う。 目立たせたいという理由で使わない。
- 警告色はその状態を示すときだけ使う。 強調の手段にしない。
- ボーダーは、無いと理解を妨げるときだけ引く。 まず余白か背景色の差で足りないか試す。
区切り線の既定は
border.secondary。 - 余白はレイアウトトークンから選ぶ。 トークンに無い数値を作らない。迷ったら
layout.30。 - 本文の基準は Body（
body.Regular）。 テキストスタイルは 4 種類しかない。5 種類目を作らない。 - 派手なグラデーション、過剰な線、過剰な装飾を足さない。 コンテンツより UI が目立たない。
トークン名を CSS 変数に直す
ガイドラインはトークンを layout.30 のように書く。CSS 変数の名前はそれとは違う。
推測すると --charcoal-layout-30 のような存在しない名前になり、値は当たらない。
| ガイドライン | CSS 変数 |
|---|---|
layout.30 |
--charcoal-space-layout-30 |
target.m |
--charcoal-space-target-m |
space.30 |
--charcoal-space-30 |
text.default |
--charcoal-color-text-default |
container.primary.default |
--charcoal-color-container-primary-default |
radius.m |
--charcoal-radius-m |
border-width.m |
--charcoal-border-width-m |
Body |
--charcoal-text-font-size-body ほか |
heading.M |
--charcoal-text-font-size-heading-m ほか |
caption.S |
--charcoal-text-font-size-caption-s ほか |
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.
- yesterday First seen · 73 lines · 111 tokens per session scan A ebcee3467608
choosing-charcoal-tokens is a skill published in the GitHub repository pixiv/charcoal (376 stars, last pushed yesterday), licensed Apache-2.0. It adds 111 tokens to every session and 1,297 once invoked, about $0.0004 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-10-26.
Other skills, from other repositories
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
web-prototype
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed assets/template.html and pasting section layouts from references/layouts.md. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
anti-slop-design
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
velar-luxury-real-estate
Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up…
web-prototype-taste-brutalist
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Swiss Industrial Print mode).
web-prototype-taste-soft
Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill soft-skill + sections 4–8 of taste-skill.