# ui-design-patterns

A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. Useful when you design components or audit an existing UI.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 853 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/ui-design-patterns/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/ui-design-patterns

## What it does

The skill covers repeatable interface solutions: tabs, accordions, breadcrumbs, pagination, forms, data display and feedback. Each pattern comes with when-to-use notes, anatomy and best practices. Markup examples carry ARIA attributes such as `role="tablist"`, `aria-expanded` and `aria-current="page"`.

There is also a section on design systems and atomic design, from atoms up to pages. Treat it as a reference rather than a code generator: the agent leans on it when picking a pattern or checking an interface against established practice.

One thing to watch. The tabs section names an ideal number of sections, and the accordion section gives a transition duration. Those are suggestions from the text, not hard limits, so expect to revisit them for your own case.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace ui-design-patterns
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/ui-design-patterns
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -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/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/ui-design-patterns/SKILL.md

## When to use it
- pick a navigation pattern for a multi-level section structure
- build a form with validation and clear feedback
- add ARIA attributes to tabs and accordions
- audit an existing interface for accessibility
- sort components into atomic design levels

## Example prompts
- Pick a navigation pattern for a catalog with three levels of nesting
- Check my form for accessibility and tell me what's missing
- Build an accordion for the FAQ section with proper ARIA attributes

## Similar
- [variant](https://affpapa.org/en/nevibecode/skills/variant.md) — skill · 14600 installs
- [designing-user-experience](https://affpapa.org/en/nevibecode/skills/designing-user-experience.md) — skill · 458 installs
- [emil-design-eng](https://affpapa.org/en/nevibecode/skills/emil-design-eng.md) — skill · 388200 installs
- [interaction-patterns-components](https://affpapa.org/en/nevibecode/skills/interaction-patterns-components.md) — skill · 539 installs
- [form-design](https://affpapa.org/en/nevibecode/skills/form-design.md) — skill · 1900 installs
- [design-system-creation](https://affpapa.org/en/nevibecode/skills/design-system-creation.md) — skill · 537 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 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