القائمة
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill shadcnيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | shadcn |
| description | Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems. |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | software-development |
| category | frontend |
| risk | safe |
| source | https://github.com/shadcn-ui/ui/tree/main/skills/shadcn |
| tags | ["skill","software-development","frontend","shadcn"] |
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.
npx shadcn@latest search to check registries before writing custom UI. Check community registries too.variant="outline", size="sm", etc.bg-primary, text-muted-foreground — never raw values like bg-blue-500.These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.
className for layout, not styling.space-x-* or space-y-*. Use flex with gap-*. For vertical stacks, flex flex-col gap-*.size-* when width and height are equal. size-10 not w-10 h-10.truncate shorthand. Not overflow-hidden text-ellipsis whitespace-nowrap.dark: color overrides. Use semantic tokens (bg-background, text-muted-foreground).cn() for conditional classes. Don't write manual template literal ternaries.z-index on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.FieldGroup + Field. Never use raw div with space-y-* or grid gap-* for form layout.InputGroup uses InputGroupInput/InputGroupTextarea. Never raw Input/Textarea inside InputGroup.InputGroup + InputGroupAddon.ToggleGroup. Don't loop Button with manual active state.FieldSet + FieldLegend for grouping related checkboxes/radios. Don't use a div with a heading.data-invalid + aria-invalid. data-invalid on Field, aria-invalid on the control. For disabled: data-disabled on Field, disabled on the control.SelectItem → SelectGroup. DropdownMenuItem → DropdownMenuGroup. CommandItem → CommandGroup.asChild (radix) or render (base) for custom triggers. Check base field from npx shadcn@latest info. → base-vs-radix.mdDialogTitle, SheetTitle, DrawerTitle required for accessibility. Use className="sr-only" if visually hidden.CardHeader/CardTitle/CardDescription/CardContent/CardFooter. Don't dump everything in CardContent.isPending/isLoading. Compose with Spinner + data-icon + disabled.TabsTrigger must be inside TabsList. Never render triggers directly in Tabs.Avatar always needs AvatarFallback. For when the image fails to load.div.Alert. Don't build custom styled divs.Empty. Don't build custom empty state markup.sonner. Use toast() from sonner.Separator instead of <hr> or <div className="border-t">.Skeleton for loading placeholders. No custom animate-pulse divs.Badge instead of custom styled spans.Button use data-icon. data-icon="inline-start" or data-icon="inline-end" on the icon.size-4 or w-4 h-4.icon={CheckIcon}, not a string lookup.npx shadcn@latest init --preset <code>.These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
// Form layout: FieldGroup + Field, not div + Label.
<FieldGroup>
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" />
</Field>
</FieldGroup>
// Validation: data-invalid on Field, aria-invalid on the control.
<Field data-invalid>
<FieldLabel>Email</FieldLabel>
<Input aria-invalid />
<FieldDescription>Invalid email.</FieldDescription>
</Field>
// Icons in buttons: data-icon, no sizing classes.
<Button>
<SearchIcon data-icon="inline-start" />
Search
</Button>
// Spacing: gap-*, not space-y-*.
<div className="flex flex-col gap-4"> // correct
<div className="space-y-4"> // wrong
// Equal dimensions: size-*, not w-* h-*.
<Avatar className="size-10"> // correct
<Avatar className="w-10 h-10"> // wrong
// Status colors: Badge variants or semantic tokens, not raw colors.
<Badge variant="secondary">+20.1%</Badge> // correct
<span className="text-emerald-600">+20.1%</span> // wrong
| Need | Use |
|---|---|
| Button/action | Button with appropriate variant |
| Form inputs | Input, Select, Combobox, Switch, Checkbox, RadioGroup, Textarea, InputOTP, Slider |
| Toggle between 2–5 options | ToggleGroup + ToggleGroupItem |
| Data display | Table, Card, Badge, Avatar |
| Navigation | Sidebar, NavigationMenu, Breadcrumb, Tabs, Pagination |
| Overlays | Dialog (modal), Sheet (side panel), Drawer (bottom sheet), AlertDialog (confirmation) |
| Feedback | sonner (toast), Alert, Progress, Skeleton, Spinner |
| Command palette | Command inside Dialog |
| Charts | Chart (wraps Recharts) |
| Layout | Card, Separator, Resizable, ScrollArea, Accordion, Collapsible |
| Empty states | Empty |
| Menus | DropdownMenu, ContextMenu, Menubar |
| Tooltips/info | Tooltip, HoverCard, Popover |
The injected project context contains these key fields:
aliases → use the actual alias prefix for imports (e.g. @/, ~/), never hardcode.isRSC → when true, components using useState, useEffect, event handlers, or browser APIs need "use client" at the top of the file. Always reference this field when advising on the directive.tailwindVersion → "v4" uses @theme inline blocks; "v3" uses tailwind.config.js.tailwindCssFile → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.style → component visual treatment (e.g. nova, vega).base → primitive library (radix or base). Affects component APIs and available props.iconLibrary → determines icon imports. Use lucide-react for lucide, @tabler/icons-react for tabler, etc. Never assume lucide-react.resolvedPaths → exact file-system destinations for components, utils, hooks, etc.framework → routing and file conventions (e.g. Next.js App Router vs Vite SPA).packageManager → use this for any non-shadcn dependency installs (e.g. pnpm add date-fns vs npm install date-fns).See cli.md — info command for the full field reference.
Run npx shadcn@latest docs <component> to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
npx shadcn@latest docs button dialog select
When creating, fixing, debugging, or using a component, always run npx shadcn@latest docs and fetch the URLs first. This ensures you're working with the correct API and usage patterns rather than guessing.
npx shadcn@latest info again if you need to refresh.add, always check the components list from project context or list the resolvedPaths.ui directory. Don't import components that haven't been added, and don't re-add ones already installed.npx shadcn@latest search.npx shadcn@latest docs <component> to get URLs, then fetch them. Use npx shadcn@latest view to browse registry items you haven't installed. To preview changes to installed components, use npx shadcn@latest add --diff.npx shadcn@latest add. When updating existing components, use --dry-run and --diff to preview changes first (see Updating Components below).@bundui, @magicui), check the added non-UI files for hardcoded import paths like @/components/ui/.... These won't match the project's actual aliases. Use npx shadcn@latest info to get the correct ui alias (e.g. @workspace/ui/components) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.SelectItem without SelectGroup), missing imports, incorrect composition, or violations of the Critical Rules. Also replace any icon imports with the project's iconLibrary from the project context (e.g. if the registry item uses lucide-react but the project uses hugeicons, swap the imports and icon names accordingly). Fix all issues before moving on.@shadcn, @tailark, etc.), ask which registry to use. Never default to a registry on behalf of the user.npx shadcn@latest init --preset <code> --force --reinstall. Overwrites all components.npx shadcn@latest init --preset <code> --force --no-reinstall, then run npx shadcn@latest info to list installed components, then for each installed component use --dry-run and --diff to smart merge it individually.npx shadcn@latest init --preset <code> --force --no-reinstall. Only updates config and CSS, leaves components as-is.When the user asks to update a component from upstream while keeping their local changes, use --dry-run and --diff to intelligently merge. NEVER fetch raw files from GitHub manually — always use the CLI.
npx shadcn@latest add <component> --dry-run to see all files that would be affected.npx shadcn@latest add <component> --diff <file> to see what changed upstream vs local.--overwrite, but confirm first.--overwrite without the user's explicit approval.# Create a new project.
npx shadcn@latest init --name my-app --preset base-nova
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
# Create a monorepo project.
npx shadcn@latest init --name my-app --preset base-nova --monorepo
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
# Initialize existing project.
npx shadcn@latest init --preset base-nova
npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova
# Add components.
npx shadcn@latest add button card dialog
npx shadcn@latest add @magicui/shimmer-button
npx shadcn@latest add --all
# Preview changes before adding/updating.
npx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff button.tsx
npx shadcn@latest add @acme/form --view button.tsx
# Search registries.
npx shadcn@latest search @shadcn -q "sidebar"
npx shadcn@latest search @tailark -q "stats"
# Get component docs and example URLs.
npx shadcn@latest docs button dialog select
# View registry item details (for items not yet installed).
npx shadcn@latest view @shadcn/button
Named presets: base-nova, radix-nova
Templates: next, vite, start, react-router, astro (all support --monorepo) and laravel (not supported for monorepo)
Preset codes: Base62 strings starting with a (e.g. a2r6bw), from ui.shadcn.com.
evals/evals.jsonassets/shadcn-small.pngassets/shadcn.pngagents/openai.yml