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/web-prototype-taste-softnpx skills add wolfenazz/YzPzCode --skill web-prototype-taste-softgit 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/web-prototype-taste-soft)<a href="https://agentmods.dev/skills/wolfenazz/yzpzcode/web-prototype-taste-soft"><img src="https://agentmods.dev/badge/skills/wolfenazz/yzpzcode/web-prototype-taste-soft.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.00069 | $0.01190 |
| Opus 5 | $0.00034 | $0.00595 |
| Sonnet 5 | $0.00014 | $0.00238 |
| Haiku 4.5 | $0.00007 | $0.00119 |
Grade A, and why
web-prototype-taste-soft 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
100% identical to web-prototype-taste-soft — 0 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 — 64 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Prototype — Soft Premium
For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture.
Source
Distilled from Leonxlnx/taste-skill — skills/soft-skill/SKILL.md ("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See example.html in this directory for a fully-realized template.
Hard rules
- Canvas: silver-grey or warm cream (
#F2F2F0or#FDFBF7). Not pure white. - Type pairing: display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.
- Display:
clamp(48px, 7vw, 96px),letter-spacing: -0.035em,line-height: 0.96. Heavy weight (700+). - Squircle radii:
border-radius: 28px–40px(rounded-[2rem]torounded-[2.5rem]) on major surfaces. - Double-bezel mandatory: every important card is a wrapper (
p-1.5, hairline border, soft outer shadow) containing an inner core with its own background and a concentric smaller radius (e.g., outer2rem, innercalc(2rem - 0.375rem)). - CTA = button-in-button: primary CTAs are full pills (
rounded-full px-6 py-3); the trailing arrow lives inside its own circular wrapper flush-right. - Ambient depth: one slow-drifting radial mesh blob behind hero,
opacity ≤ 0.18,pointer-events: none, fixed. - Eyebrow tag above each section header: pill, uppercase mono,
letter-spacing: 0.2em,text-[10px].
Banned
- Inter, Roboto, Helvetica, Open Sans.
- Generic 1px solid gray borders (use
border-black/5/ring-1 ring-black/5). shadow-md,shadow-lg, hard drop shadows. Only diffuse, wide-spread, low-opacity (0 20px 40px -15px rgba(0,0,0,0.05)).- Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (
mt-6 mx-auto w-max rounded-full). - Linear or
ease-in-outtransitions. Usecubic-bezier(0.32, 0.72, 0, 1)or spring physics. h-screen(usemin-h-[100dvh]).- Animating
width/height/top/left. Onlytransformandopacity. - Pure black
#000. Use Zinc-950 / Off-Black.
What ships with it
1 file 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 · 64 lines · 69 tokens per session scan A 95441b8bbec9
web-prototype-taste-soft is a skill published in the GitHub repository wolfenazz/YzPzCode (13 stars, last pushed yesterday), licensed Apache-2.0. It adds 69 tokens to every session and 1,190 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to web-prototype-taste-soft, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
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.
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).
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.