# ui-ux-design-principles

A canon for user-experience decisions: a review checklist, hard rules and reference notes. Useful when you build a surface or review someone else's.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 36
- Author: databricks-solutions
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/databricks-solutions/consort/tree/HEAD/skills/ui-ux-design-principles/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/ui-ux-design-principles

## What it does

The skill gives a shared vocabulary for interface work: usability heuristics, visual hierarchy, accessibility, feedback on actions, information architecture, design tokens, testability. Everything inside is markdown, no scripts — you consult it rather than run it. Each rule points at how it gets checked: the E2E layer with Playwright, a design-adherence pass against `design-guide.json`, a11y checks. A rule no test defends stays advice; one a check defends joins the build.

The core is a checklist to clear before merge. Seven properties: success and failure feedback on every data-changing action, keyboard and screen-reader access, visual hierarchy, token reuse, screens and flows defined up front, stable selectors such as `data-testid`, and a loading state for anything past roughly 200 ms with no layout shift. A blank row is fine when scope justifies it. A row nobody considered is the smell.

This is the third of a trio: `software-design-principles` covers code, `architectural-design-principles` covers the system, and this one covers how the product looks and how people move through it. In `consort` the UX Designer pulls it in to author `design-guide.{md,json}` and `ia.md` and to set the adherence contract; the Driver pulls it in while building UI. Without `ia.md` and without an a11y check there is nothing to close the checklist with, so create both before the first line of markup.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ui-ux-design-principles/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ui-ux-design-principles/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ui-ux-design-principles/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ui-ux-design-principles/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install databricks-solutions/consort ui-ux-design-principles
```

2. **Manually: put the files in place**
- File: `.github/skills/ui-ux-design-principles/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/databricks-solutions/consort --path skills/ui-ux-design-principles
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ui-ux-design-principles/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/databricks-solutions/consort/tree/HEAD/skills/ui-ux-design-principles/SKILL.md

## When to use it
- run the checklist over a UI before merge
- map screens and flows before styling anything
- pick a framework that stays testable
- agree on vocabulary during UI review
- verify keyboard access and contrast

## Example prompts
- Walk the ui-ux-design-principles checklist and list the rows still open
- Draft `ia.md` for the new section using this skill
- Check the checkout screen for accessibility and error feedback

## Similar
- [design-better](https://affpapa.org/en/nevibecode/skills/design-better.md) — skill · 1100 installs
- [ui-ux-design-pro](https://affpapa.org/en/nevibecode/skills/ui-ux-design-pro.md) — skill · 797 installs
- [design-component](https://affpapa.org/en/nevibecode/skills/design-component.md) — skill · 522 installs
- [feedback-patterns](https://affpapa.org/en/nevibecode/skills/feedback-patterns.md) — skill · 2100 installs
- [ux-designer](https://affpapa.org/en/nevibecode/skills/ux-designer.md) — skill · 1600 installs
- [dembrandt](https://affpapa.org/en/nevibecode/skills/dembrandt.md) — skill · 822 installs

From the same set: [databricks-solutions/consort](https://affpapa.org/en/nevibecode/by/databricks-solutions/consort.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md