Borrowing it
Nothing to install: this file belongs to brayandiazc/project-starter-template-es-ai. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/brayandiazc/project-starter-template-es-ai/main/.claude/skills/design-system-audit/SKILL.mdgit clone --depth 1 https://github.com/brayandiazc/project-starter-template-es-aiWrote 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/brayandiazc/project-starter-template-es-ai/design-system-audit)<a href="https://agentmods.dev/skills/brayandiazc/project-starter-template-es-ai/design-system-audit"><img src="https://agentmods.dev/badge/skills/brayandiazc/project-starter-template-es-ai/design-system-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/brayandiazc/project-starter-template-es-ai/design-system-audit"><img src="https://agentmods.dev/badge/skills/brayandiazc/project-starter-template-es-ai/design-system-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.00092 | $0.00772 |
| Opus 5 | $0.00046 | $0.00386 |
| Sonnet 5 | $0.00018 | $0.00154 |
| Haiku 4.5 | $0.00009 | $0.00077 |
Grade A, and why
design-system-audit 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.
What it actually says
Audita la UI indicada frente al design system de design/.
Los colores no los revisas tú. El job Design system del CI
(.github/scripts/check-design-tokens.sh) ya falla ante cualquier hex, rgb(),
utilidad de paleta (bg-blue-500) o valor arbitrario (bg-[#0A7A9D]) en las vistas.
Si crees ver un color crudo, es que el check no cubre esa ruta: dilo, y propón añadir
la carpeta al script en vez de convertirte en un linter humano.
Tu trabajo es lo que ningún script puede comprobar:
-
Lee
design/README.md(el sistema) ydocs/conventions/ui.md(cómo se organizan las vistas y dónde están los assets de marca). -
Primitiva nativa antes que componente reinventado. Un diálogo hecho con
<div>yposition: fixedes un hallazgo aunque se vea bien:<dialog>,<details>ypopovertraen foco, teclado y Escape resueltos por el navegador. Si hay un componente custom donde había una primitiva, señálalo con el reemplazo concreto. -
Si el componente custom es inevitable, señálalo y remite su accesibilidad (focus trap, Escape,
aria-*, tabulación) a/accessibility-audit— esa lista vive allí, en un solo sitio, a propósito. -
Estados de interacción: default, hover, active y disabled. (El foco visible y la navegación por teclado los audita
/accessibility-audit.) -
Los cuatro estados de datos, en toda vista que cargue algo: loading (skeleton con la forma del contenido, no un spinner genérico ni "Cargando…"), empty (icono + por qué está vacío + CTA que oriente), error (mensaje + acción de reintento) y éxito. El estado vacío es el que más define el producto y el que más se salta.
-
Ambos temas: claro y
data-theme="dark"— que la vista use los tokens en los dos y ninguna pieza quede pegada a un solo tema. (La medición de contraste AA es de/accessibility-audit;design/preview.htmlla trae para los tokens base.) -
Jerarquía antes que decoración: ¿se entiende qué es lo importante de la vista sin leer el texto? Espaciado y peso tipográfico antes que bordes y sombras.
Informa una lista: cada ítem Pasa / Falla, con archivo:línea y la corrección
concreta. Ejemplo: Modal.tsx:12 — <div role="dialog"> sin focus trap; usa <dialog>.
NO rediseñes ni reestilices por iniciativa propia: informas y propones. Para una
revisión de accesibilidad completa (contraste medido, lectores de pantalla), usa
accessibility-audit. design/ siempre manda.
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 · +28 lines · -15 tokens per session 3fdb109034a3
- 10d ago First seen · 22 lines · 107 tokens per session scan A 9db9de0de7a4
design-system-audit is a skill published in the GitHub repository brayandiazc/project-starter-template-es-ai (15 stars, last pushed 4d ago), licensed MIT. It adds 92 tokens to every session and 772 once invoked, about $0.0005 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-09-01.
Other skills, from other repositories
dxf
Generate, regenerate, and validate 2D DXF drawings from Python build123d sources. Use for DXF files, .py drawing scripts, @dxf models, 2D profiles, outlines, templates, gaskets, panels, flat patterns, laser/plasma/waterjet cut layouts, and 2D drawing exports of CAD geometry.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating interfaces, pages, or components in a project that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers installation…
multi-surface-render
Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output…
design-stylecards
Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished elevation, glassmorphism, a border gradient, a mesh background, or any 'make it look like X' request where…