Unocss Shadcn
Unocss Shadcn empowers developers to rapidly build stylish and accessible React components using pre-built UI primitives and Unocss's performance benefits.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add unocss-shadcn npx -- -y @trustedskills/unocss-shadcn
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"unocss-shadcn": {
"command": "npx",
"args": [
"-y",
"@trustedskills/unocss-shadcn"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill integrates Unocss and Shadcn UI, providing a streamlined workflow for building modern web applications. It allows you to leverage Unocss's utility-first CSS approach with the pre-built components of Shadcn UI. This combination simplifies styling and development by offering both customization and ready-to-use design elements.
When to use it
- Rapid prototyping: Quickly build user interfaces using Shadcn’s components, styled with Unocss's utility classes.
- Custom component creation: Easily create custom components that adhere to a consistent design system powered by both technologies.
- Existing projects: Integrate into existing projects to modernize styling and leverage pre-built UI elements.
- Consistent theming: Implement and maintain themes across your application with Unocss's configuration capabilities.
Key capabilities
- Unocss integration
- Shadcn UI component library
- Utility-first CSS styling
- Pre-built design components
- Customizable theme support
Example prompts
- "Generate a button using Shadcn UI and style it with Unocss to have a blue background."
- "Create an input field with rounded corners using Shadcn UI, styled with Unocss for a dark gray border."
- “Show me how to integrate this new component into my existing project, using both Shadcn and Unocss.”
Tips & gotchas
- Requires familiarity with both Unocss and Shadcn UI concepts.
- Ensure your project is properly configured with Node.js and a package manager (e.g., npm or yarn) before installation.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.