skills.rest
Asymmetric-al
Asymmetric-alOFFICIAL
Explore all skills by this author →
WebsiteGitHub

moai-library-shadcn

Install, compose, and customize shadcn/ui components with Tailwind CSS tokens.

417|7|Updated Jan 12, 2026
Search Tags:#accessibility#design system#component library#shadcn/ui#tailwind css#ui components
One-click install
npx skills add https://github.com/Asymmetric-al/core --skill moai-library-shadcn-asymmetric-al
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-shadcn
Source: https://github.com/Asymmetric-al/core/tree/main/.cursor/skills/moai-library-shadcn
Command: npx skills add https://github.com/Asymmetric-al/core --skill moai-library-shadcn-asymmetric-al

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized and efficient way to build consistent, accessible, and themeable user interfaces using the shadcn/ui component library and its associated design tokens.

Core Features & Use Cases

  • Component Integration: Easily install, compose, and customize shadcn/ui components.
  • Token-Based Styling: Enforces the use of design tokens for colors, spacing, and typography, ensuring visual consistency.
  • Accessibility: Maintains accessibility and keyboard behavior from underlying Radix UI or Base UI primitives.
  • Use Case: When developing a new feature that requires a modal dialog, use this Skill to install the shadcn/ui Dialog component, customize its appearance using theme tokens, and ensure it adheres to accessibility best practices.

Quick Start

Install the shadcn/ui Button component into the project.

Frequently Asked Questions about moai-library-shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible UI components with Tailwind CSS tokens?▼

To build accessible UI components with Tailwind CSS tokens, you can leverage the shadcn/ui component library to install, compose, and customize elements using token-based styling. This ensures visual consistency while maintaining accessibility and keyboard behavior from underlying Radix UI or Base UI primitives.

What is the best way to customize shadcn/ui components for a new feature?▼

The best way to customize shadcn/ui components is by applying token-based styling for colors, spacing, and typography. This approach enforces visual consistency across your user interface while allowing you to adapt components like modal dialogs to specific feature requirements.

Can I use shadcn/ui components with other UI systems like Base UI?▼

Yes, you can use shadcn/ui components with other UI systems like Base UI because the design system supports interoperability. This allows you to leverage composable APIs and underlying primitives while maintaining consistent token-based styling.

How do I install a shadcn/ui Dialog component into my project?▼

To install a shadcn/ui Dialog component into your project, you select the desired component from the registry and integrate it into your codebase. Once installed, you can customize its appearance using theme tokens and ensure it meets accessibility standards.

Related Skills

Explore More Design & Creative Skills→
achmfachmf

tailwind-patterns

Guide Tailwind CSS v4 projects with CSS-first configuration and container queries.

Community
Intermediate
agentset-aiagentset-ai
2.0k

baseline-ui

Enforce Tailwind CSS defaults and accessible primitives for consistent UI.

Official
Basic
djscruggsdjscruggs

shadcn

Apply shadcn/ui patterns with Radix primitives and Tailwind CSS in React or Next.js projects.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced