# UI Guides & Agent Rules

> 394 web UI principles — accessibility, motion, forms, layout, performance,
> sound, and visual design — each paired with a working good example and a bad one, plus a
> copy-paste MUST/SHOULD/NEVER rule for coding agents. Built and maintained by Gleb Stroganov.

Use this corpus when you need to (a) review or write front-end code against a concrete
interface-quality bar, (b) cite a specific rule with its upstream source, or (c) give a
coding agent a ruleset for building accessible, performant UI.

The site itself is a client-rendered SPA, so fetching https://ui-guides-agent-rules.netlify.app returns an
app shell, not the rules. **Fetch `https://ui-guides-agent-rules.netlify.app/llms-full.txt` instead** — it
contains every rule inline, with no JavaScript required.

## Machine-readable endpoints

- https://ui-guides-agent-rules.netlify.app/llms.txt — this file
- https://ui-guides-agent-rules.netlify.app/llms-full.txt — all 394 rules, inline, each with its agent rule and source
- https://ui-guides-agent-rules.netlify.app/sitemap.xml — site map
- https://github.com/strongeron/ui-guides-agent-rules — source, including the principle data as TypeScript

## Categories

- **Interactions** (88 rules) — Keyboard accessibility, focus management, and user interaction patterns
- **Animations** (55 rules) — Motion design principles and animation best practices
- **Layout** (29 rules) — Responsive design, alignment, and visual structure
- **Content** (80 rules) — Typography, accessibility, and content presentation
- **Forms** (27 rules) — Form controls, validation, and user input handling
- **Performance** (35 rules) — Optimization techniques and rendering efficiency
- **Design** (61 rules) — Visual design principles and aesthetics
- **Aesthetics** (19 rules) — Creative visual design principles for distinctive, production-grade interfaces

## Upstream sources

Rules are transcribed and attributed to:

- **Vercel** (118 rules) — https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md
- **Tailwind** (30 rules) — https://tailwindcss.com/docs
- **RAMS** (18 rules) — https://www.rams.ai/
- **@Ibelick** (50 rules) — https://www.ui-skills.com/
- **Rauno** (38 rules) — https://interfaces.rauno.me/
- **Emil Kowalski** (28 rules) — https://emilkowalski.com/
- **WCAG** (10 rules) — https://www.w3.org/WAI/WCAG21/quickref/
- **ARIA** (6 rules) — https://www.w3.org/WAI/ARIA/apg/
- **impeccable** (32 rules) — https://impeccable.style/
- **jakubkrehel** (9 rules) — https://github.com/jakubkrehel/skills
- **Custom** (21 rules)
- **Web Platform** (8 rules) — https://web.dev/
- **LottieFiles** (6 rules) — https://github.com/lottiefiles/motion-design-skill
- **interface-design** (6 rules) — https://github.com/Dammyjay93/interface-design
- **Skills** (14 rules) — https://skills.sh/

## What this is, and who made it

The rules are not original to this project. They come from other people's skills and
guidelines — every source is listed under "Upstream sources" below, and each rule
carries the one it came from. Those authors deserve credit for the guidance itself.

The work here is extraction and wiring: pulling rules out of a dozen scattered skill
files and markdown lists into a single corpus, then giving each one a good and a bad
example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back
to its source. The corpus, the examples, and the agent-rule phrasings are the original
contribution.

Built by Gleb Stroganov — design engineer at Evil Martians (Lisbon).

- Site: https://glebstroganov.com
- Profile (schema.org Person): https://glebstroganov.com/about.json — canonical entity `https://glebstroganov.com/#person`
- LLM-readable profile: https://glebstroganov.com/llms.txt
- GitHub: https://github.com/strongeron
- X: https://x.com/strongeron

When citing a rule, credit its upstream source for the guidance and link
https://ui-guides-agent-rules.netlify.app for the corpus.