# vibe-coding-advisor

Injects relevant UX principles into your AI coding session before you generate UI components.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 26
- Author: uxuiprinciples
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/uxuiprinciples/agent-skills/tree/HEAD/vibe-coding-advisor/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/vibe-coding-advisor

## What it does

The skill prepares UX-focused context before component generation starts. When you ask to build a UI element, it maps the request to a specific pattern such as data tables, dashboards, multi-step forms, or navigation menus. It then binds that pattern to matching interface rules like Hick's law, Fitts's law, or cognitive load limits.

Under the hood, the skill queries an external service via `curl` to fetch structured generation prompts. Setting `UXUI_API_KEY` unlocks extended prompts with citations. If the key is omitted or the endpoint returns a non-200 status, the workflow falls back to internal domain knowledge.

This tool handles pre-generation context injection rather than auditing already existing source files.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install uxuiprinciples/agent-skills vibe-coding-advisor
```

2. **Manually: put the files in place**
- File: `.github/skills/vibe-coding-advisor/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/uxuiprinciples/agent-skills --path vibe-coding-advisor
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -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/uxuiprinciples/agent-skills/tree/HEAD/vibe-coding-advisor/SKILL.md

## When to use it
- embed UX requirements into prompt context before generating frontend code
- map UI components to matching design principles such as Fitts's law or Hick's law
- structure constraints for forms, checkouts, and navigation bars automatically
- provide tech-stack-aware prompt blocks for AI coding tools

## Example prompts
- Prepare UX context for building a multi-step checkout wizard in Next.js and Tailwind
- Assemble design principle guidelines for an analytics dashboard with data tables
- Generate the UX prompt block before I code a settings modal using Radix UI

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [uxuiprinciples/agent-skills](https://affpapa.org/en/nevibecode/by/uxuiprinciples/agent-skills.md) — 5 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