impertio-studio/shadcn-ui-claude-skill-package

1

shadcn-core-architecture Use when starting a new project that needs UI components, evaluating shadcn ui versus a traditional component library…

impertio-studio/shadcn-ui-claude-skill-package

6

2

shadcn-errors-styling-conflicts Use when a className override on a shadcn component does not visually take effect, when two Tailwind utility classes …

impertio-studio/shadcn-ui-claude-skill-package

6

3

shadcn-impl-data-table Use when building any sortable, filterable, paginated, selectable, or column-toggleable table in shadcn ui : the offi…

impertio-studio/shadcn-ui-claude-skill-package

6

4

shadcn-impl-form-validation Use when building an end-to-end form workflow in shadcn ui that combines the Form composition primitives with react-h…

impertio-studio/shadcn-ui-claude-skill-package

6

5

shadcn-impl-responsive-dialog-drawer Use when building a modal surface that must look correct on both desktop and mobile in shadcn ui, when the design cal…

impertio-studio/shadcn-ui-claude-skill-package

6

6

shadcn-impl-rsc-vs-client-boundaries Use when wiring shadcn components into a Next.js App Router project, when deciding whether a given shadcn primitive n…

impertio-studio/shadcn-ui-claude-skill-package

6

7

shadcn-syntax-selectors Use when picking the right "selector" primitive in a shadcn ui app and you are unsure whether to reach for a Native H…

impertio-studio/shadcn-ui-claude-skill-package

6

8

shadcn-syntax-sheet Use when building a side panel, slide-in drawer, off-canvas navigation, filter panel, settings tray, or any container…

impertio-studio/shadcn-ui-claude-skill-package

6

9

shadcn-syntax-toast-sonner Use when adding, debugging, or migrating notification toasts in a shadcn ui project, mounting the top-level `<Toaster…

impertio-studio/shadcn-ui-claude-skill-package

6

10

shadcn-agents-component-selector Use when a user describes a UI requirement in plain English ("a modal to edit a record", "a searchable dropdown of co…

impertio-studio/shadcn-ui-claude-skill-package

5

11

shadcn-agents-cva-validator Use when reviewing, validating, or auditing a shadcn ui component that uses class-variance-authority (cva), when an L…

impertio-studio/shadcn-ui-claude-skill-package

5

12

shadcn-agents-form-validator Use when validating a react-hook-form + zod + shadcn Form integration in a code review, a draft AI-generated form, or…

impertio-studio/shadcn-ui-claude-skill-package

5

13

shadcn-agents-rsc-boundary-validator Use when auditing a Next.js App Router codebase that consumes shadcn ui for misplaced or missing `"use client"` direc…

impertio-studio/shadcn-ui-claude-skill-package

5

14

shadcn-core-blocks Use when scaffolding a full page (dashboard, login, signup, sidebar layout, calendar app), bootstrapping a starter te…

impertio-studio/shadcn-ui-claude-skill-package

5

15

shadcn-core-cli Use when running any shadcn CLI command (init, add, view, search, apply, preset, build, docs, info, migrate), when wr…

impertio-studio/shadcn-ui-claude-skill-package

5

16

shadcn-core-registry Use when authoring or consuming a shadcn registry, when configuring the `registries` field in components.json, when w…

impertio-studio/shadcn-ui-claude-skill-package

5

17

shadcn-core-stack Use when reading or writing any shadcn ui component, especially when figuring out which library owns which concern (a…

impertio-studio/shadcn-ui-claude-skill-package

5

18

shadcn-core-theming Use when wiring shadcn ui colors, dark mode, the design-token palette, or migrating a project between Tailwind v3 and…

impertio-studio/shadcn-ui-claude-skill-package

5

19

shadcn-errors-cli-sync-mismatch Use when re-running `shadcn add <component>` would overwrite a file in `components/ui/` that you have edited locally,…

impertio-studio/shadcn-ui-claude-skill-package

5

20

shadcn-errors-cmdk-version-drift Use when a shadcn ui Command primitive (command palette, Combobox, search list, fuzzy filter, multi-select dropdown) …

impertio-studio/shadcn-ui-claude-skill-package

5

21

shadcn-errors-form-state Use when a shadcn Form built on react-hook-form silently submits with missing values, when a Radix Select or Checkbox…

impertio-studio/shadcn-ui-claude-skill-package

5

22

shadcn-errors-radix-controlled Use when a shadcn Dialog / Sheet / Drawer / DropdownMenu / Popover / HoverCard / Select / AlertDialog / ContextMenu /…

impertio-studio/shadcn-ui-claude-skill-package

5

23

shadcn-errors-react-day-picker-v9 Use when a shadcn `Calendar` (or any direct `react-day-picker` DayPicker) silently renders nothing, throws a TypeScri…

impertio-studio/shadcn-ui-claude-skill-package

5

24

shadcn-errors-tailwind-v3-v4-migration Use when a shadcn ui project must move from Tailwind CSS v3 to v4, when colors break or look washed out after a Tailw…

impertio-studio/shadcn-ui-claude-skill-package

5

25

shadcn-impl-component-install Use when adding a new component to a project that already uses shadcn, when bootstrapping shadcn for the first time i…

impertio-studio/shadcn-ui-claude-skill-package

5

26

shadcn-impl-framework-integration Use when initializing shadcn ui inside a Vite, Next.js (App or Pages Router), React Router v7 (former Remix), Astro, …

impertio-studio/shadcn-ui-claude-skill-package

5

27

shadcn-impl-theming-custom Use when building or customizing a theme in a shadcn ui project, wiring the dark mode toggle, replacing the default p…

impertio-studio/shadcn-ui-claude-skill-package

5

28

shadcn-syntax-button Use when adding, customising, or debugging a shadcn ui Button, choosing between the six built-in variants (default / …

impertio-studio/shadcn-ui-claude-skill-package

5

29

shadcn-syntax-calendar-datepicker Use when adding, customising, or debugging a shadcn ui Calendar or Date Picker, choosing between the three react-day-…

impertio-studio/shadcn-ui-claude-skill-package

5

30

shadcn-syntax-chart Use when building data visualizations with the shadcn Chart primitive that wraps Recharts (Bar, Line, Area, Pie, Rada…

impertio-studio/shadcn-ui-claude-skill-package

5

31

shadcn-syntax-command Use when adding, debugging, or refactoring a shadcn ui Command primitive (the cmdk-backed command-palette / fuzzy-fil…

impertio-studio/shadcn-ui-claude-skill-package

5

32

shadcn-syntax-dialog Use when adding, debugging, or refactoring a shadcn ui Dialog (a focus- trapped modal that overlays the page), compos…

impertio-studio/shadcn-ui-claude-skill-package

5

33

shadcn-syntax-drawer Use when building a mobile-first bottom-sheet, swipe-to-dismiss panel, multi-stop drawer (snap points), or any slidin…

impertio-studio/shadcn-ui-claude-skill-package

5

34

shadcn-syntax-field Use when building forms in shadcn ui evergreen-2026 and the new Field primitive family is the recommended path, when …

impertio-studio/shadcn-ui-claude-skill-package

5

35

shadcn-syntax-form Use when building forms with shadcn ui and react-hook-form plus zod, when composing the seven Form primitives (Form, …

impertio-studio/shadcn-ui-claude-skill-package

5

36

shadcn-syntax-input-otp Use when building a one-time-password, verification-code, MFA, two-factor, SMS-code, or PIN-entry input in shadcn ui …

impertio-studio/shadcn-ui-claude-skill-package

5

37

shadcn-syntax-layout-primitives Use when adding, debugging, or refactoring any of the four shadcn ui layout-helper primitives : Resizable (drag-to-re…

impertio-studio/shadcn-ui-claude-skill-package

5

38

shadcn-syntax-menu-primitives Use when adding, debugging, or refactoring any shadcn ui menu surface : DropdownMenu (button-triggered popup), Contex…

impertio-studio/shadcn-ui-claude-skill-package

5

39

shadcn-syntax-popover-tooltip-hovercard Use when picking between Popover, Tooltip, and HoverCard for any floating panel above the page : a click-to-open form…

impertio-studio/shadcn-ui-claude-skill-package

5

40

shadcn-syntax-sidebar Use when building an application shell, dashboard navigation, admin sidebar, collapsible side navigation, or any pers…

impertio-studio/shadcn-ui-claude-skill-package

5

41

shadcn-syntax-table Use when adding, customising, or debugging the shadcn ui Table primitive (the eight subcomponents Table, TableHeader,…

impertio-studio/shadcn-ui-claude-skill-package

5

42

shadcn-syntax-variant-cva Use when defining or modifying variants on a shadcn ui component, writing a new component that needs `variant` / `siz…

impertio-studio/shadcn-ui-claude-skill-package

5