@fprad0/skill-master-mcp 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/README.md +29 -9
  3. package/VERSION.md +3 -3
  4. package/bin/lib/client-config.mjs +268 -0
  5. package/bin/lib/menu-core.mjs +47 -37
  6. package/bin/skill-master-bootstrap-global.mjs +2 -1
  7. package/bin/skill-master-doctor.mjs +42 -29
  8. package/bin/skill-master-install-global-skills.mjs +1 -1
  9. package/bin/skill-master-register-clients.mjs +36 -115
  10. package/docs/operations/GUIA_MULTI_COMPUTADOR.md +255 -0
  11. package/docs/operations/GUIA_NPM_PUBLICO.md +147 -0
  12. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/SKILL.md +399 -0
  13. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/common-patterns.md +331 -0
  14. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/complete-examples.md +872 -0
  15. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/component-patterns.md +502 -0
  16. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/data-fetching.md +767 -0
  17. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/file-organization.md +502 -0
  18. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/loading-and-error-states.md +501 -0
  19. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/performance.md +406 -0
  20. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/routing-guide.md +364 -0
  21. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/styling-guide.md +428 -0
  22. package/docs/skill-candidates/v0.0.11/frontend-dev-guidelines/resources/typescript-standards.md +418 -0
  23. package/docs/skill-candidates/v0.0.11/git-version-control-ops/SKILL.md +34 -0
  24. package/docs/skill-candidates/v0.0.11/go-engineering/SKILL.md +34 -0
  25. package/docs/skill-candidates/v0.0.11/java-engineering/SKILL.md +34 -0
  26. package/docs/skill-candidates/v0.0.11/javascript-engineering/SKILL.md +34 -0
  27. package/docs/skill-candidates/v0.0.11/json-contract-design/SKILL.md +34 -0
  28. package/docs/skill-candidates/v0.0.11/multi-client-mcp-ops/SKILL.md +36 -0
  29. package/docs/skill-candidates/v0.0.11/nextjs/SKILL.md +745 -0
  30. package/docs/skill-candidates/v0.0.11/nextjs/agents/openai.yaml +3 -0
  31. package/docs/skill-candidates/v0.0.11/nextjs/references/app-router-files.md +94 -0
  32. package/docs/skill-candidates/v0.0.11/python-engineering/SKILL.md +34 -0
  33. package/docs/skill-candidates/v0.0.11/ruby-engineering/SKILL.md +34 -0
  34. package/docs/skill-candidates/v0.0.11/senior-fullstack/SKILL.md +209 -0
  35. package/docs/skill-candidates/v0.0.11/senior-fullstack/references/architecture_patterns.md +103 -0
  36. package/docs/skill-candidates/v0.0.11/senior-fullstack/references/development_workflows.md +103 -0
  37. package/docs/skill-candidates/v0.0.11/senior-fullstack/references/tech_stack_guide.md +103 -0
  38. package/docs/skill-candidates/v0.0.11/senior-fullstack/scripts/code_quality_analyzer.py +114 -0
  39. package/docs/skill-candidates/v0.0.11/senior-fullstack/scripts/fullstack_scaffolder.py +114 -0
  40. package/docs/skill-candidates/v0.0.11/senior-fullstack/scripts/project_scaffolder.py +114 -0
  41. package/docs/skill-candidates/v0.0.11/shadcn/SKILL.md +573 -0
  42. package/docs/skill-candidates/v0.0.11/shadcn/agents/openai.yaml +3 -0
  43. package/docs/skill-candidates/v0.0.11/sql-postgresql-engineering/SKILL.md +34 -0
  44. package/docs/skill-candidates/v0.0.11/terminal-shell-ops/SKILL.md +34 -0
  45. package/docs/skill-candidates/v0.0.11/typescript-expert/SKILL.md +429 -0
  46. package/docs/skill-candidates/v0.0.11/typescript-expert/references/tsconfig-strict.json +92 -0
  47. package/docs/skill-candidates/v0.0.11/typescript-expert/references/typescript-cheatsheet.md +383 -0
  48. package/docs/skill-candidates/v0.0.11/typescript-expert/references/utility-types.ts +335 -0
  49. package/docs/skill-candidates/v0.0.11/typescript-expert/scripts/ts_diagnostic.py +203 -0
  50. package/docs/skill-candidates/v0.0.11/ui-component-primitives/SKILL.md +34 -0
  51. package/docs/skill-candidates/v0.0.11/web-mobile-design-systems/SKILL.md +34 -0
  52. package/docs/skill-candidates/v0.0.11/windows-linux-platform-ops/SKILL.md +34 -0
  53. package/manifests/channels/beta.json +7 -7
  54. package/manifests/channels/stable.json +8 -8
  55. package/package.json +6 -2
  56. package/scripts/verify-menu-actions.mjs +115 -0
