skills.rest
h102-log
h102-logCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-shadcn

Implements shadcn/ui component patterns, theming, and optimization for React applications.

Updated Jun 18, 2026
Search Tags:#typescript#theming#react#component library#tailwind css#shadcn#radix ui
One-click install
npx skills add https://github.com/h102-log/pdfrag --skill moai-library-shadcn-h102-log
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-shadcn
Source: https://github.com/h102-log/pdfrag/tree/main/.claude/skills/moai-library-shadcn
Command: npx skills add https://github.com/h102-log/pdfrag --skill moai-library-shadcn-h102-log

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, accessible React interfaces with shadcn/ui requires deep knowledge of Radix primitives, Tailwind CSS design tokens, form validation, and performance tuning, which is time-consuming to assemble from scattered documentation. ## Core Features & Use Cases - Component Architecture Guidance: Covers form, display, navigation, data, and feedback components with composition patterns, Zod and React Hook Form validation, and TanStack Table integration. - Theme System Implementation: Provides CSS variable-based design tokens, dark mode support, brand theme customization, and Tailwind configuration. - Performance Optimization: Includes lazy loading, memoization, virtual scrolling, and bundle size reduction patterns. - Use Case: When building a settings page with tabbed sections, validated forms, and dark mode support, use this Skill to get production-ready shadcn/ui code patterns and accessibility-compliant implementations. ## Quick Start Ask the AI to build a responsive user settings page using shadcn/ui components with form validation and dark mode support.

Frequently Asked Questions about moai-library-shadcn

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

FAQPage Schema
How do I set up shadcn/ui in a React project?▼

Run the shadcn-ui init command with npx, then configure components.json with your Tailwind config path, CSS path, and aliases. Add individual components using the shadcn-ui add command, such as button, form, or dialog.

How to add form validation to shadcn/ui components?▼

Integrate React Hook Form with Zod by defining a schema with z.object, then use zodResolver in useForm. Connect the form element through form.handleSubmit and display validation errors from formState.

Does shadcn/ui support dark mode?▼

Yes, shadcn/ui supports dark mode through CSS variables and a class-based strategy. Define light and dark token sets in globals.css, configure darkMode as class in tailwind.config, and toggle the dark class on the root element.

Is shadcn/ui installed as an npm package?▼

No, shadcn/ui is not a traditional npm package. It is a collection of components you copy into your project, giving you full ownership and customization control with dependencies limited to Radix UI primitives and Tailwind CSS.

How do I optimize shadcn/ui bundle size?▼

Import only the specific components you need rather than entire modules, configure Tailwind content paths to purge unused styles, and use React.lazy with code splitting for heavy components like data tables.

When should I not use shadcn/ui?▼

Avoid shadcn/ui for non-React frameworks or projects requiring CSS-only styling without Tailwind. It is designed specifically for React applications using Tailwind CSS and Radix UI primitives.

Related Skills

Explore More Software Engineering Skills→
Ikki-GroupIkki-Group

tailwind-design-system

Create Tailwind CSS v4 design systems with semantic tokens and CVA components.

Official
Advanced
maminul007maminul007

ui-e2e

Execute Playwright end-to-end tests for UI, RBAC, and WebSocket flows.

Community
Advanced
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced