skills.rest
pproenca
pproencaCOMMUNITY
Explore all skills by this author →
𝕏@ThePedroProencaGitHub

shadcn

Review shadcn/ui component implementations for accessibility and best practices.

193|17|Updated Jan 16, 2026
Search Tags:#accessibility#react#component library#shadcn/ui#tailwind css#frontend development
One-click install
npx skills add https://github.com/pproenca/dot-skills --skill shadcn-pproenca
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/pproenca/dot-skills/tree/main/skills/.curated/shadcn
Command: npx skills add https://github.com/pproenca/dot-skills --skill shadcn-pproenca

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures that applications built with shadcn/ui follow best practices for component architecture, accessibility, styling, and performance, leading to more maintainable and robust user interfaces.

Core Features & Use Cases

  • Component Architecture: Guides on proper usage of Radix primitives, CVA patterns, and ref forwarding.
  • Accessibility: Ensures compliance with ARIA standards, focus management, and keyboard navigation.
  • Styling & Theming: Best practices for Tailwind CSS, CSS variables, and dark mode implementation.
  • Form Handling: Integration with React Hook Form and Zod for efficient and type-safe forms.
  • Use Case: When developing a new feature using shadcn/ui components, consult this Skill to ensure the implementation adheres to established patterns for consistency and quality.

Quick Start

Apply the shadcn skill to review the accessibility of the Dialog component implementation.

Frequently Asked Questions about shadcn

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

FAQPage Schema
What are the best practices for shadcn/ui component architecture and accessibility?▼

Best practices for shadcn/ui component architecture involve proper usage of Radix UI primitives, CVA patterns, and ref forwarding to ensure ARIA standards compliance, focus management, and keyboard navigation for accessible user interfaces.

How do I implement dark mode and theming in shadcn/ui with Tailwind CSS?▼

Implement dark mode and theming in shadcn/ui by applying best practices for Tailwind CSS configuration and utilizing CSS variables, allowing for maintainable and consistent styling across your React application.

How do I integrate React Hook Form and Zod with shadcn/ui components?▼

Integrate React Hook Form and Zod with shadcn/ui to build efficient, type-safe forms, ensuring your data display and form handling adhere to established patterns for maintainability and user experience.

Can I use shadcn/ui for performance optimization and state management in React?▼

Yes, you can use shadcn/ui guidelines for performance optimization and state management in React, applying established patterns to ensure your frontend development workflow remains robust and maintainable.

What is the recommended way to compose Radix UI primitives in shadcn/ui?▼

The recommended way to compose Radix UI primitives in shadcn/ui is by following specific architecture guidelines and composition patterns, ensuring proper component structure and adherence to accessibility standards.

Related Skills

Explore More Software Engineering Skills→
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
trycompaitrycompai
1.8k

forms

Build React forms with React Hook Form and Zod validation.

Official
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate