skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

shadcn

Standardize shadcn/ui component development with Radix accessibility and Tailwind theming.

Updated Mar 26, 2026
Search Tags:#accessibility#shadcn/ui#react hook form#tanstack table#zod validation#radix primitives#tailwind theming
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill shadcn-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill shadcn-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It prevents teams from shipping shadcn/ui integrations that break Radix accessibility behaviors, lose keyboard support, or regress performance due to poor composition and styling patterns.

Core Features & Use Cases

  • Accessible Radix-first implementations: preserve ARIA attributes, focus management, and keyboard navigation when composing dialogs, triggers, and primitives.
  • Robust component architecture: enforce ref forwarding, class composition via cn(), and safe variant patterns with CVA to avoid style bleeding and runtime issues.
  • Production-grade UI patterns: apply shadcn/ui theming with CSS variables (including dark mode), implement form correctness with React Hook Form + Zod, and handle data rendering with TanStack Table/Virtual for large datasets.
  • Use Cases: code review and refactoring for UI libraries, building forms and tables in Next.js, and creating maintainable component APIs that support scalable design systems.

Quick Start

Use the shadcn skill to review and refactor your shadcn/ui component code for accessibility, styling consistency, and performance, then apply the highest-impact rule fixes from the generated guidance.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I preserve keyboard navigation and ARIA attributes when composing shadcn/ui components?▼

Preserve Radix accessibility behaviors in shadcn/ui by enforcing correct component composition, maintaining ref forwarding, and applying safe variant patterns with CVA to prevent focus management and keyboard regressions.

What is the best way to prevent style bleeding in shadcn/ui Tailwind theming?▼

Prevent style bleeding in shadcn/ui Tailwind theming by applying CSS variables for dark mode support and utilizing the cn() utility for safe class composition alongside CVA variant patterns.

How do I build production-grade forms with React Hook Form and Zod validation in shadcn/ui?▼

Build production-grade shadcn/ui forms by integrating React Hook Form with Zod validation to ensure schema correctness, maintain accessible inputs, and preserve Radix focus behaviors during user interaction.

Can I use TanStack Table and virtualization for large datasets within shadcn/ui components?▼

Yes, you can render large datasets within shadcn/ui by applying TanStack Table and Virtualization alongside performance-safe patterns like render isolation to prevent runtime issues.

Does refactoring shadcn/ui components affect Radix primitive accessibility behaviors?▼

Refactoring shadcn/ui components risks breaking Radix primitive accessibility behaviors if composition is poor, making it crucial to enforce ARIA preservation, keyboard navigation, and focus management during updates.

Why do my shadcn/ui dialogs lose focus management and keyboard support?▼

shadcn/ui dialogs lose focus management and keyboard support when component composition breaks Radix primitives, requiring strict ref forwarding and proper trigger composition to restore accessibility behaviors.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
SAPSAP
294

a11y-audit

Audit UI components for WCAG AA accessibility compliance.

Official
Advanced
trycompaitrycompai
1.8k

forms

Build React forms with React Hook Form and Zod validation.

Official
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate