skill CX Codex

vibe-coding-advisor — Claude Code skill: what it does and setup

Q: How to install vibe-coding-advisor in Claude Code?

Run `npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a claude-code`. The definition will be placed in `~/.claude/skills/vibe-coding-advisor/SKILL.md`.

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a claude-code

Open on GitHub

What vibe-coding-advisor 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.

What it helps with

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 for the agent

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

How to install vibe-coding-advisor

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a claude-code

2Manually: put the files in place

~/.claude/skills/vibe-coding-advisor/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vibe-coding-advisor/

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a codex

2Manually: put the files in place

.agents/skills/vibe-coding-advisor/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a cursor

2Manually: put the files in place

.cursor/skills/vibe-coding-advisor/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install uxuiprinciples/agent-skills vibe-coding-advisor

2Manually: put the files in place

.github/skills/vibe-coding-advisor/SKILL.md

1Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a gemini-cli

2Platform CLI

gemini skills install https://github.com/uxuiprinciples/agent-skills --path vibe-coding-advisor

Manually: put the files in place

.devin/skills/vibe-coding-advisor/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vibe-coding-advisor

How to install vibe-coding-advisor in Claude Code?

Run npx skills add uxuiprinciples/agent-skills --skill vibe-coding-advisor -a claude-code. The definition will be placed in ~/.claude/skills/vibe-coding-advisor/SKILL.md.

What does vibe-coding-advisor do?

It identifies UX principles suitable for your component type and builds a ready prompt block to paste into your AI assistant.

Is the UXUI_API_KEY required?

The key is optional. When absent, the skill relies on local fallback knowledge instead of fetching remote prompt templates.

Similar skills

All skills for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set5

uxui-evaluator This skill reviews interface descriptions against UX/UI principles and returns structured findings. Use it before building a screen or user flow. CX Codex +1 ★ 26repo stars interface-auditor Reads an interface description and flags UX antipatterns, rating severity and returning fix steps as JSON. CX Codex +1 ★ 26repo stars flow-checker Audits UX flows before wireframing and before production release. Catches friction in onboarding, forms, pricing tables, dashboards, and empty states. CX Codex +1 ★ 26repo stars ai-interface-reviewer This skill reviews AI-powered interfaces against a 44-principle taxonomy and returns structured findings with severity and remediation. Use it to assess chat, copilot features, or agent workflows. CX Codex +1 ★ 26repo stars