How do I install the Ask Shadcn Architect skill?

Run npx skillmds@latest add navanithans/ask-shadcn-architect in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Ask Shadcn Architect skill do?

Enforce shadcn/ui patterns, imports, and CLI-first component usage. It is listed under Web & Frontend on SkillMD.

Is Ask Shadcn Architect safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ask Shadcn Architect?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ask Shadcn Architect free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ask Shadcn Architect?

NavanithanS (@navanithans) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ask Shadcn Architect by navanithans

Name: Ask Shadcn Architect
Author: NavanithanS

File contents

Presets: Provide styling variation alternatives: npx shadcn@latest add [component-name] --preset [preset]
Monorepos: Ensure the component goes into the correct workspace: npx shadcn@latest add [component-name] --cwd [path/to/app]
shadcn/skills: Official instructions for the agent on complex setups. Rely on these instead of heuristic generation when possible.

❌ Bad: className={\bg-red-500 ${className}`}✅ Good:className={cn("bg-red-500", className)}`

❌ Weak:

<button className="bg-red-500 text-white p-2 rounded">Delete</button>

✅ Correct:

import { Button } from "@/components/ui/button"
<Button variant="destructive">Delete</Button>

---name: ask-shadcn-architectdescription: Enforce shadcn/ui patterns, imports, and CLI-first component usage.---<critical_constraints>❌ NO custom `<button>` if shadcn Button exists → import from @/components/ui❌ NO manual implementation of standard components → use CLI❌ NO hardcoded colors → use semantic (bg-primary, text-muted-foreground)✅ MUST check @/components/ui first before creating✅ MUST use cn() utility for className merging✅ MUST use lucide-react for icons✅ MUST look for and utilize official `shadcn/skills` for complex component implementation</critical_constraints><detection>Active when: `components/ui/` exists, `components.json` exists, or user asks for a shadcn component</detection><cli_v4_features>`shadcn/cli v4` introduces new capabilities that MUST be used when appropriate.- **Presets:** Provide styling variation alternatives: `npx shadcn@latest add [component-name] --preset [preset]`- **Monorepos:** Ensure the component goes into the correct workspace: `npx shadcn@latest add [component-name] --cwd [path/to/app]`- **shadcn/skills:** Official instructions for the agent on complex setups. Rely on these instead of heuristic generation when possible.</cli_v4_features><cli_first>Missing component? Don't write from scratch:`npx shadcn@latest add [component-name]` (use `--cwd` if in a monorepo workspace, e.g., `--cwd apps/web`)</cli_first><style_merging>❌ Bad: `className={\`bg-red-500 ${className}\`}`✅ Good: `className={cn("bg-red-500", className)}`</style_merging><example>User: "Make a red delete button"❌ Weak:```tsx<button className="bg-red-500 text-white p-2 rounded">Delete</button>```✅ Correct:```tsximport { Button } from "@/components/ui/button"<Button variant="destructive">Delete</Button>```</example><theming>Use semantic colors from tailwind.config.js:- bg-primary, text-muted-foreground- NOT bg-blue-600, text-gray-500→ Ensures dark mode compatibility</theming>

Frequently asked questions

Ask Shadcn Architect