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 redesign-auditgit 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/redesign-audit)<a href="https://agentmods.dev/skills/kok-o/koko-contextos-agents/redesign-audit"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/redesign-audit/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/redesign-audit"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/redesign-audit.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.00045 | $0.01498 |
| Opus 5 | $0.00023 | $0.00749 |
| Sonnet 5 | $0.00009 | $0.00300 |
| Haiku 4.5 | $0.00005 | $0.00150 |
Grade A, and why
redesign-existing-projects 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.
This is a copy
100% identical to redesign-existing-projects — 227 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 — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Redesign Skill & UI Audit
Overview
A systematic redesign and auditing protocol designed to elevate existing websites, dashboards, and web applications to world-class agency quality. It diagnoses and eradicates generic AI design fingerprints, sloppy typography, inconsistent palettes, and absent interaction states without breaking business logic or underlying component contracts.
When to Use
- When auditing an existing UI codebase for design quality, responsiveness, or accessibility.
- When modernizing a legacy application or uplifting generic templates.
- When tasked to "redesign", "clean up the layout", "audit UI", or "make it look expensive and modern".
Rules & Patterns
1. Workflow: Scan → Diagnose → Fix
- Scan: Read the codebase. Identify the framework, styling method (Tailwind v3/v4, vanilla CSS, CSS Modules), and established design tokens.
- Diagnose: Run through the design audit categories. Catalog generic patterns, missing states, and optical alignment flaws.
- Fix: Apply surgical, targeted upgrades working within the existing stack. Do not rewrite from scratch.
2. Design Audit Categories
Typography
- Replace Browser Defaults: Swap generic
Inter,Roboto, or system fonts with expressive typefaces (Geist,Outfit,Cabinet Grotesk,Satoshi). - Presence & Scale: Increase display text size, tighten letter-spacing (
-0.02emto-0.04em), reduce line-height on headlines. - Reading Comfort: Limit body text to 65 characters per line (
max-w-prose), increase line-height to 1.6. - Figures: Enable tabular figures (
font-variant-numeric: tabular-nums) for numbers in tables and data readouts. - Orphan Prevention: Apply
text-wrap: balanceon headlines andtext-wrap: prettyon paragraphs.
Color and Surfaces
- No Pure Black Backgrounds: Replace
#000000with tinted dark charcoal (#0A0A0A,#121212). - Desaturate Accents: Keep accent saturation below 80% so it blends harmoniously with neutrals.
- Single Accent Color: Commit to one dominant accent hue; remove conflicting secondary tints.
- Tinted Shadows: Tint shadows to match the background hue rather than harsh black opacity.
- Background Depth: Prevent sterile flat sections by layering subtle noise overlays, ambient gradients, or masked imagery.
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.
- 5d ago Changed · -61 lines ae136eccec74
- 10d ago First seen · 179 lines · 45 tokens per session scan A 98ad3e5b051b
redesign-existing-projects is a skill published in the GitHub repository kok-o/koko-contextos-agents (2 stars, last pushed 6d ago), licensed MIT. It adds 45 tokens to every session and 1,498 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to redesign-existing-projects, differing in 227 lines, and is treated as a copy.
Other skills, from other repositories
common-ui-design
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).
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…
ui-package
Best practices for building a Flutter UI package on top of Material, covering custom components, ThemeExtension-based theming, consistent APIs, widget tests, and scaffolding from the appuipackage template. Use when creating a UI package and whenever working inside one: adding or reviewing a widget, wiring design…
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.