shadcn
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
Is shadcn safe to install?
Review the source first: our audit of shadcn's source files found 3 shell commands, 0 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands via the project's package runner and reads/writes files to manage UI components and project configuration.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building UI components and design systems using shadcn/ui.
What can you do with it?
- Adding and managing UI components via CLI
- Searching component registries
- Debugging component composition and styling
- Applying and switching project presets
- Fetching component documentation and usage examples
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable instructions and enforces strict coding standards. It relies on project-specific context to ensure accurate CLI operations.
What does the skill file contain?
# shadcn/ui 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`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. ## Current Project Context ```json !`npx shadcn@latest info --json` ``` The JSON above contains the project config and installed components. Use `npx shadcn@latest docs...
Frequently asked questions
How do I ensure I am using the correct component API?
Run 'npx shadcn@latest docs <component>' to retrieve the official documentation and example URLs, then fetch those URLs to verify the current API and usage patterns.
What should I do before adding a new component?
Check the project context or the resolved paths directory to see if the component is already installed. Use 'npx shadcn@latest search' to find components before creating custom markup.
How do I handle third-party registry components?
After adding them, verify the files for missing sub-components, incorrect composition, or hardcoded import paths. Update imports to match the project's 'iconLibrary' and path aliases.
How do I update existing components safely?
Use the '--dry-run' and '--diff' flags with the add command to preview changes before applying them to the project.
Related skills
find-skills
2.3MUsers seeking to extend agent capabilities with specialized tools, workflows, or knowledge packages
The find-skills skill enables agents to search for, discover, and install modular packages from the open agent skills ecosystem using the Skills CLI.
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
agent-browser
506.7KAI agents and developers requiring programmatic web interaction, exploratory testing, or automation of Electron desktop applications
The agent-browser CLI provides browser automation for AI agents using Chrome or Chromium via CDP. It supports page navigation, form interaction, data extraction, and testing. The tool utilizes accessibility-tree snapshots and element references for interaction.
video-edit
338.7KUsers of the RunComfy CLI who need to automate video editing tasks like restyling, background swapping, or motion transfer
The video-edit skill acts as a router for the RunComfy CLI, selecting between Wan 2.7 Edit-Video, Kling 2.6 Pro Motion Control, and Lucy Edit Restyle models based on user intent to perform video transformations.