sleak

Good design has checkable rules

Fourteen design rules with measurements you can check. Built for agents, engineers, and designers.

Browse the rules How it works
14 rules·13 references·1 checklist
Title goes here Sub-title here R R parent − padding = child baseline = corner centre (R, R)

Most UI fails on small decisions

Repeated radii. Accent on every icon. Text crowding a corner. Dark text on a bright button. These mistakes hide in code but stand out on screen. Sleak names each one, gives you a number to check, and shows the smallest fix.

For models, designers, and engineers

The rules work with any tool. Use the same guide whether a person or an agent writes the interface.

AI models & agents

Applied while it builds

Point Claude Code, Cursor, Codex, Kimi, or any AGENTS.md tool at the skill. It applies the rules while it builds.

New designers

The details seniors apply by reflex

Each short reference explains one decision with a measurement, the reasoning behind it, and a before-and-after example.

Engineers

Ship screens without a designer on call

Run the checklist, fix issues by category, and use the included CSS without waiting for a design review.

14 rules, each with a measurement you can check

Each maps to a reference with the full logic, CSS, and an audit. The mono line is what you verify.

01

Concentric radius

Nested corners share one curve axis; padding is the gap between them.

parent − padding = child 02

Section eyebrows

Kickers weaken when repeated; the heading carries the section.

≤ 1 per page · hero: none 03

Intentional accent

Full accent pulls the eye to the one primary task, not decoration.

1 focal point / view 04

Accent-hue blacks

Tinted darks take the accent's hue, so nothing clashes.

sat > 0 → hue = accent 05

Contrast

Readable by the math and by perception, checked on the render, not the token.

WCAG 4.5 + APCA Lc 75 06

Typography

Line length, alignment, and size matched to viewing distance.

≈ 55ch · 7–12 words 07

Layout & spacing

Separate with space and surface tiers, not edge-to-edge rules.

0 full-bleed dividers 08

Cards & buttons

Whole cards click; icons sit in a square with uneven horizontal padding.

icon side ≈ ½ text side 09

Motion budget

Prefer subtle over none; one expressive moment; vary the recipe.

≤ 150ms · ease-out 10

Content & copy

Lead with the action; drop the fluff; be specific.

verb + object 11

Accessibility

Names, focus, keyboard, targets, and cues beyond colour.

≥ 24px pointer · 44px touch 12

UX & states

Design every state and use real elements, not the happy path alone.

every state · real elements 13

Design system foundations

Tokens as one source of truth, lean sets, atomic components.

tokens · lean sets · atomic 14

Principles

How to decide what to build: research, framing, low-fi iteration, feedback.

guess less · story first · test early

How a pass runs

Use the steps in order. Verify the rendered pixels because source code can hide contrast and geometry problems.

Context

Pin the product, audience, and constraints. Match the existing system first.

Audit

Scan against the checklist. Flag issues by category and severity, High before ship.

Fix

Apply the smallest change that fixes the decision. Each reference has the CSS.

Verify

Re-run the checklist on the rendered output. Contrast and geometry hide in the gap between source and screen.

“Good design decisions are often invisible in code and obvious on screen. I wrote Sleak to name those decisions, attach a number you can check, and help people and agents apply them the same way.”
AAOA ✦ why I built it

Add it to your agent

Point any coding agent at the guide. It reads SKILL.md on demand and applies the rules while it works.

# detects Codex, Claude Code, Cursor, and more
npx skills add aaoa-dev/Sleak

Add --global for an all-projects install, or choose an agent with --agent codex. Humans can start at SKILL.md or open any reference directly.