@@ -0,0 +1,573 @@
1
+ ---
2
+ name: shadcn
3
+ description: shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
4
+ metadata:
5
+ priority: 6
6
+ docs:
7
+ - "https://ui.shadcn.com/docs"
8
+ - "https://ui.shadcn.com/docs/components"
9
+ pathPatterns:
10
+ - 'components.json'
11
+ - 'components/ui/**'
12
+ - 'src/components/ui/**'
13
+ - 'apps/*/components/ui/**'
14
+ - 'apps/*/src/components/ui/**'
15
+ - 'packages/*/components/ui/**'
16
+ - 'packages/*/src/components/ui/**'
17
+ bashPatterns:
18
+ - '\bnpx\s+shadcn\b'
19
+ - '\bnpx\s+shadcn@latest\s+(init|add|build|search|list|migrate|info|docs|view)\b'
20
+ - '\bnpx\s+create-next-app\b'
21
+ - '\bbunx\s+create-next-app\b'
22
+ - '\bpnpm\s+create\s+next-app\b'
23
+ - '\bnpm\s+create\s+next-app\b'
24
+ ---
25
+
26
+ # shadcn/ui
27
+
28
+ You are an expert in shadcn/ui — a collection of beautifully designed, accessible, and customizable React components built on Radix UI primitives and Tailwind CSS. Components are added directly to your codebase as source code, not installed as a dependency.
29
+
30
+ ## Key Concept
31
+
32
+ shadcn/ui is **not a component library** in the traditional sense. You don't install it as a package. Instead, the CLI copies component source code into your project, giving you full ownership and customization ability.
33
+
34
+ ## CLI Commands
35
+
36
+ ### Initialize (non-interactive — ALWAYS use this)
37
+
38
+ **IMPORTANT**: `shadcn init` is interactive by default. Always use `-d` (defaults) for non-interactive initialization:
39
+
40
+ ```bash
41
+ # Non-interactive init with defaults — USE THIS
42
+ npx shadcn@latest init -d
43
+
44
+ # Non-interactive with a preset (recommended for consistent design systems)
45
+ npx shadcn@latest init --preset <code> -f
46
+
47
+ # Non-interactive with explicit base library choice
48
+ npx shadcn@latest init -d --base radix
49
+ npx shadcn@latest init -d --base base-ui
50
+
51
+ # Scaffold a full project template (CLI v4)
52
+ ```
53
+
54
+ > **AI Elements compatibility**: Always use `--base radix` (the default) when the project uses or may use AI Elements. AI Elements components rely on Radix APIs and have type errors with Base UI.
55
+
56
+ ```bash
57
+ npx shadcn@latest init --template next -d
58
+ npx shadcn@latest init --template vite -d
59
+ ```
60
+
61
+ Options:
62
+ - `-d, --defaults` — **Use default configuration, skip all interactive prompts** (REQUIRED for CI/agent use)
63
+ - `-y, --yes` — Skip confirmation prompts (does NOT skip library selection — use `-d` instead)
64
+ - `-f, --force` — Force overwrite existing configuration
65
+ - `-t, --template` — Scaffold full project template (`next`, `vite`, `react-router`, `astro`, `laravel`, `tanstack-start`)
66
+ - `--preset` — Apply a design system preset (colors, theme, icons, fonts, radius) as a single shareable code
67
+ - `--base` — Choose primitive library: `radix` (default) or `base-ui`
68
+ - `--monorepo` — Set up a monorepo structure
69
+
70
+ > **WARNING**: `-y`/`--yes` alone does NOT make init fully non-interactive — it still prompts for component library selection. Always use `-d` to skip ALL prompts.
71
+
72
+ > **Deprecated in CLI v4**: `--style`, `--base-color`, `--src-dir`, `--no-base-style`, and `--css-variables` flags are removed and will error. The `registry:build` and `registry:mcp` registry types are also deprecated. Use `registry:base` and `registry:font` instead.
73
+
74
+ The init command:
75
+ 1. Detects your framework (Next.js, Vite, React Router, Astro, Laravel, TanStack Start)
76
+ 2. Installs required dependencies (Radix UI, tailwind-merge, class-variance-authority)
77
+ 3. Creates `components.json` configuration
78
+ 4. Sets up the `cn()` utility function
79
+ 5. Configures CSS variables for theming
80
+
81
+ ### Add Components
82
+
83
+ ```bash
84
+ # Add specific components
85
+ npx shadcn@latest add button dialog card
86
+
87
+ # Add all available components
88
+ npx shadcn@latest add --all
89
+
90
+ # Add from a custom registry
91
+ npx shadcn@latest add @v0/dashboard
92
+ npx shadcn@latest add @acme/custom-button
93
+
94
+ # Add from AI Elements registry
95
+ npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json
96
+ ```
97
+
98
+ Options:
99
+ - `-o, --overwrite` — Overwrite existing files
100
+ - `-p, --path` — Custom install path
101
+ - `-a, --all` — Install all components
102
+ - `--dry-run` — Preview what will be added without writing files
103
+ - `--diff` — Show diff of changes when updating existing components
104
+ - `--view` — Display a registry item's source code inline
105
+
106
+ ### Search & List
107
+
108
+ ```bash
109
+ npx shadcn@latest search button
110
+ npx shadcn@latest list @v0
111
+ ```
112
+
113
+ ### Build (Custom Registry)
114
+
115
+ ```bash
116
+ npx shadcn@latest build
117
+ npx shadcn@latest build ./registry.json -o ./public/r
118
+ ```
119
+
120
+ ### View, Info & Docs (CLI v4)
121
+
122
+ ```bash
123
+ # View a registry item's source before installing
124
+ npx shadcn@latest view button
125
+
126
+ # Show project diagnostics — config, installed components, dependencies
127
+ npx shadcn@latest info
128
+
129
+ # Get docs, code, and examples for any component (agent-friendly output)
130
+ npx shadcn@latest docs button
131
+ npx shadcn@latest docs dialog
132
+ ```
133
+
134
+ > **`shadcn docs`** gives coding agents the context to use primitives correctly — returns code examples, API reference, and usage patterns inline.
135
+
136
+ ### Migrate
137
+
138
+ ```bash
139
+ npx shadcn@latest migrate rtl # RTL support migration
140
+ npx shadcn@latest migrate radix # Migrate to unified radix-ui package
141
+ npx shadcn@latest migrate icons # Icon library changes
142
+
143
+ # Migrate components outside the default ui directory
144
+ npx shadcn@latest migrate radix src/components/custom
145
+ ```
146
+
147
+ ## shadcn/skills (CLI v4)
148
+
149
+ shadcn/skills gives coding agents the context they need to work with components and registries correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns, and registry workflows. The skill knows how to use the CLI, when to invoke it, and which flags to pass — so agents produce code that matches your design system.
150
+
151
+ Install: `pnpm dlx skills add shadcn/ui`
152
+
153
+ ## Unified Radix UI Package (February 2026)
154
+
155
+ The `new-york` style now uses a single `radix-ui` package instead of individual `@radix-ui/react-*` packages:
156
+
157
+ ```tsx
158
+ // OLD — individual packages
159
+ import * as DialogPrimitive from "@radix-ui/react-dialog"
160
+
161
+ // NEW — unified package
162
+ import { Dialog as DialogPrimitive } from "radix-ui"
163
+ ```
164
+
165
+ To migrate existing projects: `npx shadcn@latest migrate radix`. After migration, remove unused `@radix-ui/react-*` packages from `package.json`.
166
+
167
+ ## Base UI Support (January 2026)
168
+
169
+ shadcn/ui now supports **Base UI** as an alternative to Radix UI for the underlying primitive library. Components look and behave the same way regardless of which library you choose — only the underlying implementation changes.
170
+
171
+ Choose during init: `npx shadcn@latest init --base base-ui`
172
+
173
+ The CLI pulls the correct component variant based on your project configuration automatically.
174
+
175
+ ## Configuration (components.json)
176
+
177
+ The `components.json` file configures how shadcn/ui works in your project:
178
+
179
+ ```json
180
+ {
181
+ "$schema": "https://ui.shadcn.com/schema.json",
182
+ "style": "new-york",
183
+ "rsc": true,
184
+ "tsx": true,
185
+ "tailwind": {
186
+ "config": "tailwind.config.ts",
187
+ "css": "src/app/globals.css",
188
+ "baseColor": "zinc", // Options: gray, neutral, slate, stone, zinc, mauve, olive, mist, taupe
189
+ "cssVariables": true
190
+ },
191
+ "aliases": {
192
+ "components": "@/components",
193
+ "utils": "@/lib/utils",
194
+ "ui": "@/components/ui",
195
+ "lib": "@/lib",
196
+ "hooks": "@/hooks"
197
+ },
198
+ "registries": {
199
+ "v0": {
200
+ "url": "https://v0.dev/chat/api/registry"
201
+ },
202
+ "ai-elements": {
203
+ "url": "https://elements.ai-sdk.dev/api/registry"
204
+ }
205
+ }
206
+ }
207
+ ```
208
+
209
+ ### Namespaced Registries
210
+
211
+ Configure multiple registries for your project:
212
+
213
+ ```json
214
+ {
215
+ "registries": {
216
+ "acme": {
217
+ "url": "https://acme.com/registry/{name}.json"
218
+ },
219
+ "private": {
220
+ "url": "https://internal.company.com/registry/{name}.json",
221
+ "headers": {
222
+ "Authorization": "Bearer ${REGISTRY_TOKEN}"
223
+ }
224
+ }
225
+ }
226
+ }
227
+ ```
228
+
229
+ Install using namespace syntax:
230
+
231
+ ```bash
232
+ npx shadcn@latest add @acme/header @private/auth-form
233
+ ```
234
+
235
+ ## Theming
236
+
237
+ ### CSS Variables
238
+
239
+ shadcn/ui uses CSS custom properties for theming, defined in `globals.css`:
240
+
241
+ ```css
242
+ @theme inline {
243
+ --color-background: oklch(0.145 0 0);
244
+ --color-foreground: oklch(0.985 0 0);
245
+ --color-card: oklch(0.205 0 0);
246
+ --color-card-foreground: oklch(0.985 0 0);
247
+ --color-primary: oklch(0.488 0.243 264.376);
248
+ --color-primary-foreground: oklch(0.985 0 0);
249
+ --color-secondary: oklch(0.269 0 0);
250
+ --color-secondary-foreground: oklch(0.985 0 0);
251
+ --color-muted: oklch(0.269 0 0);
252
+ --color-muted-foreground: oklch(0.708 0 0);
253
+ --color-accent: oklch(0.269 0 0);
254
+ --color-accent-foreground: oklch(0.985 0 0);
255
+ --color-destructive: oklch(0.396 0.141 25.723);
256
+ --color-border: oklch(0.269 0 0);
257
+ --color-input: oklch(0.269 0 0);
258
+ --color-ring: oklch(0.488 0.243 264.376);
259
+ --radius: 0.625rem;
260
+ /* CLI v4: radius tokens use multiplicative calc instead of additive */
261
+ --radius-xs: calc(var(--radius) * 0.5);
262
+ --radius-sm: calc(var(--radius) * 0.75);
263
+ --radius-md: calc(var(--radius) * 0.875);
264
+ --radius-lg: var(--radius);
265
+ --radius-xl: calc(var(--radius) * 1.5);
266
+ }
267
+ ```
268
+
269
+ ### Dark Mode
270
+
271
+ For dark mode, use the `dark` class on `<html>`:
272
+
273
+ ```tsx
274
+ // app/layout.tsx
275
+ <html lang="en" className="dark">
276
+ ```
277
+
278
+ Or use next-themes for toggling:
279
+
280
+ ```tsx
281
+ import { ThemeProvider } from 'next-themes'
282
+
283
+ <ThemeProvider attribute="class" defaultTheme="dark">
284
+ {children}
285
+ </ThemeProvider>
286
+ ```
287
+
288
+ ### Custom Colors
289
+
290
+ Add application-specific colors alongside shadcn defaults:
291
+
292
+ ```css
293
+ @theme inline {
294
+ /* shadcn defaults above... */
295
+
296
+ /* Custom app colors */
297
+ --color-priority-urgent: oklch(0.637 0.237 15.163);
298
+ --color-priority-high: oklch(0.705 0.213 47.604);
299
+ --color-status-done: oklch(0.723 0.219 149.579);
300
+ }
301
+ ```
302
+
303
+ Use in components:
304
+
305
+ ```tsx
306
+ <span className="text-[var(--color-priority-urgent)]">Urgent</span>
307
+ // Or with Tailwind v4 theme():
308
+ <span className="text-priority-urgent">Urgent</span>
309
+ ```
310
+
311
+ ## Most Common Components
312
+
313
+ | Component | Use Case |
314
+ |-----------|----------|
315
+ | `button` | Actions, form submission |
316
+ | `card` | Content containers |
317
+ | `dialog` | Modals, confirmation prompts |
318
+ | `input` / `textarea` | Form fields |
319
+ | `select` | Dropdowns |
320
+ | `table` | Data display |
321
+ | `tabs` | View switching |
322
+ | `command` | Command palette (Cmd+K) |
323
+ | `dropdown-menu` | Context menus |
324
+ | `popover` | Floating content |
325
+ | `tooltip` | Hover hints |
326
+ | `badge` | Status indicators |
327
+ | `avatar` | User profile images |
328
+ | `scroll-area` | Scrollable containers |
329
+ | `separator` | Visual dividers |
330
+ | `label` | Form labels |
331
+ | `sheet` | Slide-out panels |
332
+ | `skeleton` | Loading placeholders |
333
+
334
+ ## Design Direction for shadcn on Vercel
335
+
336
+ shadcn/ui is not only a component source generator. In the Vercel stack it is the default interface language. Do not stop at "the component works." Compose pages that feel deliberate, high-signal, and consistent.
337
+
338
+ ### Default aesthetic for product UI
339
+
340
+ - Prefer style: `new-york` for product, dashboard, AI, and admin surfaces.
341
+ - Default to dark mode for dashboards, AI apps, internal tools, settings, and developer-facing products. Use light mode only when the product is clearly content-first or editorial.
342
+ - Use Geist Sans for interface text and Geist Mono for code, metrics, IDs, timestamps, commands.
343
+ - Prefer zinc, neutral, or slate as the base palette. Use one accent color through `--color-primary`.
344
+ - Build core surfaces from tokens: `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, `border-border`, `ring-ring`. Avoid ad-hoc hex values.
345
+ - Keep radius consistent. The default `--radius: 0.625rem` is a strong baseline.
346
+ - Use one density system per page: comfortable (`gap-6` / `p-6` / `text-sm`) or compact (`gap-4` / `p-4` / `text-sm`).
347
+ - Keep icons quiet and consistent. Lucide icons at `h-4 w-4` or `h-5 w-5`.
348
+
349
+ ### Reach for this first
350
+
351
+ | Use case | Reach for this first | Why |
352
+ |----------|----------------------|-----|
353
+ | Settings page | `Tabs` + `Card` + `Form` | Clear information grouping with predictable save flows |
354
+ | Data dashboard | `Card` + `Badge` + `Table` + `DropdownMenu` | Covers summary, status, dense data, and row actions without custom shells |
355
+ | CRUD table | `Table` + `DropdownMenu` + `Sheet` + `AlertDialog` | Supports browse, act, edit, and destructive confirmation in a standard pattern |
356
+ | Auth screen | `Card` + `Label` + `Input` + `Button` + `Alert` | Keeps entry flows focused and gives errors a proper treatment |
357
+ | Global search | `Command` + `Dialog` | Fast keyboard-first discovery with an established interaction model |
358
+ | Mobile nav | `Sheet` + `Button` + `Separator` | Provides a compact navigation shell that adapts cleanly to small screens |
359
+ | Detail page | header + `Badge` + `Separator` + `Card` | Balances hierarchy, metadata, and supporting content without over-nesting |
360
+ | Filters | `Card` sidebar + `Sheet` + `Select` | Works for persistent desktop filters and collapsible mobile controls |
361
+ | Empty/loading/error states | `Card` + `Skeleton` + `Alert` | Gives non-happy paths a designed surface instead of placeholder text |
362
+
363
+ ### Composition recipes
364
+
365
+ - Settings page: `Tabs` + `Card` per group + `Separator` + save action
366
+ - Admin dashboard: summary `Card`s + filter bar + `Table`
367
+ - Entity detail: header + status `Badge` + main `Card` + side `Card` + `AlertDialog` for destructive
368
+ - Search-heavy: `Command` for quick find, `Popover` for pickers, `Sheet` for mobile filters
369
+ - Auth/onboarding: centered `Card` + social `Separator` + inline `Alert` for errors
370
+ - Destructive flows: `AlertDialog` (not `Dialog`) for confirmation
371
+
372
+ ### Anti-patterns to avoid
373
+
374
+ - Raw `button` / `input` / `select` / `div` when shadcn primitives exist
375
+ - Repeated `div rounded-xl border p-6` instead of `Tabs` / `Table` / `Sheet` / `Dialog`
376
+ - Multiple accent colors fighting each other
377
+ - Nested cards inside cards inside cards
378
+ - Large gradient backgrounds and glassmorphism on every surface
379
+ - Mixing arbitrary spacing and radius values
380
+ - Using `Dialog` for destructive confirmation instead of `AlertDialog`
381
+ - Shipping empty/loading/error states without design treatment
382
+ - Using ad-hoc Tailwind palette classes for foundational surfaces instead of theme tokens
383
+
384
+ ## Building a Custom Registry
385
+
386
+ Create your own component registry to share across projects:
387
+
388
+ ### Registry Types (CLI v4)
389
+
390
+ | Type | Purpose |
391
+ |------|---------|
392
+ | `registry:ui` | Individual UI components |
393
+ | `registry:base` | Full design system payload — components, deps, CSS vars, fonts, config |
394
+ | `registry:font` | Font configuration as a first-class registry item |
395
+
396
+ ### 1. Define registry.json
397
+
398
+ ```json
399
+ [
400
+ {
401
+ "name": "my-component",
402
+ "type": "registry:ui",
403
+ "title": "My Component",
404
+ "description": "A custom component",
405
+ "files": [
406
+ {
407
+ "path": "components/my-component.tsx",
408
+ "type": "registry:ui"
409
+ }
410
+ ],
411
+ "dependencies": ["lucide-react"]
412
+ }
413
+ ]
414
+ ```
415
+
416
+ ### 2. Build
417
+
418
+ ```bash
419
+ npx shadcn@latest build
420
+ # Outputs to public/r/my-component.json
421
+ ```
422
+
423
+ ### 3. Consume
424
+
425
+ ```bash
426
+ npx shadcn@latest add https://your-domain.com/r/my-component.json
427
+ ```
428
+
429
+ ## Component Gotchas
430
+
431
+ ### `shadcn init` Breaks Geist Font in Next.js (Tailwind v4)
432
+
433
+ `shadcn init` rewrites `globals.css` and may introduce `--font-sans: var(--font-sans)` — a circular self-reference that breaks font loading. Tailwind v4's `@theme inline` resolves CSS custom properties at **parse time**, not runtime — so even `var(--font-geist-sans)` won't work because Next.js injects that variable via className at runtime.
434
+
435
+ **The fix**: Use literal font family names in `@theme inline`:
436
+
437
+ ```css
438
+ /* In @theme inline — CORRECT (literal names) */
439
+ --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
440
+ --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
441
+
442
+ /* WRONG — circular, resolves to nothing */
443
+ --font-sans: var(--font-sans);
444
+
445
+ /* ALSO WRONG — @theme inline can't resolve runtime CSS variables */
446
+ --font-sans: var(--font-geist-sans);
447
+ ```
448
+
449
+ **After running `shadcn init`**, always:
450
+ 1. Replace font declarations in `@theme inline` with literal Geist font names (as shown above)
451
+ 2. Move the font variable classNames from `<body>` to `<html>` in `layout.tsx`:
452
+
453
+ ```tsx
454
+ // layout.tsx — font variables on <html>, not <body>
455
+ <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
456
+ <body className="antialiased">
457
+ ```
458
+
459
+ ### Avatar Has No `size` Prop
460
+
461
+ The shadcn Avatar component does **not** accept a `size` variant prop. Control size with Tailwind classes:
462
+
463
+ ```tsx
464
+ // WRONG — no size variant exists
465
+ <Avatar size="lg" /> // ❌ TypeScript error / silently ignored
466
+
467
+ // CORRECT — use Tailwind
468
+ <Avatar className="h-12 w-12">
469
+ <AvatarImage src={user.image} />
470
+ <AvatarFallback>JD</AvatarFallback>
471
+ </Avatar>
472
+
473
+ // Small avatar
474
+ <Avatar className="h-6 w-6"> ... </Avatar>
475
+ ```
476
+
477
+ This applies to most shadcn components — they use Tailwind classes for sizing, not variant props. If you need reusable size variants, add them yourself via `cva` in the component source.
478
+
479
+ ## Common Patterns
480
+
481
+ ### cn() Utility
482
+
483
+ All shadcn components use the `cn()` utility for conditional class merging:
484
+
485
+ ```ts
486
+ import { clsx, type ClassValue } from 'clsx'
487
+ import { twMerge } from 'tailwind-merge'
488
+
489
+ export function cn(...inputs: ClassValue[]) {
490
+ return twMerge(clsx(inputs))
491
+ }
492
+ ```
493
+
494
+ ### Extending Components
495
+
496
+ Since you own the source code, extend components directly:
497
+
498
+ ```tsx
499
+ // components/ui/button.tsx — add your custom variant
500
+ const buttonVariants = cva('...', {
501
+ variants: {
502
+ variant: {
503
+ default: '...',
504
+ destructive: '...',
505
+ // Add custom variants
506
+ success: 'bg-green-600 text-white hover:bg-green-700',
507
+ premium: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',
508
+ },
509
+ },
510
+ })
511
+ ```
512
+
513
+ ### Wrapping with TooltipProvider
514
+
515
+ Many components require `TooltipProvider` at the root:
516
+
517
+ ```tsx
518
+ // app/layout.tsx
519
+ import { TooltipProvider } from '@/components/ui/tooltip'
520
+
521
+ export default function RootLayout({ children }) {
522
+ return (
523
+ <html lang="en" className="dark">
524
+ <body>
525
+ <TooltipProvider>{children}</TooltipProvider>
526
+ </body>
527
+ </html>
528
+ )
529
+ }
530
+ ```
531
+
532
+ ## Framework Support
533
+
534
+ - **Next.js** — Full support (App Router + Pages Router)
535
+ - **Vite** — Full support
536
+ - **React Router** — Full support
537
+ - **Astro** — Full support
538
+ - **Laravel** — Full support (via Inertia)
539
+ - **TanStack Start** — Full support
540
+
541
+ ## Presets (CLI v4)
542
+
543
+ Presets bundle your entire design system config (colors, theme, icon library, fonts, radius) into a single shareable code. One string configures everything:
544
+
545
+ ```bash
546
+ # Apply a preset during init
547
+ npx shadcn@latest init --preset <code>
548
+
549
+ # Switch presets in an existing project (reconfigures everything including components)
550
+ npx shadcn@latest init --preset <code>
551
+ ```
552
+
553
+ Build custom presets on `shadcn/create` — preview how colors, fonts, and radius apply to real components before publishing.
554
+
555
+ ## RTL Support (2026)
556
+
557
+ The CLI handles RTL transformation at install time:
558
+
559
+ ```bash
560
+ npx shadcn@latest migrate rtl
561
+ ```
562
+
563
+ Converts directional classes (`ml-4`, `left-2`) to logical properties (`ms-4`, `start-2`) automatically.
564
+
565
+ ## Official Documentation
566
+
567
+ - [shadcn/ui](https://ui.shadcn.com)
568
+ - [Components](https://ui.shadcn.com/docs/components)
569
+ - [CLI](https://ui.shadcn.com/docs/cli)
570
+ - [Theming](https://ui.shadcn.com/docs/theming)
571
+ - [Custom Registry](https://ui.shadcn.com/docs/registry)
572
+ - [Registry Directory](https://ui.shadcn.com/docs/directory)
573
+ - [GitHub: shadcn/ui](https://github.com/shadcn-ui/ui)
@@ -0,0 +1,3 @@
1
+ interface:
2
+ display_name: "Shadcn"
3
+ short_description: "shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming,..."
@@ -0,0 +1,34 @@
1
+ ---
2
+ name: sql-postgresql-engineering
3
+ description: "Design and review SQL and PostgreSQL schemas, queries, migrations, indexes, transactions and runtime data behavior with practical focus on correctness, explainability and production safety."
4
+ ---
5
+
6
+ # SQL PostgreSQL Engineering
7
+
8
+ Use this skill when the task centers on relational data, SQL behavior or PostgreSQL operations.
9
+
10
+ ## Workflow
11
+
12
+ - Start from the real schema, query path and workload shape before proposing changes.
13
+ - Model keys, constraints, indexes and migrations as deliberate design choices.
14
+ - Explain query behavior, data movement and lock or transaction impact.
15
+ - Prefer reversible migrations and representative explain or smoke validation.
16
+ - Separate application-layer assumptions from database truth.
17
+
18
+ ## Coverage
19
+
20
+ - SQL queries, joins, aggregations, migrations, constraints, indexes and transactions.
21
+ - PostgreSQL schemas, performance, integrity, operational review and rollout risk.
22
+ - Debugging, refactoring, data contracts and production hardening.
23
+
24
+ ## Reference Anchors
25
+
26
+ - PostgreSQL docs: `https://www.postgresql.org/docs/`
27
+ - PostgreSQL tutorial: `https://www.postgresql.org/docs/current/tutorial.html`
28
+
29
+ ## Guardrails
30
+
31
+ - Do not run destructive data changes without explicit approval.
32
+ - Do not add indexes without reasoning about write cost and access pattern.
33
+ - Do not hide locking or migration risk.
34
+ - Do not claim query improvements without evidence or an explain path.
@@ -0,0 +1,34 @@
1
+ ---
2
+ name: terminal-shell-ops
3
+ description: "Design and operate terminal, shell and command workflows across Bash, PowerShell and Node-driven CLIs with focus on clarity, portability, debuggability and safe automation."
4
+ ---
5
+
6
+ # Terminal Shell Ops
7
+
8
+ Use this skill when the task is mainly shell, terminal interaction, operator UX or CLI execution flow.
9
+
10
+ ## Workflow
11
+
12
+ - Confirm shell, OS and TTY assumptions before scripting behavior.
13
+ - Keep commands inspectable, composable and easy to rerun.
14
+ - Prefer explicit flags, paths and exit-code handling over hidden magic.
15
+ - Model input/output, prompts and failure paths as operator-facing interfaces.
16
+ - Validate with realistic terminal usage, not only static reading.
17
+
18
+ ## Coverage
19
+
20
+ - Bash, PowerShell, terminal UX, CLI flows, scripts, prompts and automation.
21
+ - PATH, environment variables, exit codes, streams, TTY detection and portability.
22
+ - Operator documentation, reliability and troubleshooting.
23
+
24
+ ## Reference Anchors
25
+
26
+ - Bash manual: `https://www.gnu.org/software/bash/manual/bash.html`
27
+ - PowerShell docs: `https://learn.microsoft.com/powershell/`
28
+
29
+ ## Guardrails
30
+
31
+ - Do not rely on shell-specific behavior without stating it.
32
+ - Do not swallow stderr or exit codes.
33
+ - Do not make interactive commands destructive by default.
34
+ - Do not confuse development shortcuts with operator-safe automation.