shadcn-syntax-button

What problem does it solve?

This Skill prevents common, high-friction mistakes when adding or debugging the shadcn ui Button—especially around variants, sizes, asChild behavior, icon-only buttons, and Tailwind v3 vs v4 focus-ring differences.

Core Features & Use Cases

• Variant- and size-correct Button usage: choose the right variant (default/destructive/outline/secondary/ghost/link) and size (default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg) based on intent, not vibes.
• asChild Slot pattern mastery: correctly wrap Next.js Link, react-router Link, or ref-forwarding custom components using Slot.Root with exactly one child element.
• Icon, loading, and accessibility recipes: build icon-only buttons with aria-label, create loading/spinner buttons that rely on disabled styling, and keep RSC boundaries safe (no unnecessary "use client").
• Debugging guardrails for unstyled/crashing Buttons: diagnose issues like multiple children inside asChild, non-ref-forwarding children, incorrect icon sizing, className being mishandled, or focus-ring mismatches.

Quick Start

Generate a corrected shadcn ui Button implementation for a Next.js Link navigation using asChild, selecting the appropriate variant/size, ensuring ref compatibility, and matching the correct Tailwind v3 or v4 focus-ring behavior.