A design contract is a written set of visual rules for a frontend feature, covering things such as spacing, colours, typography, and wording.

Use it to define or extend the visual standards for a project or module, including standards derived from a Figma export.

It prevents AI-generated components from looking inconsistent because each component follows its own visual choices.

contrato-ui — Command for Claude Code by doncheli

Install

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.

Clone the repo

git clone --depth 1 https://github.com/doncheli/don-cheli-sdd

Made for: Claude Code.

Or install don-cheli-sdd, the plugin that ships this one along with the rest of its 28 skills, 115 commands, 1 agent.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/commands/doncheli/don-cheli-sdd/contrato-ui/github.svg)](https://agentmods.dev/commands/doncheli/don-cheli-sdd/contrato-ui)

Your own site

<a href="https://agentmods.dev/commands/doncheli/don-cheli-sdd/contrato-ui"><img src="https://agentmods.dev/badge/commands/doncheli/don-cheli-sdd/contrato-ui/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.

Your own site · 80×15

<a href="https://agentmods.dev/commands/doncheli/don-cheli-sdd/contrato-ui"><img src="https://agentmods.dev/badge/commands/doncheli/don-cheli-sdd/contrato-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 15 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 2,149 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

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.00015	$0.02149
Opus 5	$0.00008	$0.01074
Sonnet 5	$0.00003	$0.00430
Haiku 4.5	$0.00002	$0.00215

Measured 6d ago against content hash 5891370c9061, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

contrato-ui 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 6d 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.

scripts/.claude/commands/dc/contrato-ui.md · 246 lines

How it starts

The opening of the file, as written. The whole thing — 246 lines — stays where its author put it; the contents beside it link to each section on GitHub.

/dc:contrato-ui

Objetivo

Definir y bloquear los estándares visuales de una feature frontend antes de escribir código. Previene el problema más común del desarrollo frontend con IA: inconsistencia visual entre componentes porque no hay un contrato de diseño.

Adaptado de Get Shit Done (gsd-build/get-shit-done) — UI Design Contracts: "lock visual standards before coding to prevent visually inconsistent AI-generated components."

Uso

/dc:contrato-ui                          # Crear contrato para el proyecto
/dc:contrato-ui @specs/features/ui/      # Crear para un módulo específico
/dc:contrato-ui --desde @figma-export    # Derivar de un export de Figma
/dc:contrato-ui --extender               # Extender contrato existente

Por Qué Existe

Sin Contrato UI	Con Contrato UI
Componente A usa `padding: 16px`, B usa `padding: 1rem`, C usa `padding: 20px`	Todos usan `--spacing-md: 1rem`
Cada componente elige sus propios colores	Paleta definida, tokens de diseño
Tipografía inconsistente entre páginas	Escala tipográfica fija
Copywriting variable ("Click here" vs "Continuar" vs "Submit")	Voz y tono definidos
IA genera componentes "bonitos" pero incompatibles entre sí	Todos los componentes siguen el mismo contrato

Comportamiento

Paso 1: Detectar Stack Frontend

Detectando stack frontend...
├── Framework: React 19 / Next.js 15
├── Estilos: TailwindCSS 4.x
├── Componentes: shadcn/ui
├── Iconos: Lucide Icons
└── Design system existente: No detectado

Paso 2: Definir Contrato

El contrato cubre 6 dimensiones:

1. Espaciado (Spacing)

spacing:
  base: 4px  # Unidad mínima
  scale:
    xs: 4px    # 1 unidad
    sm: 8px    # 2 unidades
    md: 16px   # 4 unidades (default)
    lg: 24px   # 6 unidades
    xl: 32px   # 8 unidades
    2xl: 48px  # 12 unidades
  regla: "Todo espaciado DEBE ser múltiplo de 4px"

2. Tipografía (Typography)

typography:
  familia:
    primaria: "Inter, system-ui, sans-serif"
    monospace: "JetBrains Mono, monospace"
  escala:
    xs: "0.75rem / 1rem"     # 12px, captions
    sm: "0.875rem / 1.25rem"  # 14px, labels
    base: "1rem / 1.5rem"     # 16px, body
    lg: "1.125rem / 1.75rem"  # 18px, lead
    xl: "1.25rem / 1.75rem"   # 20px, h4
    2xl: "1.5rem / 2rem"      # 24px, h3
    3xl: "1.875rem / 2.25rem" # 30px, h2
    4xl: "2.25rem / 2.5rem"   # 36px, h1
  peso:
    normal: 400
    medium: 500
    semibold: 600
    bold: 700

Read the full file on GitHub · 246 lines

Changes

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.

6d ago First seen · 246 lines · 15 tokens per session scan A 5891370c9061

Subscribe to this mod's changes

contrato-ui is a command published in the GitHub repository doncheli/don-cheli-sdd (57 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 15 tokens to every session and 2,149 once invoked, about $0.0001 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-03.

CSS and styling Design and UX Frontend agentic-coding ai-agents ai-coding ai-development anthropic-skills claude

ui-review

Retroactive visual audit of UI implementation with 1-4 scoring per dimension.

SienkLogic/plan-build-run · 16 tokens

ui-phase

Generate UI-SPEC.md design contracts for frontend-heavy phases.

SienkLogic/plan-build-run · 12 tokens

multi-frontend

Frontend-focused workflow (Research → Ideation → Plan → Execute → Optimize → Review), Gemini-led.

loulanyue/awesome-claude-notes · 20 tokens

accessibility

You are the Accessibility (a11y) Specialist, ensuring applications are accessible to all users, including those with disabilities. You enforce WCAG standards and inclusive design principles.

samibs/skillfoundry · 0 tokens

a11y

You are a WCAG 2.1 Level AA accessibility specialist. You audit user interfaces for perceivable, operable, understandable, and robust compliance. You have zero tolerance for "we'll add a11y later" — accessibility is a launch requirement, not a polish step.