G
GTM Vault
Browse
  • Dashboard
    • Automations
    • Skills
    • Prompts
    • Makers
  • Sign in
All Skills

shadcn-audit

Audit shadcn/ui setup for common issues — base-ui imports, wrong style, missing deps, broken patterns

skillFrontend DevelopmentClaude Code SkillsInternal Ops
Original
by Roheel Jain
Skill Content

Shadcn/UI Audit

Run a comprehensive check for all known shadcn pitfalls. Report findings as a checklist.

Check 1: components.json style

Read components.json. Report:

  • "style" is "new-york" (FAIL if "base-nova")

Check 2: No base-ui imports

Run: grep -r "@base-ui/react" src/

  • Zero results (FAIL if any file still imports base-ui)

If failures found, list every file that needs replacing.

Check 3: No registry import paths

Run: grep -r "@/registry" src/

  • Zero results (FAIL if any component has unfixed registry paths)

Check 4: Package dependencies

Read package.json. Check:

  • radix-ui is in dependencies
  • @base-ui/react is NOT in dependencies
  • class-variance-authority is in dependencies (needed by button, badge, sidebar)

Check 5: Sidebar dependencies (if sidebar exists)

If src/components/ui/sidebar.tsx exists, verify:

  • src/hooks/use-mobile.tsx exists
  • src/components/ui/skeleton.tsx exists
  • src/components/ui/tooltip.tsx exists and imports from "radix-ui"
  • src/components/ui/collapsible.tsx exists and imports from "radix-ui"
  • src/components/ui/sheet.tsx exists and imports from "radix-ui"
  • src/components/ui/separator.tsx exists and imports from "radix-ui"
  • src/components/ui/avatar.tsx exists and imports from "radix-ui"
  • src/components/ui/button.tsx exists and imports Slot from "radix-ui"
  • src/components/ui/input.tsx exists

Check 6: Sidebar collapsible pattern (if app-sidebar exists)

Read src/components/app-sidebar.tsx (or equivalent). Check:

  • Collapsible groups use <Collapsible asChild><SidebarMenuItem><CollapsibleTrigger asChild><SidebarMenuButton> pattern
  • NOT using <SidebarGroupLabel asChild><CollapsibleTrigger> pattern (this is WRONG)
  • SidebarTrigger exists inside the sidebar for visible collapse toggle
  • Sub-items are text-only in SidebarMenuSub (no icons)

Check 7: Font setup (Tailwind v4 + Next.js)

Read src/app/globals.css. Check:

  • @layer base { html { font-family: var(--font-geist-sans), ... } } is set directly (not via @apply font-sans)
  • @theme inline does NOT have --font-sans: var(--font-sans) (circular reference)
  • code, pre have mono font family set

Check 8: Build

Run npm run build.

  • Zero TypeScript errors
  • Zero build warnings related to shadcn components

Report

Present all results as a checklist. For any failures, provide the exact fix needed.

Tech Stack
JavaScript
JavaScript