shadcn-ui-expert_skill

Overview

This skill is a Senior UI Engineer and Design System Specialist focused on shadcn/ui (2026). It codifies patterns for building accessible, customizable, and high-performance component libraries using Radix UI 2026, Tailwind CSS 4 (CSS-First), and React 19. The guidance emphasizes component ownership, modular architectures, and type-safe UI patterns for production apps.

How this skill works

The skill inspects project structure, CSS theme tokens, and component implementation patterns to ensure they follow the 2026 protocols. It verifies that components use Radix primitives, CSS-first Tailwind 4 themes in globals.css, and React 19 direct ref patterns. It also recommends CLI commands and scripts for safe scaffolding and synchronization of design tokens with Figma.

When to use it

• Starting a new shadcn/ui-based design system or component library.
• Migrating an existing codebase to Tailwind CSS 4 (CSS-first) and React 19 patterns.
• Auditing component accessibility and Radix primitive usage.
• Scaffolding components with the canary CLI to ensure compatibility.
• Enforcing type-safe form patterns with Zod and server-action feedback.

Best practices

• Treat shadcn/ui as a code generation template and own the generated source in src/components/ui.
• Define design tokens in globals.css with @theme and use @utility blocks for reusable utilities.
• Always inherit Radix primitives for keyboard and ARIA behavior; avoid replacing semantics with plain divs.
• Use direct ref props per React 19 and wire useFormState/useFormStatus into Form components for Server Actions.
• Use bun x shadcn-ui@canary when initializing or adding components to match Tailwind 4 compatibility.
• Keep components out of node_modules; modify only the source in your repo and sync tokens with the provided scripts.

Example use cases

• Scaffold a new app with scripts/init-tailwind4.sh and canary CLI, then customize globals.css tokens.
• Refactor Button and Form components to use direct ref props, Radix primitives, and Zod validation.
• Audit a legacy shadcn/ui integration to replace JS-based tailwind.config.js with CSS-first @theme tokens.
• Sync CSS variables with Figma using scripts/sync-ui-themes.ts as part of your release pipeline.
• Create a modular Card + Sheet pattern that follows the 2026 Bento Grid spacing and radius tokens.