shadcn-errors-radix-controlled

What problem does it solve?

This Skill prevents Radix-wrapped shadcn primitives from getting stuck, crashing, mis-stacking, or losing focus by diagnosing the most common controlled-state and Slot/Portal contract violations.

Core Features & Use Cases

• Open/Value Contract Debugging: Detects and corrects half-controlled states such as open without onOpenChange and value without onValueChange, which makes primitives effectively read-only.
• Slot asChild Safety Checks: Prevents the React Slot runtime crash and silent a11y/focus failures by enforcing the “exactly one child” and “must forward refs” rules.
• Portal + container Fixes: Resolves stacking-context and placement issues caused by transformed/filtered ancestors by scoping the Portal with the container prop.
• Modal Semantics & Focus Management: Applies correct modal behavior (focus trap/scroll lock vs non-modal dismissal) to fix popovers/dialog-like components that close on form submit or swallow Escape.
• Close-On-Success Workflow: Ensures controlled open state is updated only after mutations succeed so loading UI and error handling work reliably.

Quick Start

Ask the AI to diagnose why your shadcn Dialog/Popover/Select doesn’t close, then request the exact fix using the open/value pairing and the correct event/prop patterns.