{"slug":"shadcn-2","title":"shadcn","summary":"Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a compon","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-17T09:13:11.864583Z","repo":{"url":"https://github.com/invergent-ai/surogates","stars":28,"forks":1,"license":"AGPL-3.0","updatedAt":"2026-10-16T18:37:14Z"},"bodyHtml":"<hr>\n<h2>name: shadcn\ndescription: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for \"shadcn init\", \"create an app with --preset\", or \"switch to --preset\".\nuser-invocable: false\nallowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)</h2>\n<h1>shadcn/ui</h1>\n<p>A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.</p>\n<blockquote>\n<p><strong>IMPORTANT:</strong> Run all CLI commands using the project's package runner: <code>npx shadcn@latest</code>, <code>pnpm dlx shadcn@latest</code>, or <code>bunx --bun shadcn@latest</code> — based on the project's <code>packageManager</code>. Examples below use <code>npx shadcn@latest</code> but substitute the correct runner for the project.</p>\n</blockquote>\n<h2>Current Project Context</h2>\n<pre><code>!`npx shadcn@latest info --json`\n</code></pre>\n<p>The JSON above contains the project config and installed components. Use <code>npx shadcn@latest docs &lt;component&gt;</code> to get documentation and example URLs for any component.</p>\n<h2>Principles</h2>\n<ol>\n<li><strong>Use existing components first.</strong> Use <code>npx shadcn@latest search</code> to check registries before writing custom UI. Check community registries too.</li>\n<li><strong>Compose, don't reinvent.</strong> Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.</li>\n<li><strong>Use built-in variants before custom styles.</strong> <code>variant=\"outline\"</code>, <code>size=\"sm\"</code>, etc.</li>\n<li><strong>Use semantic colors.</strong> <code>bg-primary</code>, <code>text-muted-foreground</code> — never raw values like <code>bg-blue-500</code>.</li>\n</ol>\n<h2>Critical Rules</h2>\n<p>These rules are <strong>always enforced</strong>. Each links to a file with Incorrect/Correct code pairs.</p>\n<h3>Styling &amp; Tailwind → <a href=\"./rules/styling.md\">styling.md</a></h3>\n<ul>\n<li><strong><code>className</code> for layout, not styling.</strong> Never override component colors or typography.</li>\n<li><strong>No <code>space-x-*</code> or <code>space-y-*</code>.</strong> Use <code>flex</code> with <code>gap-*</code>. For vertical stacks, <code>flex flex-col gap-*</code>.</li>\n<li><strong>Use <code>size-*</code> when width and height are equal.</strong> <code>size-10</code> not <code>w-10 h-10</code>.</li>\n<li><strong>Use <code>truncate</code> shorthand.</strong> Not <code>overflow-hidden text-ellipsis whitespace-nowrap</code>.</li>\n<li><strong>No manual <code>dark:</code> color overrides.</strong> Use semantic tokens (<code>bg-background</code>, <code>text-muted-foreground</code>).</li>\n<li><strong>Use <code>cn()</code> for conditional classes.</strong> Don't write manual template literal ternaries.</li>\n<li><strong>No manual <code>z-index</code> on overlay components.</strong> Dialog, Sheet, Popover, etc. handle their own stacking.</li>\n</ul>\n<h3>Forms &amp; Inputs → <a href=\"./rules/forms.md\">forms.md</a></h3>\n<ul>\n<li><strong>Forms use <code>FieldGroup</code> + <code>Field</code>.</strong> Never use raw <code>div</code> with <code>space-y-*</code> or <code>grid gap-*</code> for form layout.</li>\n<li><strong><code>InputGroup</code> uses <code>InputGroupInput</code>/<code>InputGroupTextarea</code>.</strong> Never raw <code>Input</code>/<code>Textarea</code> inside <code>InputGroup</code>.</li>\n<li><strong>Buttons inside inputs use <code>InputGroup</code> + <code>InputGroupAddon</code>.</strong></li>\n<li><strong>Option sets (2–7 choices) use <code>ToggleGroup</code>.</strong> Don't loop <code>Button</code> with manual active state.</li>\n<li><strong><code>FieldSet</code> + <code>FieldLegend</code> for grouping related checkboxes/radios.</strong> Don't use a <code>div</code> with a heading.</li>\n<li><strong>Field validation uses <code>data-invalid</code> + <code>aria-invalid</code>.</strong> <code>data-invalid</code> on <code>Field</code>, <code>aria-invalid</code> on the control. For disabled: <code>data-disabled</code> on <code>Field</code>, <code>disabled</code> on the control.</li>\n</ul>\n<h3>Component Structure → <a href=\"./rules/composition.md\">composition.md</a></h3>\n<ul>\n<li><strong>Items always inside their Group.</strong> <code>SelectItem</code> → <code>SelectGroup</code>. <code>DropdownMenuItem</code> → <code>DropdownMenuGroup</code>. <code>CommandItem</code> → <code>CommandGroup</code>.</li>\n<li><strong>Use <code>asChild</code> (radix) or <code>render</code> (base) for custom triggers.</strong> Check <code>base</code> field from <code>npx shadcn@latest info</code>. → <a href=\"./rules/base-vs-radix.md\">base-vs-radix.md</a></li>\n<li><strong>Dialog, Sheet, and Drawer always need a Title.</strong> <code>DialogTitle</code>, <code>SheetTitle</code>, <code>DrawerTitle</code> required for accessibility. Use <code>className=\"sr-only\"</code> if visually hidden.</li>\n<li><strong>Use full Card composition.</strong> <code>CardHeader</code>/<code>CardTitle</code>/<code>CardDescription</code>/<code>CardContent</code>/<code>CardFooter</code>. Don't dump everything in <code>CardContent</code>.</li>\n<li><strong>Button has no <code>isPending</code>/<code>isLoading</code>.</strong> Compose with <code>Spinner</code> + <code>data-icon</code> + <code>disabled</code>.</li>\n<li><strong><code>TabsTrigger</code> must be inside <code>TabsList</code>.</strong> Never render triggers directly in <code>Tabs</code>.</li>\n<li><strong><code>Avatar</code> always needs <code>AvatarFallback</code>.</strong> For when the image fails to load.</li>\n</ul>\n<h3>Use Components, Not Custom Markup → <a href=\"./rules/composition.md\">composition.md</a></h3>\n<ul>\n<li><strong>Use existing components before custom markup.</strong> Check if a component exists before writing a styled <code>div</code>.</li>\n<li><strong>Callouts use <code>Alert</code>.</strong> Don't build custom styled divs.</li>\n<li><strong>Empty states use <code>Empty</code>.</strong> Don't build custom empty state markup.</li>\n<li><strong>Toast via <code>sonner</code>.</strong> Use <code>toast()</code> from <code>sonner</code>.</li>\n<li><strong>Use <code>Separator</code></strong> instead of <code>&lt;hr&gt;</code> or <code>&lt;div className=\"border-t\"&gt;</code>.</li>\n<li><strong>Use <code>Skeleton</code></strong> for loading placeholders. No custom <code>animate-pulse</code> divs.</li>\n<li><strong>Use <code>Badge</code></strong> instead of custom styled spans.</li>\n</ul>\n<h3>Icons → <a href=\"./rules/icons.md\">icons.md</a></h3>\n<ul>\n<li><strong>Icons in <code>Button</code> use <code>data-icon</code>.</strong> <code>data-icon=\"inline-start\"</code> or <code>data-icon=\"inline-end\"</code> on the icon.</li>\n<li><strong>No sizing classes on icons inside components.</strong> Components handle icon sizing via CSS. No <code>size-4</code> or <code>w-4 h-4</code>.</li>\n<li><strong>Pass icons as objects, not string keys.</strong> <code>icon={CheckIcon}</code>, not a string lookup.</li>\n</ul>\n<h3>CLI</h3>\n<ul>\n<li><strong>Never decode or fetch preset codes manually.</strong> Pass them directly to <code>npx shadcn@latest apply --preset &lt;code&gt;</code> for existing projects, or <code>npx shadcn@latest init --preset &lt;code&gt;</code> when initializing.</li>\n</ul>\n<h2>Key Patterns</h2>\n<p>These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.</p>\n<pre><code>// Form layout: FieldGroup + Field, not div + Label.\n&lt;FieldGroup&gt;\n  &lt;Field&gt;\n    &lt;FieldLabel htmlFor=\"email\"&gt;Email&lt;/FieldLabel&gt;\n    &lt;Input id=\"email\" /&gt;\n  &lt;/Field&gt;\n&lt;/FieldGroup&gt;\n\n// Validation: data-invalid on Field, aria-invalid on the control.\n&lt;Field data-invalid&gt;\n  &lt;FieldLabel&gt;Email&lt;/FieldLabel&gt;\n  &lt;Input aria-invalid /&gt;\n  &lt;FieldDescription&gt;Invalid email.&lt;/FieldDescription&gt;\n&lt;/Field&gt;\n\n// Icons in buttons: data-icon, no sizing classes.\n&lt;Button&gt;\n  &lt;SearchIcon data-icon=\"inline-start\" /&gt;\n  Search\n&lt;/Button&gt;\n\n// Spacing: gap-*, not space-y-*.\n&lt;div className=\"flex flex-col gap-4\"&gt;  // correct\n&lt;div className=\"space-y-4\"&gt;           // wrong\n\n// Equal dimensions: size-*, not w-* h-*.\n&lt;Avatar className=\"size-10\"&gt;   // correct\n&lt;Avatar className=\"w-10 h-10\"&gt; // wrong\n\n// Status colors: Badge variants or semantic tokens, not raw colors.\n&lt;Badge variant=\"secondary\"&gt;+20.1%&lt;/Badge&gt;    // correct\n&lt;span className=\"text-emerald-600\"&gt;+20.1%&lt;/span&gt; // wrong\n</code></pre>\n<h2>Component Selection</h2>\n<table>\n<thead>\n<tr>\n<th>Need</th>\n<th>Use</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Button/action</td>\n<td><code>Button</code> with appropriate variant</td>\n</tr>\n<tr>\n<td>Form inputs</td>\n<td><code>Input</code>, <code>Select</code>, <code>Combobox</code>, <code>Switch</code>, <code>Checkbox</code>, <code>RadioGroup</code>, <code>Textarea</code>, <code>InputOTP</code>, <code>Slider</code></td>\n</tr>\n<tr>\n<td>Toggle between 2–5 options</td>\n<td><code>ToggleGroup</code> + <code>ToggleGroupItem</code></td>\n</tr>\n<tr>\n<td>Data display</td>\n<td><code>Table</code>, <code>Card</code>, <code>Badge</code>, <code>Avatar</code></td>\n</tr>\n<tr>\n<td>Navigation</td>\n<td><code>Sidebar</code>, <code>NavigationMenu</code>, <code>Breadcrumb</code>, <code>Tabs</code>, <code>Pagination</code></td>\n</tr>\n<tr>\n<td>Overlays</td>\n<td><code>Dialog</code> (modal), <code>Sheet</code> (side panel), <code>Drawer</code> (bottom sheet), <code>AlertDialog</code> (confirmation)</td>\n</tr>\n<tr>\n<td>Feedback</td>\n<td><code>sonner</code> (toast), <code>Alert</code>, <code>Progress</code>, <code>Skeleton</code>, <code>Spinner</code></td>\n</tr>\n<tr>\n<td>Command palette</td>\n<td><code>Command</code> inside <code>Dialog</code></td>\n</tr>\n<tr>\n<td>Charts</td>\n<td><code>Chart</code> (wraps Recharts)</td>\n</tr>\n<tr>\n<td>Layout</td>\n<td><code>Card</code>, <code>Separator</code>, <code>Resizable</code>, <code>ScrollArea</code>, <code>Accordion</code>, <code>Collapsible</code></td>\n</tr>\n<tr>\n<td>Empty states</td>\n<td><code>Empty</code></td>\n</tr>\n<tr>\n<td>Menus</td>\n<td><code>DropdownMenu</code>, <code>ContextMenu</code>, <code>Menubar</code></td>\n</tr>\n<tr>\n<td>Tooltips/info</td>\n<td><code>Tooltip</code>, <code>HoverCard</code>, <code>Popover</code></td>\n</tr>\n</tbody>\n</table>\n<h2>Key Fields</h2>\n<p>The injected project context contains these key fields:</p>\n<ul>\n<li><strong><code>aliases</code></strong> → use the actual alias prefix for imports (e.g. <code>@/</code>, <code>~/</code>), never hardcode.</li>\n<li><strong><code>isRSC</code></strong> → when <code>true</code>, components using <code>useState</code>, <code>useEffect</code>, event handlers, or browser APIs need <code>\"use client\"</code> at the top of the file. Always reference this field when advising on the directive.</li>\n<li><strong><code>tailwindVersion</code></strong> → <code>\"v4\"</code> uses <code>@theme inline</code> blocks; <code>\"v3\"</code> uses <code>tailwind.config.js</code>.</li>\n<li><strong><code>tailwindCssFile</code></strong> → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.</li>\n<li><strong><code>style</code></strong> → component visual treatment (e.g. <code>nova</code>, <code>vega</code>).</li>\n<li><strong><code>base</code></strong> → primitive library (<code>radix</code> or <code>base</code>). Affects component APIs and available props.</li>\n<li><strong><code>iconLibrary</code></strong> → determines icon imports. Use <code>lucide-react</code> for <code>lucide</code>, <code>@tabler/icons-react</code> for <code>tabler</code>, etc. Never assume <code>lucide-react</code>.</li>\n<li><strong><code>resolvedPaths</code></strong> → exact file-system destinations for components, utils, hooks, etc.</li>\n<li><strong><code>framework</code></strong> → routing and file conventions (e.g. Next.js App Router vs Vite SPA).</li>\n<li><strong><code>packageManager</code></strong> → use this for any non-shadcn dependency installs (e.g. <code>pnpm add date-fns</code> vs <code>npm install date-fns</code>).</li>\n</ul>\n<p>See <a href=\"./cli.md\">cli.md — <code>info</code> command</a> for the full field reference.</p>\n<h2>Component Docs, Examples, and Usage</h2>\n<p>Run <code>npx shadcn@latest docs &lt;component&gt;</code> to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.</p>\n<pre><code>npx shadcn@latest docs button dialog select\n</code></pre>\n<p><strong>When creating, fixing, debugging, or using a component, always run <code>npx shadcn@latest docs</code> and fetch the URLs first.</strong> This ensures you're working with the correct API and usage patterns rather than guessing.</p>\n<h2>Workflow</h2>\n<ol>\n<li><strong>Get project context</strong> — already injected above. Run <code>npx shadcn@latest info</code> again if you need to refresh.</li>\n<li><strong>Check installed components first</strong> — before running <code>add</code>, always check the <code>components</code> list from project context or list the <code>resolvedPaths.ui</code> directory. Don't import components that haven't been added, and don't re-add ones already installed.</li>\n<li><strong>Find components</strong> — <code>npx shadcn@latest search</code>.</li>\n<li><strong>Get docs and examples</strong> — run <code>npx shadcn@latest docs &lt;component&gt;</code> to get URLs, then fetch them. Use <code>npx shadcn@latest view</code> to browse registry items you haven't installed. To preview changes to installed components, use <code>npx shadcn@latest add --diff</code>.</li>\n<li><strong>Install or update</strong> — <code>npx shadcn@latest add</code>. When updating existing components, use <code>--dry-run</code> and <code>--diff</code> to preview changes first (see <a href=\"#updating-components\">Updating Components</a> below).</li>\n<li><strong>Fix imports in third-party components</strong> — After adding components from community registries (e.g. <code>@bundui</code>, <code>@magicui</code>), check the added non-UI files for hardcoded import paths like <code>@/components/ui/...</code>. These won't match the project's actual aliases. Use <code>npx shadcn@latest info</code> to get the correct <code>ui</code> alias (e.g. <code>@workspace/ui/components</code>) 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.</li>\n<li><strong>Review added components</strong> — After adding a component or block from any registry, <strong>always read the added files and verify they are correct</strong>. Check for missing sub-components (e.g. <code>SelectItem</code> without <code>SelectGroup</code>), missing imports, incorrect composition, or violations of the <a href=\"#critical-rules\">Critical Rules</a>. Also replace any icon imports with the project's <code>iconLibrary</code> from the project context (e.g. if the registry item uses <code>lucide-react</code> but the project uses <code>hugeicons</code>, swap the imports and icon names accordingly). Fix all issues before moving on.</li>\n<li><strong>Registry must be explicit</strong> — When the user asks to add a block or component, <strong>do not guess the registry</strong>. If no registry is specified (e.g. user says \"add a login block\" without specifying <code>@shadcn</code>, <code>@tailark</code>, etc.), ask which registry to use. Never default to a registry on behalf of the user.</li>\n<li><strong>Switching presets</strong> — Ask the user first: <strong>overwrite</strong>, <strong>partial</strong>, <strong>merge</strong>, or <strong>skip</strong>?\n<ul>\n<li><strong>Overwrite</strong>: <code>npx shadcn@latest apply --preset &lt;code&gt;</code>. Overwrites detected components, fonts, and CSS variables.</li>\n<li><strong>Partial</strong>: <code>npx shadcn@latest apply --preset &lt;code&gt; --only theme,font</code>. Updates only the selected preset parts without reinstalling UI components. Supported values are <code>theme</code> and <code>font</code>; comma-separated combinations are allowed. <code>icon</code> is intentionally not supported, because icon changes may require full component reinstall and transforms.</li>\n<li><strong>Merge</strong>: <code>npx shadcn@latest init --preset &lt;code&gt; --force --no-reinstall</code>, then run <code>npx shadcn@latest info</code> to list installed components, then for each installed component use <code>--dry-run</code> and <code>--diff</code> to <a href=\"#updating-components\">smart merge</a> it individually.</li>\n<li><strong>Skip</strong>: <code>npx shadcn@latest init --preset &lt;code&gt; --force --no-reinstall</code>. Only updates config and CSS, leaves components as-is.</li>\n<li><strong>Important</strong>: Always run preset commands inside the user's project directory. <code>apply</code> only works in an existing project with a <code>components.json</code> file. The CLI automatically preserves the current base (<code>base</code> vs <code>radix</code>) from <code>components.json</code>. If you must use a scratch/temp directory (e.g. for <code>--dry-run</code> comparisons), pass <code>--base &lt;current-base&gt;</code> explicitly — preset codes do not encode the base.</li>\n</ul>\n</li>\n</ol>\n<h2>Updating Components</h2>\n<p>When the user asks to update a component from upstream while keeping their local changes, use <code>--dry-run</code> and <code>--diff</code> to intelligently merge. <strong>NEVER fetch raw files from GitHub manually — always use the CLI.</strong></p>\n<ol>\n<li>Run <code>npx shadcn@latest add &lt;component&gt; --dry-run</code> to see all files that would be affected.</li>\n<li>For each file, run <code>npx shadcn@latest add &lt;component&gt; --diff &lt;file&gt;</code> to see what changed upstream vs local.</li>\n<li>Decide per file based on the diff:\n<ul>\n<li>No local changes → safe to overwrite.</li>\n<li>Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.</li>\n<li>User says \"just update everything\" → use <code>--overwrite</code>, but confirm first.</li>\n</ul>\n</li>\n<li><strong>Never use <code>--overwrite</code> without the user's explicit approval.</strong></li>\n</ol>\n<h2>Quick Reference</h2>\n<pre><code># Create a new project.\nnpx shadcn@latest init --name my-app --preset base-nova\nnpx shadcn@latest init --name my-app --preset a2r6bw --template vite\n\n# Create a monorepo project.\nnpx shadcn@latest init --name my-app --preset base-nova --monorepo\nnpx shadcn@latest init --name my-app --preset base-nova --template next --monorepo\n\n# Initialize existing project.\nnpx shadcn@latest init --preset base-nova\nnpx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)\n\n# Apply a preset to an existing project.\nnpx shadcn@latest apply --preset a2r6bw\nnpx shadcn@latest apply a2r6bw\nnpx shadcn@latest apply --preset a2r6bw --only theme\nnpx shadcn@latest apply --preset a2r6bw --only font\nnpx shadcn@latest apply --preset a2r6bw --only theme,font\n\n# Add components.\nnpx shadcn@latest add button card dialog\nnpx shadcn@latest add @magicui/shimmer-button\nnpx shadcn@latest add --all\n\n# Preview changes before adding/updating.\nnpx shadcn@latest add button --dry-run\nnpx shadcn@latest add button --diff button.tsx\nnpx shadcn@latest add @acme/form --view button.tsx\n\n# Search registries.\nnpx shadcn@latest search @shadcn -q \"sidebar\"\nnpx shadcn@latest search @tailark -q \"stats\"\n\n# Get component docs and example URLs.\nnpx shadcn@latest docs button dialog select\n\n# View registry item details (for items not yet installed).\nnpx shadcn@latest view @shadcn/button\n</code></pre>\n<p><strong>Named presets:</strong> <code>nova</code>, <code>vega</code>, <code>maia</code>, <code>lyra</code>, <code>mira</code>, <code>luma</code>\n<strong>Templates:</strong> <code>next</code>, <code>vite</code>, <code>start</code>, <code>react-router</code>, <code>astro</code> (all support <code>--monorepo</code>) and <code>laravel</code> (not supported for monorepo)\n<strong>Preset codes:</strong> Version-prefixed base62 strings (e.g. <code>a2r6bw</code> or <code>b0</code>), from <a href=\"https://ui.shadcn.com\">ui.shadcn.com</a>.</p>\n<h2>Detailed References</h2>\n<ul>\n<li><a href=\"./rules/forms.md\">rules/forms.md</a> — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states</li>\n<li><a href=\"./rules/composition.md\">rules/composition.md</a> — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading</li>\n<li><a href=\"./rules/icons.md\">rules/icons.md</a> — data-icon, icon sizing, passing icons as objects</li>\n<li><a href=\"./rules/styling.md\">rules/styling.md</a> — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index</li>\n<li><a href=\"./rules/base-vs-radix.md\">rules/base-vs-radix.md</a> — asChild vs render, Select, ToggleGroup, Slider, Accordion</li>\n<li><a href=\"./cli.md\">cli.md</a> — Commands, flags, presets, templates</li>\n<li><a href=\"./customization.md\">customization.md</a> — Theming, CSS variables, extending components</li>\n</ul>\n","files":[{"path":"agents/openai.yml","sizeBytes":238,"isText":true},{"path":"assets/shadcn.png","sizeBytes":3852,"isText":false},{"path":"assets/shadcn-small.png","sizeBytes":1049,"isText":false},{"path":"cli.md","sizeBytes":16426,"isText":true},{"path":"customization.md","sizeBytes":6074,"isText":true},{"path":"evals/evals.json","sizeBytes":3118,"isText":true},{"path":"mcp.md","sizeBytes":2385,"isText":true},{"path":"rules/base-vs-radix.md","sizeBytes":6954,"isText":true},{"path":"rules/composition.md","sizeBytes":4268,"isText":true},{"path":"rules/forms.md","sizeBytes":4857,"isText":true},{"path":"rules/icons.md","sizeBytes":1958,"isText":true},{"path":"rules/styling.md","sizeBytes":3795,"isText":true},{"path":"SKILL.md","sizeBytes":17326,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-17T09:14:00.01935Z","sha256":"A44D79591CA6FA4CAA0E9683143DB5A85D40BF9A4D31395EE1AC14DFA6D50679","sizeBytes":28921},"review":null,"source":{"repositoryUrl":"https://github.com/invergent-ai/surogates","path":"web/.agents/skills/shadcn","license":"AGPL-3.0","commit":"f423b85eed3b230f0085ed007adc86e8aa639d02","subtreeSha":"10DDA4F153ECF826B15409413F0D6AE430DC0DB79D5842D26831C4F693F80039","lastSyncedAt":"2026-10-17T09:13:07.689271Z"},"reviewedAt":"2026-10-17T09:19:03.710606Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/invergent-ai/surogates/tree/master/web/.agents/skills/shadcn"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install invergent-ai-surogates@llmmart"},{"target":"git","command":"git clone https://github.com/invergent-ai/surogates.git"}]}