# Vercel Shadcn UI

> Repo-local bridge skill for shadcn/ui work. Use when a dedicated agent is composing UI, extending the design system, or adding shadcn components in a Next.js frontend.

- Skill: `hoangnb24/vercel-shadcn-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add hoangnb24/vercel-shadcn-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnb24/vercel-shadcn-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: hoangnb24 (https://skillmd.com/u/hoangnb24)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hoangnb24/vercel-shadcn-ui

---


# Vercel shadcn/ui

Use this skill as the repo-local bridge for the session's `vercel:shadcn` guidance.

## Default stance

- Reuse existing primitives before inventing new wrappers.
- Keep component APIs simple, composable, and easy to restyle.
- Match the established visual language of the product rather than dropping in generic demo UI.
- If new shadcn pieces are needed, prefer the CLI with non-interactive flags.

## Workflow

1. Inspect `components.json`, shared UI primitives, and the nearest matching screens before editing.
2. Compose with existing `components/ui/*` building blocks whenever possible.
3. Add or extend primitives only when the existing set cannot express the needed interaction cleanly.
4. Keep spacing, typography, states, and theming tokens aligned with the surrounding interface.
5. Verify the result visually on desktop and mobile when the change is user-facing.

## Focus areas

- shadcn/ui composition and extension
- Tailwind utility hygiene
- theme tokens, variants, and interaction states
- accessible dialogs, sheets, menus, tabs, and forms
- polished UI without unnecessary wrapper churn

## Avoid

- Treating shadcn/ui like an opaque dependency instead of owned source
- Building one-off containers when a stronger primitive or variant is the right fix
- Using interactive CLI commands when a non-interactive flag exists