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/educlopez/ui-craft/colorizenpx skills add educlopez/ui-craft --skill colorizegit clone --depth 1 https://github.com/educlopez/ui-craftWrote 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/educlopez/ui-craft/colorize)<a href="https://agentmods.dev/skills/educlopez/ui-craft/colorize"><img src="https://agentmods.dev/badge/skills/educlopez/ui-craft/colorize.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.00081 | $0.00819 |
| Opus 5 | $0.00041 | $0.00409 |
| Sonnet 5 | $0.00016 | $0.00164 |
| Haiku 4.5 | $0.00008 | $0.00082 |
Grade A, and why
colorize 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 5d 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.
What it actually says
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Add color to the UI at $ARGUMENTS. Load the ui-craft skill.
The rule (from SKILL.md): 90%+ neutral, one accent, 3-5 placements per viewport. Reinforce this before adding anything. More color is not more design.
Before you touch anything — ask about brand. If a brand color exists, use it. If not, offer 2-3 options in OKLCH — include one warm (e.g., oklch(0.67 0.19 45)) and one cool (e.g., oklch(0.60 0.18 250)). Never default to blue.
Where color EARNS its place:
- Primary CTA background.
- One key metric tint — accent at ~8% opacity as a subtle background, accent at full strength on the number itself.
- Active state of the current nav item (underline, dot, or subtle tint — pick one).
- Status dots (success / warning / danger), 6-8px, no pills.
- Focus ring (
:focus-visible).
Where color does NOT go (anti-slop territory):
- Heading gradient text.
- Colored left or top borders on every card.
- Uniform chips on every tag/label.
- Emoji-as-icons to inject "color."
- Trend arrows in green/red when a plain
↑/↓+tabular-numswould read cleaner.
Knob gating (VISUAL_DENSITY):
≤ 4→ single accent only, max 3 placements.5-7→ single accent, 3-5 placements, status dots allowed.8+→ semantic palette (success/warning/danger) allowed beyond the single accent — dashboards and data UIs earn this.
Over-colored? Reduce.
If the UI is already shouting with color, this command also removes color.
- Count accents per viewport. Cut to 1-3. The primary CTA keeps its accent; everything else goes neutral unless it's a true semantic state (success/warning/danger on a real status).
- Mute decorative color. Background patterns, tinted cards without meaning, colored left borders on every list item, heading gradients, colored pills on every tag → gone.
- Keep semantic, cut decorative. Status dots, focus rings, active-nav underlines stay. Color as ornament goes.
References to read: references/color.md (OKLCH, tokens, dark mode, contrast), references/accessibility.md (contrast ratios for AA/AAA).
Output: edit code directly. Lift any literal hex into CSS variables (--color-accent, --color-accent-tint) — respect existing token naming if present. Print the Review Format table. One row per placement, with the ratio check (AA/AAA) on text uses.
Next step: /tokens — promote the color decisions into the durable token spine so they survive the session (rung 2).
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.
- 5d ago First seen · 50 lines · 81 tokens per session scan A 22f12b7297fb
colorize is a skill published in the GitHub repository educlopez/ui-craft (313 stars, last pushed yesterday), licensed MIT. It adds 81 tokens to every session and 819 once invoked, about $0.0004 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
animation-reverse-engineering
Reverse-engineer any motion reference (a video from X/Twitter, Dribbble, a screen recording, a GIF) into production animation code through frame-level dissection. Use when the user shares a video/URL and says "implement this animation", "recreate this motion", "port this interaction", "how does this animate", "clone…
software-in-worten
Übersetzt zwischen Benutzeroberfläche und Text — in beide Richtungen. Aus einer beschriebenen Oberfläche wird ein Skill; aus einem Skill wird eine Oberfläche. Nutzen, wenn eine Anwendung entworfen wird und der Ablauf noch unklar ist, wenn ein bestehendes Werkzeug als Skill verfügbar gemacht werden soll, wenn…
cocos-creator-adaptation
做 Cocos Creator 多机型/多分辨率适配时使用。Canvas、Widget、安全区。.
claude-md-improver
Audit and improve CLAUDE.md files in repositories. Use when user asks to check, audit, update, improve, or fix CLAUDE.md files. Scans for all CLAUDE.md files, evaluates quality against templates, outputs quality report, then makes targeted updates. Also use when the user mentions "CLAUDE.md maintenance" or "project…
gke-reliability
Improves GKE workload reliability, using PDBs, health probes, and topology spread constraints. Use when configuring GKE workload reliability, setting up PDBs, or configuring GKE health probes (liveness, readiness, startup). Don't use for disaster recovery setup or full cluster backups (use gke-backup-dr instead).
gke-workload-security
Audits, configures, and hardens workload-level security controls for Google Kubernetes Engine (GKE) applications and namespaces. Covers running cluster security audits (auditcluster.sh), configuring Workload Identity Federation (impersonation, KSA/GSA binding, and pod setup), enforcing Network Policies (default-deny…