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 kok-o/koko-contextos-agents --skill soft-designgit clone --depth 1 https://github.com/kok-o/koko-contextos-agentsWrote 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/kok-o/koko-contextos-agents/soft-design)<a href="https://agentmods.dev/skills/kok-o/koko-contextos-agents/soft-design"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/soft-design/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/kok-o/koko-contextos-agents/soft-design"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/soft-design.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.00053 | $0.01679 |
| Opus 5 | $0.00026 | $0.00839 |
| Sonnet 5 | $0.00011 | $0.00336 |
| Haiku 4.5 | $0.00005 | $0.00168 |
Grade A, and why
high-end-visual-design 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 4d 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 high-end-visual-design — 158 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 — 109 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)
Overview
Engineers high-end, agency-level digital experiences characterized by tactile haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and fluid spring physics. Rejects generic commodity SaaS templates in favor of bespoke layout archetypes, nested double-bezel enclosures, and purposeful motion dynamics.
When to Use
- When tasked with creating luxury, premium, Awwwards-tier landing pages, portfolio showpieces, or editorial SaaS interfaces.
- When explicitly prompted for "soft UI", "expensive design", "Apple-level polish", or "calm aesthetics".
- When standard component libraries feel too clinical or generic.
Rules & Patterns
1. Absolute Zero Directive (Strict Anti-Patterns)
- Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica. (Use
Geist,Clash Display,PP Editorial New, orPlus Jakarta Sans). - Banned Icons: Thick-stroked Lucide, FontAwesome, or Material Icons. Use ultra-light, precise line icons (Phosphor Light, Remix Line).
- Banned Borders & Shadows: Generic 1px solid gray borders. Harsh dark drop shadows (
rgba(0,0,0,0.3)). - Banned Layouts: Edge-to-edge sticky navbars glued to the top. Symmetrical 3-column Bootstrap-style grids without massive whitespace.
- Banned Motion: Standard
linearorease-in-outtransitions. Instant state changes without interpolation.
2. The Creative Variance Engine
Before writing code, consciously pick ONE combination:
Vibe & Texture Archetypes
- Ethereal Glass (SaaS / AI / Tech): Deep OLED black (
#050505), subtle radial mesh gradients, vantablack cards withbackdrop-blur-2xland white/10 hairlines. - Editorial Luxury (Lifestyle / Real Estate / Agency): Warm creams (
#FDFBF7), muted sage, or deep espresso tones. Variable serif headings with subtle CSS noise overlay (opacity-[0.03]). - Soft Structuralism (Consumer / Health / Portfolio): Silver-grey or pure white backgrounds, bold grotesk typography, airy floating components with ultra-diffuse ambient shadows.
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.
- 4d ago Changed · +10 lines e577f62a6208
- 9d ago First seen · 99 lines · 53 tokens per session scan A e1e32f5e2d42
high-end-visual-design is a skill published in the GitHub repository kok-o/koko-contextos-agents (2 stars, last pushed 5d ago), licensed MIT. It adds 53 tokens to every session and 1,679 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 high-end-visual-design, differing in 158 lines, and is treated as a copy.
Other skills, from other repositories
align-grid
Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid…
hatch3r-design-system-detect
Detects existing design tokens, component library, and theming convention in a project before authoring new UI primitives — output a concise inventory for downstream implementers.
visual-artifact-qa
Visual output that passes static checks can still fail to render.
mk:frontend-design
Use when designing UI components, reviewing visual design, building design systems, or checking accessibility. Auto-activates on frontend design tasks and UI reviews.
sota-frontend-design
State-of-the-art web design, UI/UX, and motion engineering standards (2026). Use when building OR auditing/reviewing user interfaces: components, pages, design systems, stylesheets, themes, forms, navigation, animations, or accessibility. Covers typography, color (OKLCH, dark mode), spacing/layout (grid, container…
svvarm
Opinionated design director for frontend interfaces. Use for ANY frontend design task: building UIs, reviewing designs, fixing typography, improving layouts, checking for AI slop, or making interfaces production-ready. Understands natural language — just describe what you need. One command, zero AI slop.