Baonat
← All skills
Frontend · ChatGPTVerified

Author: OpenAI

shadcn/ui Best Practices (Codex / ChatGPT Plugins)

Official openai/plugins skill for shadcn/ui — add, compose, and fix components via the CLI instead of hand-rolling a second design system.

Access: Skill lives in openai/plugins (MIT, free to browse/clone). Running inside ChatGPT or Codex may require a paid host plan. Not a separately sold skill pack.

What it does
Loads OpenAI’s shadcn-best-practices skill so Codex / ChatGPT agents respect components.json, prefer registry components, and follow shadcn composition / styling rules.
Best for
Projects already on shadcn/ui (or about to `shadcn init`) where agents keep inventing one-off buttons, forms, and color overrides.
How to install / use
Use the skill from openai/plugins → build-web-apps → shadcn-best-practices. Attach when the repo has components.json or you are scaffolding with the shadcn CLI. Do not use the deprecated openai/skills repo.

Attach when components.json exists — stop hand-rolling duplicate UI.

Copy this

  • Prefer npx shadcn@latest add / search over custom one-off components
  • Compose from existing primitives (Field, Tabs, Sidebar) — don’t reinvent forms
  • Use semantic tokens (bg-primary, text-muted-foreground) — no raw bg-blue-500

When to use

Use OpenAI’s shadcn-best-practices skill when the project has (or will have) a components.json and you want agents to work with the shadcn CLI — not invent a parallel UI kit.

Good fits:

  • Adding or fixing shadcn components (Dialog, Form fields, Sidebar, charts).
  • Scaffolding with shadcn init, presets, or registry search.
  • Stopping agents from hand-rolling duplicate buttons, form layouts, or dark-mode color hacks.

Skip it for non-shadcn design systems (Polaris, Material, house tokens only), or pure backend work with no UI.

Source of truth: openai/plugins → plugins/build-web-apps/skills/shadcn-best-practices. Do not use the deprecated openai/skills repo.

Access note

The skill lives in openai/plugins — MIT, free to browse and clone. Running it inside ChatGPT or Codex may require a paid host plan. It is not a separately sold skill pack. Baonat lists it with this disclosure because host-subscription users are the audience.

Why

Without shadcn guidance, agents often rewrite what the CLI already adds: custom form stacks, space-y-* soup, raw color classes, and one-off variants that fight the registry. This skill steers the agent toward search → add → compose with project context from components.json.

Baonat marks this verified against the public path under openai/plugins. Link the skill — do not paste wholesale SKILL.md / rules files into chat.

Install

  1. Confirm you are on the current plugins tree: openai/plugins (not deprecated openai/skills).
  2. Open the skill at build-web-apps/skills/shadcn-best-practices.
  3. In ChatGPT / Codex, enable or attach the build-web-apps / shadcn skill per your host’s plugin UI.
  4. Ensure the repo has components.json (or run npx shadcn@latest init first).
  5. Prefer the project’s package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest.

Copy this

UI work on an existing shadcn app:

Attach shadcn-best-practices. This repo has components.json.
Before writing custom UI: search registries / existing components.
Compose with shadcn primitives; use CLI add when a component is missing.
Follow semantic tokens and Field/FieldGroup form patterns — no hand-rolled duplicate kit.
Use: npx shadcn@latest (or the project’s package runner).

New surface checklist:

Goal: [settings page / dashboard section / form].
1) List existing components we should reuse
2) CLI-add only what’s missing
3) Compose — don’t invent a second Button or form layout
4) No raw palette colors; no space-y-* stacks where flex+gap is required

Concrete scenarios

  1. Settings page. Tabs + Card + FieldGroup forms instead of a custom CSS grid of inputs.
  2. Missing Dialog. Agent runs shadcn add dialog and wires composition — no from-scratch modal.
  3. Styling drift. Agent stops overriding component colors with className palette hacks; uses variants and tokens.

Pitfalls / when NOT to use

  • No components.json and no plan to adopt shadcn. Wrong skill.
  • Deprecated openai/skills links. Always use openai/plugins.
  • Fighting a non-shadcn design system. Match the system already in the repo.
  • Wholesale paste of rules. Install/link; don’t dump the skill body into every prompt.

FAQ

Q: Author / source?
A: OpenAI, under openai/plugins. Primary URL: shadcn-best-practices.

Q: Is the skill free?
A: The GitHub artifact is MIT/free to browse and clone. ChatGPT/Codex runtime may need a paid host plan.

Q: Cursor too?
A: Baonat tags ChatGPT because the skill ships in openai/plugins; the same patterns apply wherever you can attach that skill file — just don’t point agents at the deprecated repo.

Source attribution