Run any Skill in Manus with one click

shadcn-ui

Stars3

Forks1

UpdatedJuly 10, 2026 at 23:25

This skill should be used when adding, customizing, or theming a UI component under web/ (e.g. "add a dialog", "add a shadcn button", "set up a form", "change the color palette", "add dark mode"), or when asked how shadcn/ui works in this project. Documents the official shadcn/ui CLI and conventions only — no third-party registries or paid services.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

jpgomesr

jpgomesr/neuralvault

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	shadcn-ui
description	This skill should be used when adding, customizing, or theming a UI component under web/ (e.g. "add a dialog", "add a shadcn button", "set up a form", "change the color palette", "add dark mode"), or when asked how shadcn/ui works in this project. Documents the official shadcn/ui CLI and conventions only — no third-party registries or paid services.

shadcn/ui

shadcn/ui is not a component library — the CLI copies component source code directly into the project (web/components/ui/), built on Radix UI primitives and Tailwind CSS. There's no npm package to update; installed components are owned code, editable like any other file in the repo.

This project's setup

web/components.json is already initialized:

{
  "style": "radix-nova",
  "tailwind": { "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true },
  "iconLibrary": "lucide",
  "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" },
  "registries": {}
}

No custom registries are configured — every component comes from the official public shadcn/ui registry, free, no API key, no account. npx shadcn@latest init has already been run; don't re-run it unless deliberately resetting the config.

Adding a component

cd web
npx shadcn@latest add button dialog form    # space-separated, install several at once

This writes source files into components/ui/ per the aliases above, and installs any Radix UI packages the component depends on. Per the web-conventions skill, new primitives always come in this way — never hand-write a components/ui/* file from scratch.

Other CLI commands

npx shadcn@latest add <component> --overwrite   # re-pull a component, overwriting local edits
npx shadcn@latest diff <component>               # show upstream changes vs. the installed (possibly edited) version
npx shadcn@latest view <component>               # preview a component's source before installing

diff is the update mechanism — since component code is copied in, not versioned as a dependency, there's no npm update equivalent. Use it to check whether an installed component has drifted from upstream before deciding whether to re-pull it.

Theming

Color tokens are CSS variables defined in app/globals.css under :root (light mode) and .dark (dark mode overrides), in OKLCH color space — this project has cssVariables: true and baseColor: "neutral". Tokens are semantic background/foreground pairs (background/foreground, card/card-foreground, primary/primary-foreground, plus secondary, muted, accent, destructive, border, input, ring). Change the palette by editing the variable values in globals.css, not by overriding component classes — components already consume these tokens by default.

Finding a component

Full component list and live previews: ui.shadcn.com/docs/components. Common ones: accordion, alert, alert-dialog, avatar, badge, button, calendar, card, checkbox, combobox, command, data-table, dialog, dropdown-menu, form, input, label, popover, select, separator, sheet, skeleton, sonner (toasts), table, tabs, textarea, tooltip.

More from this repository

same repository

retrieval

jpgomesr/neuralvault

This skill should be used when modifying api/internal/retrieval/ (query, streaming answers, chunk hydration), or when asked "how does retrieval work", "why re-filter after Qdrant already filtered", "add a new caller of loadChunks", "why does Retrieve query Postgres full-text too". Documents four non-obvious invariants in the retrieval pipeline that look redundant or arbitrary but aren't.

2026-07-133

auth

jpgomesr/neuralvault

This skill should be used when modifying api/internal/auth/ (login, session, RequireUser middleware), or when asked "how does login work here", "how are sessions handled", "add a protected route". Documents the three login surfaces and the custom session scheme, since neither is a standard JWT/OIDC-library setup.

2026-07-103

code-review

jpgomesr/neuralvault

This skill should be used automatically before finishing a nontrivial NeuralVault diff, or when asked to "review this", "check this against conventions", "does this follow the codebase style" — without requiring the explicit /review command. Checks a diff against NeuralVault's own layering and terminology rules.

2026-07-103

go-feature-domain

jpgomesr/neuralvault

This skill should be used when adding or modifying a feature domain under api/internal/ (auth, health, retrieval, sources, workspaces, or a new one), or when asked "how do I add a new endpoint/domain", "where does this logic go", "how are Go tests structured here". Documents the three-file domain layout, its justified exceptions, and the testing conventions.

2026-07-103

go-provider-interface

jpgomesr/neuralvault

This skill should be used when adding a new backend to embedding, llm, vectorstorage, objectstorage, or storage (e.g. "add an OpenAI provider", "add a new LLM backend", "swap the vector database"), or when asked how NeuralVault's pluggable-provider pattern works. Documents the interface-package shape, the fail-fast startup convention, and two known exceptions that look like bugs but aren't.

2026-07-103

ollama

jpgomesr/neuralvault

This skill should be used when modifying api/internal/embedding/ollama/ or api/internal/llm/ollama/, or when asked "why did the server fail to start over Ollama", "how does streaming work here", "add timeout handling to the LLM client". Documents the fail-fast model check and why the LLM client has no HTTP timeout.

2026-07-103

name	shadcn-ui
description	This skill should be used when adding, customizing, or theming a UI component under web/ (e.g. "add a dialog", "add a shadcn button", "set up a form", "change the color palette", "add dark mode"), or when asked how shadcn/ui works in this project. Documents the official shadcn/ui CLI and conventions only — no third-party registries or paid services.

shadcn/ui

This project's setup

web/components.json is already initialized:

{
  "style": "radix-nova",
  "tailwind": { "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true },
  "iconLibrary": "lucide",
  "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" },
  "registries": {}
}

Adding a component

cd web
npx shadcn@latest add button dialog form    # space-separated, install several at once

Other CLI commands

npx shadcn@latest add <component> --overwrite   # re-pull a component, overwriting local edits
npx shadcn@latest diff <component>               # show upstream changes vs. the installed (possibly edited) version
npx shadcn@latest view <component>               # preview a component's source before installing