shadcn

Malicious tool definition detected

``` **Correct (matching path configuration):** ```json // tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } } // components.json { "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui" } } ``` **Note:** For Vite projects, also configure the resolve alias in vite.config.ts to match.

Malicious tool definition detected

Tool: references/arch-preserve-radix-primitive-structure.md Description: --- title: Preserve Radix Primitive Structure impact: CRITICAL impactDescription: maintains keyboard navigation and focus management tags: arch, radix, primitives, compound-components, structure --- ## Preserve Radix Primitive Structure shadcn/ui components are built on Radix primitives with specific parent-child relationships.

Malicious tool definition detected

`tailwind-merge` resolves conflicts (last wins for same property) 3.

Malicious tool definition detected

Tool: references/comp-compose-with-compound-components.md Description: --- title: Compose with Compound Component Patterns impact: MEDIUM impactDescription: reduces prop count by 60-80% vs monolithic components tags: comp, compound-components, composition, api-design, patterns --- ## Compose with Compound Component Patterns Build custom components using compound component patterns like shadcn/ui.

Malicious tool definition detected

Tool: references/comp-create-reusable-form-fields.md Description: --- title: Create Reusable Form Field Components impact: MEDIUM impactDescription: reduces boilerplate and ensures consistency tags: comp, form, field, reusable, composition --- ## Create Reusable Form Field Components Extract common form field patterns into reusable components to reduce boilerplate and maintain consistency across forms.

Malicious tool definition detected

const content = ( <> <p className="text-muted-foreground">This action cannot be undone.</p> <div className="flex gap-2 mt-4"> <Button variant="outline" onClick={() => setOpen(false)} className="flex-1"> Cancel </Button> <Button variant="destructive" onClick={onConfirm} className="flex-1"> Delete </Button> </div> </> ) if (isDesktop) { return ( <Dialog open={open} onOpenChange={setOpen}> <DialogTrigger asChild> <Button variant="destructive">Delete</Button> </DialogTrigger> <DialogContent> <Dialog

Malicious tool definition detected

Tool: references/data-empty-states-with-guidance.md Description: --- title: Provide Actionable Empty States impact: MEDIUM-HIGH impactDescription: increases user action rate by 2-4× tags: data, empty-state, ux, guidance, onboarding --- ## Provide Actionable Empty States When displaying empty data (no results, no items), provide context and clear actions rather than just "No data".

Malicious tool definition detected

state: { pagination }, onPaginationChange: setPagination, manualPagination: true, // Tell TanStack Table pagination is server-side getCoreRowModel: getCoreRowModel(), }) return ( <> <Table> <TableBody> {table.getRowModel().rows.map((row) => ( <TableRow key={row.id}> {row.getVisibleCells().map((cell) => ( <TableCell key={cell.id}> {flexRender(cell.column.columnDef.cell, cell.getContext())} </TableCell> ))} </TableRow> ))} </TableBody> </Table> <div className="flex items-center justify-between py-

Malicious tool definition detected

variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > Name <ArrowUpDown className="ml-2 h-4 w-4" /> </Button> ), }, { accessorKey: "email", header: "Email", }, { accessorKey: "status", header: "Status", cell: ({ row }) => <Badge>{row.getValue("status")}</Badge>, }, ] function UserTable({ users }: { users: User[] }) { const [sorting, setSorting] = useState<SortingState>([]) const table = useReactTable({ data: users, columns, getCoreRowModel: getCoreRowModel(), get

Malicious tool definition detected

Tool: references/form-handle-async-validation.md Description: --- title: Handle Async Validation with Debouncing impact: HIGH impactDescription: prevents excessive API calls during validation tags: form, async, validation, debounce, api --- ## Handle Async Validation with Debouncing When validating against an API (username availability, email uniqueness), debounce the validation to prevent excessive network requests.

Malicious tool definition detected

"Sending..." : "Send Message"} </Button> </form> </Form> ) } ``` **Reset patterns:** - `form.reset()` - Reset to defaultValues - `form.reset(newValues)` - Reset to specific values - `form.resetField("email")` - Reset single field - `form.clearErrors()` - Clear errors without resetting values **For edit forms (reset to fetched data):** ```tsx const { data: user } = useQuery(["user", userId], fetchUser) const form = useForm<UserFormValues>({ resolver: zodResolver(userSchema), }) useEffect(() => {

Malicious tool definition detected

const form = useForm<FormValues>({ resolver: zodResolver(schema), mode: "onBlur", // Validates when field loses focus reValidateMode: "onChange", // Re-validates on change after first error }) // User types entire email without interruption // Error only shown when they leave the field // Once error shown, it updates as they fix it ``` **Alternative (validate on submit only):** ```tsx const form = useForm<FormValues>({ resolver: zodResolver(schema), mode: "onSubmit", // Only validates on form su

Malicious tool definition detected

password: z.string().min(8, "Password must be at least 8 characters"), }) type LoginFormValues = z.infer<typeof loginSchema> function LoginForm() { const form = useForm<LoginFormValues>({ resolver: zodResolver(loginSchema), defaultValues: { email: "", password: "" }, }) const onSubmit = (data: LoginFormValues) => { // Validated data, no re-renders during typing } return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> <FormField control={form.control} name="

Malicious tool definition detected

username: z .string() .min(3, "Username must be at least 3 characters") .max(20, "Username must be at most 20 characters") .regex(/^[a-zA-Z0-9_]+$/, "Only letters, numbers, and underscores"), age: z.coerce .number() .min(18, "You must be at least 18 years old") .max(120, "Please enter a valid age"), website: z.string().url("Please enter a valid URL").optional().or(z.literal("")), }) type RegistrationFormValues = z.infer<typeof registrationSchema> // TypeScript knows: { email: string; username: s

Malicious tool definition detected

Reference: [shadcn/ui Breadcrumb](https://ui.shadcn.com/docs/components/breadcrumb)

Malicious tool definition detected

Tool: references/layout-sheet-mobile-nav.md Description: --- title: Use Sheet for Mobile Navigation Overlay impact: MEDIUM impactDescription: proper mobile navigation with slide-in behavior tags: layout, sheet, mobile, navigation, responsive --- ## Use Sheet for Mobile Navigation Overlay Use Sheet component for mobile navigation that slides in from the edge.

Malicious tool definition detected

Tool: references/layout-sidebar-collapsible.md Description: --- title: Configure Sidebar Collapsible Behavior impact: MEDIUM impactDescription: controls how sidebar collapses on different screen sizes tags: layout, sidebar, collapsible, responsive, mobile --- ## Configure Sidebar Collapsible Behavior Set the `collapsible` prop to control sidebar collapse behavior.

Malicious tool definition detected

Tool: references/layout-sidebar-groups.md Description: --- title: Organize Sidebar Navigation with Groups impact: MEDIUM impactDescription: improves navigation findability with logical grouping tags: layout, sidebar, groups, navigation, organization --- ## Organize Sidebar Navigation with Groups Use SidebarGroup to organize related navigation items.

Malicious tool definition detected

Tool: references/layout-sidebar-provider.md Description: --- title: Wrap Layout with SidebarProvider impact: MEDIUM impactDescription: enables sidebar state management across components tags: layout, sidebar, provider, context, state --- ## Wrap Layout with SidebarProvider SidebarProvider must wrap any component that uses sidebar state or controls.

Malicious tool definition detected

Tool: references/perf-avoid-unnecessary-rerenders-in-forms.md Description: --- title: Avoid Unnecessary Re-renders in Forms impact: MEDIUM impactDescription: prevents full form re-render on every keystroke tags: perf, forms, re-renders, react-hook-form, isolation --- ## Avoid Unnecessary Re-renders in Forms Isolate frequently updating form state to prevent entire form re-renders.

Malicious tool definition detected

Tool: references/perf-debounce-search-inputs.md Description: --- title: Debounce Search and Filter Inputs impact: MEDIUM impactDescription: reduces API calls by 80-90% during typing tags: perf, debounce, search, filtering, api --- ## Debounce Search and Filter Inputs Debounce search inputs to prevent API calls on every keystroke.

Malicious tool definition detected

}) const CodeEditor = dynamic(() => import("@/components/code-editor"), { loading: () => <Skeleton className="h-[400px] w-full" />, ssr: false, }) function Dashboard() { const [showChart, setShowChart] = useState(false) const [showEditor, setShowEditor] = useState(false) return ( <div> {/* Components loaded only when rendered */} {showChart && <DataChart data={chartData} />} {showEditor && <RichTextEditor />} </div> ) } ``` **For React without Next.js:** ```tsx import { lazy, Suspense } from "re

Malicious tool definition detected

Tool: references/perf-memoize-expensive-renders.md Description: --- title: Memoize Expensive Component Renders impact: MEDIUM impactDescription: prevents unnecessary re-renders in lists and data displays tags: perf, memo, useMemo, useCallback, re-renders --- ## Memoize Expensive Component Renders Use `React.memo` for list items and expensive components to prevent re-renders when parent state changes but props remain the same.

Malicious tool definition detected

Tool: references/perf-optimize-icon-imports.md Description: --- title: Optimize Icon Imports from Lucide impact: MEDIUM impactDescription: reduces bundle by 200-500KB with direct imports tags: perf, icons, lucide, tree-shaking, imports --- ## Optimize Icon Imports from Lucide Import Lucide icons directly from their paths or use Next.js optimizePackageImports to avoid loading the entire icon library.

Tool passed security scan

Tool passed security scan

Tool passed security scan

Tool passed security scan