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/wolfenazz/yzpzcode/tweaksnpx skills add wolfenazz/YzPzCode --skill tweaksgit clone --depth 1 https://github.com/wolfenazz/YzPzCodeWrote 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/wolfenazz/yzpzcode/tweaks)<a href="https://agentmods.dev/skills/wolfenazz/yzpzcode/tweaks"><img src="https://agentmods.dev/badge/skills/wolfenazz/yzpzcode/tweaks.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.1 | $0.00102 | $0.03007 |
| Opus 5 | $0.00051 | $0.01503 |
| Sonnet 5 | $0.00020 | $0.00601 |
| Haiku 4.5 | $0.00010 | $0.00301 |
Grade A, and why
tweaks 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 2d 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.
This is a copy
95% identical to tweaks — 2 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 305 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tweaks Skill · 参数化变体面板
Wrap any HTML artifact with a side panel of live controls that rewrite
CSS custom properties in real time and persist to localStorage.
Inspired by the huashu-design tweak pattern.
What you produce
A single self-contained HTML file with two layers:
- Stage — the original artifact (landing page / deck / dashboard)
re-keyed so all visual decisions read from CSS custom properties:
--accent,--scale,--density,--mode,--motion. - Panel — a fixed sidebar (or drawer on small viewports) with
form controls bound to those custom properties via a tiny
vanilla-JS bridge. Persists every change to
localStoragekeyed by the artifact identifier.
The user can:
- Open the artifact and see the stage rendered with their saved preferences (or sensible defaults).
- Adjust accent / scale / density / mode / motion in the panel and watch the stage update instantly — no rerender.
- Press T to hide / reveal the panel; R to reset to defaults.
- Refresh the page — every choice is persisted.
When to use
- The user generated something they like 80% of, and wants to dial in the last 20% themselves.
- You're presenting a design system / brand and want the audience to feel the variants live (instead of you re-running the agent).
- You're shipping a stand-alone demo (e.g. a portfolio piece) and want viewers to play.
When not to use
- One-shot artifacts that won't be iterated on (e.g. a runbook — parameters don't help).
- When the artifact's value is in fixed ratios (e.g. an infographic with carefully balanced data viz — knobs would degrade it).
The 5 standard knobs
Pick a subset that suits the artifact. Don't ship all 5 if only 2 matter — clutter is a regression.
1. --accent — Accent color
A select with 5–8 curated swatches (don't ship a free color picker — the user will pick a bad color and blame you).
const ACCENT_PRESETS = [
{ id: 'rust', val: '#c96442', label: 'Rust' },
{ id: 'cobalt', val: '#2c4d8e', label: 'Cobalt' },
{ id: 'sage', val: '#4a7a3f', label: 'Sage' },
{ id: 'plum', val: '#7a3f6a', label: 'Plum' },
{ id: 'graphite',val: '#3a3a3a', label: 'Graphite' },
];
What ships with it
2 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.
- 2d ago First seen · 305 lines · 102 tokens per session scan A e0d3eaddc6b3
tweaks is a skill published in the GitHub repository wolfenazz/YzPzCode (13 stars, last pushed yesterday), licensed Apache-2.0. It adds 102 tokens to every session and 3,007 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 95% identical to tweaks, differing in 2 lines, and is treated as a copy.
Other skills, from other repositories
handoff-spec
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use design-qa-checklist; for reusable library components use component-spec (design-systems).
von-restorff-effect
Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use visual-hierarchy.
dark-mode-design
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
responsive-design
Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use layout-grid; for OS-specific patterns use platform-conventions.
color-palette-generator
Create an HTML color palette from a mood, description, or image, with swatches, color codes, pairings, and contrast checks. Use for color schemes or brand colors.
accessibility-a11y
WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing.