The Shadcn Rule Pack adapts @shadcn/lint findings into Doctor Diagnostics. Its Rules inspect JSX in JavaScript and TypeScript files. Vue single-file components are skipped.
Install and run
Install Vite Doctor in the project:
pnpm add -D vite-doctor
Doctor activates the Recommended Preset when Project Inventory contains tailwindcss. It includes raw colors, arbitrary values, and inline styles:
pnpm vite-doctor .
The Strict Preset includes all six Rules, adding component restyling, unreadable class values, and unknown classes:
pnpm vite-doctor . --extends auto,shadcn/strict
To diagnose one Rule:
pnpm vite-doctor . --extends shadcn/strict --rules shadcn/no-inline-styles
Component recognition and options
Component-specific Rules need to recognize the project's design-system imports. Pass upstream Rule options through Doctor's rule configuration. For example, this doctor.config.ts recognizes components imported below @/components/ui/ and allows layout classes on those components:
import { defineDoctorConfig } from "vite-doctor/config";
export default defineDoctorConfig({
extends: ["auto", "shadcn/strict"],
rules: {
"shadcn/no-restyle": ["warn", { componentImports: ["^@/components/ui/"], allow: ["layout"] }],
"shadcn/require-static-classes": ["warn", { componentImports: ["^@/components/ui/"] }],
},
});
Load executable configuration explicitly:
pnpm vite-doctor . --config doctor.config.ts
Use the upstream Rule documentation for each Rule's options and recognition limits. The examples demonstrate behavior without a resolvable theme: SVG colors can inherit currentColor, and unknown classes are checked against a reduced fallback that includes bundled utilities plus discovered @utility names and CSS class selectors. This fallback does not validate theme tokens or provide spelling suggestions. Undeclared color-token checks and theme replacement suggestions require a readable theme. Review suggested edits against the design system before applying them.