[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M716XGMMZT18PBYRMS1ABC41":3,"skill-same:01M716XGMMZT18PBYRMS1ABC41":96},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":14,"repositoryHtmlUrl":59,"repositoryHomepageUrl":6,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M716XGMMZT18PBYRMS1ABC41","radix-ui-design-system",null,"Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"ui","system","radix ui design system","design system","ui design","ui design system","radix ui","design","headless","systems","customization","build","theming","for","safe","2026","headless component","component","strategies","design systems","2026-11-10 10:12:30",false,"---\nname: radix-ui-design-system\ndescription: \"Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.\"\nrisk: safe\nsource: self\ndate_added: \"2026-02-27\"\n---\n\n# Radix UI Design System\n\nBuild production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.\n\n## Overview\n\nRadix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.\n\n**Key Strengths:**\n- **Headless by design**: Full styling control without fighting defaults\n- **Accessibility built-in**: WAI-ARIA compliant, keyboard navigation, screen reader support\n- **Composable primitives**: Build complex components from simple building blocks\n- **Framework agnostic**: Works with React, but styles work anywhere\n\n## When to Use This Skill\n\n- Creating a custom design system from scratch\n- Building accessible UI component libraries\n- Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.)\n- Migrating from styled component libraries to unstyled primitives\n- Setting up theming systems with CSS variables or Tailwind\n- Need full control over component behavior and styling\n- Building applications requiring WCAG 2.1 AA\u002FAAA compliance\n\n## Do not use this skill when\n\n- You need pre-styled components out of the box (use shadcn\u002Fui, Mantine, etc.)\n- Building simple static pages without interactivity\n- The project doesn't use React 16.8+ (Radix requires hooks)\n- You need components for frameworks other than React\n\n---\n\n## Core Principles\n\n### 1. Accessibility First\n\nEvery Radix primitive is built with accessibility as the foundation:\n\n- **Keyboard Navigation**: Full keyboard support (Tab, Arrow keys, Enter, Escape)\n- **Screen Readers**: Proper ARIA attributes and live regions\n- **Focus Management**: Automatic focus trapping and restoration\n- **Disabled States**: Proper handling of disabled and aria-disabled\n\n**Rule**: Never override accessibility features. Enhance, don't replace.\n\n### 2. Headless Architecture\n\nRadix provides **behavior**, you provide **appearance**:\n\n```tsx\n\u002F\u002F ❌ Don't fight pre-styled components\n\u003CButton className=\"override-everything\" \u002F>\n\n\u002F\u002F ✅ Radix gives you behavior, you add styling\n\u003CDialog.Root>\n  \u003CDialog.Trigger className=\"your-button-styles\" \u002F>\n  \u003CDialog.Content className=\"your-modal-styles\" \u002F>\n\u003C\u002FDialog.Root>\n```\n\n### 3. Composition Over Configuration\n\nBuild complex components from simple primitives:\n\n```tsx\n\u002F\u002F Primitive components compose naturally\n\u003CTabs.Root>\n  \u003CTabs.List>\n    \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n    \u003CTabs.Trigger value=\"tab2\">Tab 2\u003C\u002FTabs.Trigger>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Content value=\"tab1\">Content 1\u003C\u002FTabs.Content>\n  \u003CTabs.Content value=\"tab2\">Content 2\u003C\u002FTabs.Content>\n\u003C\u002FTabs.Root>\n```\n\n---\n\n## Getting Started\n\n### Installation\n\n```bash\n# Install individual primitives (recommended)\nnpm install @radix-ui\u002Freact-dialog @radix-ui\u002Freact-dropdown-menu\n\n# Or install multiple at once\nnpm install @radix-ui\u002Freact-{dialog,dropdown-menu,tabs,tooltip}\n\n# For styling (optional but common)\nnpm install clsx tailwind-merge class-variance-authority\n```\n\n### Basic Component Pattern\n\nEvery Radix component follows this pattern:\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\n\nexport function MyDialog() {\n  return (\n    \u003CDialog.Root>\n      {\u002F* Trigger the dialog *\u002F}\n      \u003CDialog.Trigger asChild>\n        \u003Cbutton className=\"trigger-styles\">Open\u003C\u002Fbutton>\n      \u003C\u002FDialog.Trigger>\n\n      {\u002F* Portal renders outside DOM hierarchy *\u002F}\n      \u003CDialog.Portal>\n        {\u002F* Overlay (backdrop) *\u002F}\n        \u003CDialog.Overlay className=\"overlay-styles\" \u002F>\n        \n        {\u002F* Content (modal) *\u002F}\n        \u003CDialog.Content className=\"content-styles\">\n          \u003CDialog.Title>Title\u003C\u002FDialog.Title>\n          \u003CDialog.Description>Description\u003C\u002FDialog.Description>\n          \n          {\u002F* Your content here *\u002F}\n          \n          \u003CDialog.Close asChild>\n            \u003Cbutton>Close\u003C\u002Fbutton>\n          \u003C\u002FDialog.Close>\n        \u003C\u002FDialog.Content>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n---\n\n## Theming Strategies\n\n### Strategy 1: CSS Variables (Framework-Agnostic)\n\n**Best for**: Maximum portability, SSR-friendly\n\n```css\n\u002F* globals.css *\u002F\n:root {\n  --color-primary: 220 90% 56%;\n  --color-surface: 0 0% 100%;\n  --radius-base: 0.5rem;\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1);\n}\n\n[data-theme=\"dark\"] {\n  --color-primary: 220 90% 66%;\n  --color-surface: 222 47% 11%;\n}\n```\n\n```tsx\n\u002F\u002F Component.tsx\n\u003CDialog.Content \n  className=\"\n    bg-[hsl(var(--color-surface))]\n    rounded-[var(--radius-base)]\n    shadow-[var(--shadow-lg)]\n  \"\n\u002F>\n```\n\n### Strategy 2: Tailwind + CVA (Class Variance Authority)\n\n**Best for**: Tailwind projects, variant-heavy components\n\n```tsx\n\u002F\u002F button.tsx\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@\u002Flib\u002Futils';\n\nconst buttonVariants = cva(\n  \u002F\u002F Base styles\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary\u002F90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive\u002F90\",\n        outline: \"border border-input bg-background hover:bg-accent\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\ninterface ButtonProps extends VariantProps\u003Ctypeof buttonVariants> {\n  children: React.ReactNode;\n}\n\nexport function Button({ variant, size, children }: ButtonProps) {\n  return (\n    \u003Cbutton className={cn(buttonVariants({ variant, size }))}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n}\n```\n\n### Strategy 3: Stitches (CSS-in-JS)\n\n**Best for**: Runtime theming, scoped styles\n\n```tsx\nimport { styled } from '@stitches\u002Freact';\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\n\nconst StyledContent = styled(Dialog.Content, {\n  backgroundColor: '$surface',\n  borderRadius: '$md',\n  padding: '$6',\n  \n  variants: {\n    size: {\n      small: { width: '300px' },\n      medium: { width: '500px' },\n      large: { width: '700px' },\n    },\n  },\n  \n  defaultVariants: {\n    size: 'medium',\n  },\n});\n```\n\n---\n\n## Component Patterns\n\n### Pattern 1: Compound Components with Context\n\n**Use case**: Share state between primitive parts\n\n```tsx\n\u002F\u002F Select.tsx\nimport * as Select from '@radix-ui\u002Freact-select';\nimport { CheckIcon, ChevronDownIcon } from '@radix-ui\u002Freact-icons';\n\nexport function CustomSelect({ items, placeholder, onValueChange }) {\n  return (\n    \u003CSelect.Root onValueChange={onValueChange}>\n      \u003CSelect.Trigger className=\"select-trigger\">\n        \u003CSelect.Value placeholder={placeholder} \u002F>\n        \u003CSelect.Icon>\n          \u003CChevronDownIcon \u002F>\n        \u003C\u002FSelect.Icon>\n      \u003C\u002FSelect.Trigger>\n\n      \u003CSelect.Portal>\n        \u003CSelect.Content className=\"select-content\">\n          \u003CSelect.Viewport>\n            {items.map((item) => (\n              \u003CSelect.Item \n                key={item.value} \n                value={item.value}\n                className=\"select-item\"\n              >\n                \u003CSelect.ItemText>{item.label}\u003C\u002FSelect.ItemText>\n                \u003CSelect.ItemIndicator>\n                  \u003CCheckIcon \u002F>\n                \u003C\u002FSelect.ItemIndicator>\n              \u003C\u002FSelect.Item>\n            ))}\n          \u003C\u002FSelect.Viewport>\n        \u003C\u002FSelect.Content>\n      \u003C\u002FSelect.Portal>\n    \u003C\u002FSelect.Root>\n  );\n}\n```\n\n### Pattern 2: Polymorphic Components with `asChild`\n\n**Use case**: Render as different elements without losing behavior\n\n```tsx\n\u002F\u002F ✅ Render as Next.js Link but keep Radix behavior\n\u003CDialog.Trigger asChild>\n  \u003CLink href=\"\u002Fsettings\">Open Settings\u003C\u002FLink>\n\u003C\u002FDialog.Trigger>\n\n\u002F\u002F ✅ Render as custom component\n\u003CDropdownMenu.Item asChild>\n  \u003CYourCustomButton icon={\u003CIcon \u002F>}>Action\u003C\u002FYourCustomButton>\n\u003C\u002FDropdownMenu.Item>\n```\n\n**Why `asChild` matters**: Prevents nested button\u002Flink issues in accessibility tree.\n\n### Pattern 3: Controlled vs Uncontrolled\n\n```tsx\n\u002F\u002F Uncontrolled (Radix manages state)\n\u003CTabs.Root defaultValue=\"tab1\">\n  \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n\u003C\u002FTabs.Root>\n\n\u002F\u002F Controlled (You manage state)\nconst [activeTab, setActiveTab] = useState('tab1');\n\n\u003CTabs.Root value={activeTab} onValueChange={setActiveTab}>\n  \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n\u003C\u002FTabs.Root>\n```\n\n**Rule**: Use controlled when you need to sync with external state (URL, Redux, etc.).\n\n### Pattern 4: Animation with Framer Motion\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nexport function AnimatedDialog({ open, onOpenChange }) {\n  return (\n    \u003CDialog.Root open={open} onOpenChange={onOpenChange}>\n      \u003CDialog.Portal forceMount>\n        \u003CAnimatePresence>\n          {open && (\n            \u003C>\n              \u003CDialog.Overlay asChild>\n                \u003Cmotion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  className=\"dialog-overlay\"\n                \u002F>\n              \u003C\u002FDialog.Overlay>\n              \n              \u003CDialog.Content asChild>\n                \u003Cmotion.div\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95 }}\n                  className=\"dialog-content\"\n                >\n                  {\u002F* Content *\u002F}\n                \u003C\u002Fmotion.div>\n              \u003C\u002FDialog.Content>\n            \u003C\u002F>\n          )}\n        \u003C\u002FAnimatePresence>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n---\n\n## Common Primitives Reference\n\n### Dialog (Modal)\n\n```tsx\n\u003CDialog.Root> {\u002F* State container *\u002F}\n  \u003CDialog.Trigger \u002F> {\u002F* Opens dialog *\u002F}\n  \u003CDialog.Portal> {\u002F* Renders in portal *\u002F}\n    \u003CDialog.Overlay \u002F> {\u002F* Backdrop *\u002F}\n    \u003CDialog.Content> {\u002F* Modal content *\u002F}\n      \u003CDialog.Title \u002F> {\u002F* Required for a11y *\u002F}\n      \u003CDialog.Description \u002F> {\u002F* Required for a11y *\u002F}\n      \u003CDialog.Close \u002F> {\u002F* Closes dialog *\u002F}\n    \u003C\u002FDialog.Content>\n  \u003C\u002FDialog.Portal>\n\u003C\u002FDialog.Root>\n```\n\n### Dropdown Menu\n\n```tsx\n\u003CDropdownMenu.Root>\n  \u003CDropdownMenu.Trigger \u002F>\n  \u003CDropdownMenu.Portal>\n    \u003CDropdownMenu.Content>\n      \u003CDropdownMenu.Item \u002F>\n      \u003CDropdownMenu.Separator \u002F>\n      \u003CDropdownMenu.CheckboxItem \u002F>\n      \u003CDropdownMenu.RadioGroup>\n        \u003CDropdownMenu.RadioItem \u002F>\n      \u003C\u002FDropdownMenu.RadioGroup>\n      \u003CDropdownMenu.Sub> {\u002F* Nested menus *\u002F}\n        \u003CDropdownMenu.SubTrigger \u002F>\n        \u003CDropdownMenu.SubContent \u002F>\n      \u003C\u002FDropdownMenu.Sub>\n    \u003C\u002FDropdownMenu.Content>\n  \u003C\u002FDropdownMenu.Portal>\n\u003C\u002FDropdownMenu.Root>\n```\n\n### Tabs\n\n```tsx\n\u003CTabs.Root defaultValue=\"tab1\">\n  \u003CTabs.List>\n    \u003CTabs.Trigger value=\"tab1\" \u002F>\n    \u003CTabs.Trigger value=\"tab2\" \u002F>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Content value=\"tab1\" \u002F>\n  \u003CTabs.Content value=\"tab2\" \u002F>\n\u003C\u002FTabs.Root>\n```\n\n### Tooltip\n\n```tsx\n\u003CTooltip.Provider delayDuration={200}>\n  \u003CTooltip.Root>\n    \u003CTooltip.Trigger \u002F>\n    \u003CTooltip.Portal>\n      \u003CTooltip.Content side=\"top\" align=\"center\">\n        Tooltip text\n        \u003CTooltip.Arrow \u002F>\n      \u003C\u002FTooltip.Content>\n    \u003C\u002FTooltip.Portal>\n  \u003C\u002FTooltip.Root>\n\u003C\u002FTooltip.Provider>\n```\n\n### Popover\n\n```tsx\n\u003CPopover.Root>\n  \u003CPopover.Trigger \u002F>\n  \u003CPopover.Portal>\n    \u003CPopover.Content side=\"bottom\" align=\"start\">\n      Content\n      \u003CPopover.Arrow \u002F>\n      \u003CPopover.Close \u002F>\n    \u003C\u002FPopover.Content>\n  \u003C\u002FPopover.Portal>\n\u003C\u002FPopover.Root>\n```\n\n---\n\n## Accessibility Checklist\n\n### Every Component Must Have:\n\n- [ ] **Focus Management**: Visible focus indicators on all interactive elements\n- [ ] **Keyboard Navigation**: Full keyboard support (Tab, Arrows, Enter, Esc)\n- [ ] **ARIA Labels**: Meaningful labels for screen readers\n- [ ] **Color Contrast**: WCAG AA minimum (4.5:1 for text, 3:1 for UI)\n- [ ] **Error States**: Clear error messages with `aria-invalid` and `aria-describedby`\n- [ ] **Loading States**: Proper `aria-busy` during async operations\n\n### Dialog-Specific:\n- [ ] `Dialog.Title` is present (required for screen readers)\n- [ ] `Dialog.Description` provides context\n- [ ] Focus trapped inside modal when open\n- [ ] Escape key closes dialog\n- [ ] Focus returns to trigger on close\n\n### Dropdown-Specific:\n- [ ] Arrow keys navigate items\n- [ ] Type-ahead search works\n- [ ] First\u002Flast item wrapping behavior\n- [ ] Selected state indicated visually and with ARIA\n\n---\n\n## Best Practices\n\n### ✅ Do This\n\n1. **Always use `asChild` to avoid wrapper divs**\n   ```tsx\n   \u003CDialog.Trigger asChild>\n     \u003Cbutton>Open\u003C\u002Fbutton>\n   \u003C\u002FDialog.Trigger>\n   ```\n\n2. **Provide semantic HTML**\n   ```tsx\n   \u003CDialog.Content asChild>\n     \u003Carticle role=\"dialog\" aria-labelledby=\"title\">\n       {\u002F* content *\u002F}\n     \u003C\u002Farticle>\n   \u003C\u002FDialog.Content>\n   ```\n\n3. **Use CSS variables for theming**\n   ```css\n   .dialog-content {\n     background: hsl(var(--surface));\n     color: hsl(var(--on-surface));\n   }\n   ```\n\n4. **Compose primitives for complex components**\n   ```tsx\n   function CommandPalette() {\n     return (\n       \u003CDialog.Root>\n         \u003CDialog.Content>\n           \u003CCombobox \u002F> {\u002F* Radix Combobox inside Dialog *\u002F}\n         \u003C\u002FDialog.Content>\n       \u003C\u002FDialog.Root>\n     );\n   }\n   ```\n\n### ❌ Don't Do This\n\n1. **Don't skip accessibility parts**\n   ```tsx\n   \u002F\u002F ❌ Missing Title and Description\n   \u003CDialog.Content>\n     \u003Cdiv>Content\u003C\u002Fdiv>\n   \u003C\u002FDialog.Content>\n   ```\n\n2. **Don't fight the primitives**\n   ```tsx\n   \u002F\u002F ❌ Overriding internal behavior\n   \u003CDialog.Content onClick={(e) => e.stopPropagation()}>\n   ```\n\n3. **Don't mix controlled and uncontrolled**\n   ```tsx\n   \u002F\u002F ❌ Inconsistent state management\n   \u003CTabs.Root defaultValue=\"tab1\" value={activeTab}>\n   ```\n\n4. **Don't ignore keyboard navigation**\n   ```tsx\n   \u002F\u002F ❌ Disabling keyboard behavior\n   \u003CDropdownMenu.Item onKeyDown={(e) => e.preventDefault()}>\n   ```\n\n---\n\n## Real-World Examples\n\n### Example 1: Command Palette (Combo Dialog)\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\nimport { Command } from 'cmdk';\n\nexport function CommandPalette() {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n    document.addEventListener('keydown', down);\n    return () => document.removeEventListener('keydown', down);\n  }, []);\n\n  return (\n    \u003CDialog.Root open={open} onOpenChange={setOpen}>\n      \u003CDialog.Portal>\n        \u003CDialog.Overlay className=\"fixed inset-0 bg-black\u002F50\" \u002F>\n        \u003CDialog.Content className=\"fixed left-1\u002F2 top-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2\">\n          \u003CCommand>\n            \u003CCommand.Input placeholder=\"Type a command...\" \u002F>\n            \u003CCommand.List>\n              \u003CCommand.Empty>No results found.\u003C\u002FCommand.Empty>\n              \u003CCommand.Group heading=\"Suggestions\">\n                \u003CCommand.Item>Calendar\u003C\u002FCommand.Item>\n                \u003CCommand.Item>Search Emoji\u003C\u002FCommand.Item>\n              \u003C\u002FCommand.Group>\n            \u003C\u002FCommand.List>\n          \u003C\u002FCommand>\n        \u003C\u002FDialog.Content>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n### Example 2: Dropdown Menu with Icons\n\n```tsx\nimport * as DropdownMenu from '@radix-ui\u002Freact-dropdown-menu';\nimport { DotsHorizontalIcon } from '@radix-ui\u002Freact-icons';\n\nexport function ActionsMenu() {\n  return (\n    \u003CDropdownMenu.Root>\n      \u003CDropdownMenu.Trigger asChild>\n        \u003Cbutton className=\"icon-button\" aria-label=\"Actions\">\n          \u003CDotsHorizontalIcon \u002F>\n        \u003C\u002Fbutton>\n      \u003C\u002FDropdownMenu.Trigger>\n\n      \u003CDropdownMenu.Portal>\n        \u003CDropdownMenu.Content className=\"dropdown-content\" align=\"end\">\n          \u003CDropdownMenu.Item className=\"dropdown-item\">\n            Edit\n          \u003C\u002FDropdownMenu.Item>\n          \u003CDropdownMenu.Item className=\"dropdown-item\">\n            Duplicate\n          \u003C\u002FDropdownMenu.Item>\n          \u003CDropdownMenu.Separator className=\"dropdown-separator\" \u002F>\n          \u003CDropdownMenu.Item className=\"dropdown-item text-red-500\">\n            Delete\n          \u003C\u002FDropdownMenu.Item>\n        \u003C\u002FDropdownMenu.Content>\n      \u003C\u002FDropdownMenu.Portal>\n    \u003C\u002FDropdownMenu.Root>\n  );\n}\n```\n\n### Example 3: Form with Radix Select + React Hook Form\n\n```tsx\nimport * as Select from '@radix-ui\u002Freact-select';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface FormData {\n  country: string;\n}\n\nexport function CountryForm() {\n  const { control, handleSubmit } = useForm\u003CFormData>();\n\n  return (\n    \u003Cform onSubmit={handleSubmit((data) => console.log(data))}>\n      \u003CController\n        name=\"country\"\n        control={control}\n        render={({ field }) => (\n          \u003CSelect.Root onValueChange={field.onChange} value={field.value}>\n            \u003CSelect.Trigger className=\"select-trigger\">\n              \u003CSelect.Value placeholder=\"Select a country\" \u002F>\n              \u003CSelect.Icon \u002F>\n            \u003C\u002FSelect.Trigger>\n            \n            \u003CSelect.Portal>\n              \u003CSelect.Content className=\"select-content\">\n                \u003CSelect.Viewport>\n                  \u003CSelect.Item value=\"us\">United States\u003C\u002FSelect.Item>\n                  \u003CSelect.Item value=\"ca\">Canada\u003C\u002FSelect.Item>\n                  \u003CSelect.Item value=\"uk\">United Kingdom\u003C\u002FSelect.Item>\n                \u003C\u002FSelect.Viewport>\n              \u003C\u002FSelect.Content>\n            \u003C\u002FSelect.Portal>\n          \u003C\u002FSelect.Root>\n        )}\n      \u002F>\n      \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n---\n\n## Troubleshooting\n\n### Problem: Dialog doesn't close on Escape key\n\n**Cause**: `onEscapeKeyDown` event prevented or `open` state not synced\n\n**Solution**:\n```tsx\n\u003CDialog.Root open={open} onOpenChange={setOpen}>\n  {\u002F* Don't prevent default on escape *\u002F}\n\u003C\u002FDialog.Root>\n```\n\n### Problem: Dropdown menu positioning is off\n\n**Cause**: Parent container has `overflow: hidden` or transform\n\n**Solution**:\n```tsx\n\u002F\u002F Use Portal to render outside overflow container\n\u003CDropdownMenu.Portal>\n  \u003CDropdownMenu.Content \u002F>\n\u003C\u002FDropdownMenu.Portal>\n```\n\n### Problem: Animations don't work\n\n**Cause**: Portal content unmounts immediately\n\n**Solution**:\n```tsx\n\u002F\u002F Use forceMount + AnimatePresence\n\u003CDialog.Portal forceMount>\n  \u003CAnimatePresence>\n    {open && \u003CDialog.Content \u002F>}\n  \u003C\u002FAnimatePresence>\n\u003C\u002FDialog.Portal>\n```\n\n### Problem: TypeScript errors with `asChild`\n\n**Cause**: Type inference issues with polymorphic components\n\n**Solution**:\n```tsx\n\u002F\u002F Explicitly type your component\n\u003CDialog.Trigger asChild>\n  \u003Cbutton type=\"button\">Open\u003C\u002Fbutton>\n\u003C\u002FDialog.Trigger>\n```\n\n---\n\n## Performance Optimization\n\n### 1. Code Splitting\n\n```tsx\n\u002F\u002F Lazy load heavy primitives\nconst Dialog = lazy(() => import('@radix-ui\u002Freact-dialog'));\nconst DropdownMenu = lazy(() => import('@radix-ui\u002Freact-dropdown-menu'));\n```\n\n### 2. Portal Container Reuse\n\n```tsx\n\u002F\u002F Create portal container once\n\u003CTooltip.Provider>\n  {\u002F* All tooltips share portal container *\u002F}\n  \u003CTooltip.Root>...\u003C\u002FTooltip.Root>\n  \u003CTooltip.Root>...\u003C\u002FTooltip.Root>\n\u003C\u002FTooltip.Provider>\n```\n\n### 3. Memoization\n\n```tsx\n\u002F\u002F Memoize expensive render functions\nconst SelectItems = memo(({ items }) => (\n  items.map((item) => \u003CSelect.Item key={item.value} value={item.value} \u002F>)\n));\n```\n\n---\n\n## Integration with Popular Tools\n\n### shadcn\u002Fui (Built on Radix)\n\nshadcn\u002Fui is a collection of copy-paste components built with Radix + Tailwind.\n\n```bash\nnpx shadcn-ui@latest init\nnpx shadcn-ui@latest add dialog\n```\n\n**When to use shadcn vs raw Radix**:\n- Use shadcn: Quick prototyping, standard designs\n- Use raw Radix: Full customization, unique designs\n\n### Radix Themes (Official Styled System)\n\n```tsx\nimport { Theme, Button, Dialog } from '@radix-ui\u002Fthemes';\n\nfunction App() {\n  return (\n    \u003CTheme accentColor=\"crimson\" grayColor=\"sand\">\n      \u003CButton>Click me\u003C\u002FButton>\n    \u003C\u002FTheme>\n  );\n}\n```\n\n---\n\n## Related Skills\n\n- `@tailwind-design-system` - Tailwind + Radix integration patterns\n- `@react-patterns` - React composition patterns\n- `@frontend-design` - Overall frontend architecture\n- `@accessibility-compliance` - WCAG compliance testing\n\n---\n\n## Resources\n\n### Official Documentation\n- [Radix UI Docs](https:\u002F\u002Fwww.radix-ui.com\u002Fprimitives)\n- [Radix Colors](https:\u002F\u002Fwww.radix-ui.com\u002Fcolors) - Accessible color system\n- [Radix Icons](https:\u002F\u002Fwww.radix-ui.com\u002Ficons) - Icon library\n\n### Community Resources\n- [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com) - Component collection\n- [Radix UI Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F7Xb99uG) - Community support\n- [CVA Documentation](https:\u002F\u002Fcva.style\u002Fdocs) - Variant management\n\n### Examples\n- [Radix Playground](https:\u002F\u002Fwww.radix-ui.com\u002Fprimitives\u002Fdocs\u002Foverview\u002Fintroduction#try-it-out)\n- [shadcn\u002Fui Source](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui) - Production examples\n\n---\n\n## Quick Reference\n\n### Installation\n```bash\nnpm install @radix-ui\u002Freact-{primitive-name}\n```\n\n### Basic Pattern\n```tsx\n\u003CPrimitive.Root>\n  \u003CPrimitive.Trigger \u002F>\n  \u003CPrimitive.Portal>\n    \u003CPrimitive.Content \u002F>\n  \u003C\u002FPrimitive.Portal>\n\u003C\u002FPrimitive.Root>\n```\n\n### Key Props\n- `asChild` - Render as child element\n- `defaultValue` - Uncontrolled default\n- `value` \u002F `onValueChange` - Controlled state\n- `open` \u002F `onOpenChange` - Open state\n- `side` \u002F `align` - Positioning\n\n---\n\n**Remember**: Radix gives you **behavior**, you give it **beauty**. Accessibility is built-in, customization is unlimited.\n","# Radix UI Design System\n\nBuild production-ready, accessible design systems using Radix UI primitives with full customization control and zero style opinions.\n\n## Overview\n\nRadix UI provides unstyled, accessible components (primitives) that you can customize to match any design system. This skill guides you through building scalable component libraries with Radix UI, focusing on accessibility-first design, theming architecture, and composable patterns.\n\n**Key Strengths:**\n- **Headless by design**: Full styling control without fighting defaults\n- **Accessibility built-in**: WAI-ARIA compliant, keyboard navigation, screen reader support\n- **Composable primitives**: Build complex components from simple building blocks\n- **Framework agnostic**: Works with React, but styles work anywhere\n\n## When to Use This Skill\n\n- Creating a custom design system from scratch\n- Building accessible UI component libraries\n- Implementing complex interactive components (Dialog, Dropdown, Tabs, etc.)\n- Migrating from styled component libraries to unstyled primitives\n- Setting up theming systems with CSS variables or Tailwind\n- Need full control over component behavior and styling\n- Building applications requiring WCAG 2.1 AA\u002FAAA compliance\n\n## Do not use this skill when\n\n- You need pre-styled components out of the box (use shadcn\u002Fui, Mantine, etc.)\n- Building simple static pages without interactivity\n- The project doesn't use React 16.8+ (Radix requires hooks)\n- You need components for frameworks other than React\n\n---\n\n## Core Principles\n\n### 1. Accessibility First\n\nEvery Radix primitive is built with accessibility as the foundation:\n\n- **Keyboard Navigation**: Full keyboard support (Tab, Arrow keys, Enter, Escape)\n- **Screen Readers**: Proper ARIA attributes and live regions\n- **Focus Management**: Automatic focus trapping and restoration\n- **Disabled States**: Proper handling of disabled and aria-disabled\n\n**Rule**: Never override accessibility features. Enhance, don't replace.\n\n### 2. Headless Architecture\n\nRadix provides **behavior**, you provide **appearance**:\n\n```tsx\n\u002F\u002F ❌ Don't fight pre-styled components\n\u003CButton className=\"override-everything\" \u002F>\n\n\u002F\u002F ✅ Radix gives you behavior, you add styling\n\u003CDialog.Root>\n  \u003CDialog.Trigger className=\"your-button-styles\" \u002F>\n  \u003CDialog.Content className=\"your-modal-styles\" \u002F>\n\u003C\u002FDialog.Root>\n```\n\n### 3. Composition Over Configuration\n\nBuild complex components from simple primitives:\n\n```tsx\n\u002F\u002F Primitive components compose naturally\n\u003CTabs.Root>\n  \u003CTabs.List>\n    \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n    \u003CTabs.Trigger value=\"tab2\">Tab 2\u003C\u002FTabs.Trigger>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Content value=\"tab1\">Content 1\u003C\u002FTabs.Content>\n  \u003CTabs.Content value=\"tab2\">Content 2\u003C\u002FTabs.Content>\n\u003C\u002FTabs.Root>\n```\n\n---\n\n## Getting Started\n\n### Installation\n\n```bash\n# Install individual primitives (recommended)\nnpm install @radix-ui\u002Freact-dialog @radix-ui\u002Freact-dropdown-menu\n\n# Or install multiple at once\nnpm install @radix-ui\u002Freact-{dialog,dropdown-menu,tabs,tooltip}\n\n# For styling (optional but common)\nnpm install clsx tailwind-merge class-variance-authority\n```\n\n### Basic Component Pattern\n\nEvery Radix component follows this pattern:\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\n\nexport function MyDialog() {\n  return (\n    \u003CDialog.Root>\n      {\u002F* Trigger the dialog *\u002F}\n      \u003CDialog.Trigger asChild>\n        \u003Cbutton className=\"trigger-styles\">Open\u003C\u002Fbutton>\n      \u003C\u002FDialog.Trigger>\n\n      {\u002F* Portal renders outside DOM hierarchy *\u002F}\n      \u003CDialog.Portal>\n        {\u002F* Overlay (backdrop) *\u002F}\n        \u003CDialog.Overlay className=\"overlay-styles\" \u002F>\n        \n        {\u002F* Content (modal) *\u002F}\n        \u003CDialog.Content className=\"content-styles\">\n          \u003CDialog.Title>Title\u003C\u002FDialog.Title>\n          \u003CDialog.Description>Description\u003C\u002FDialog.Description>\n          \n          {\u002F* Your content here *\u002F}\n          \n          \u003CDialog.Close asChild>\n            \u003Cbutton>Close\u003C\u002Fbutton>\n          \u003C\u002FDialog.Close>\n        \u003C\u002FDialog.Content>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n---\n\n## Theming Strategies\n\n### Strategy 1: CSS Variables (Framework-Agnostic)\n\n**Best for**: Maximum portability, SSR-friendly\n\n```css\n\u002F* globals.css *\u002F\n:root {\n  --color-primary: 220 90% 56%;\n  --color-surface: 0 0% 100%;\n  --radius-base: 0.5rem;\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1);\n}\n\n[data-theme=\"dark\"] {\n  --color-primary: 220 90% 66%;\n  --color-surface: 222 47% 11%;\n}\n```\n\n```tsx\n\u002F\u002F Component.tsx\n\u003CDialog.Content \n  className=\"\n    bg-[hsl(var(--color-surface))]\n    rounded-[var(--radius-base)]\n    shadow-[var(--shadow-lg)]\n  \"\n\u002F>\n```\n\n### Strategy 2: Tailwind + CVA (Class Variance Authority)\n\n**Best for**: Tailwind projects, variant-heavy components\n\n```tsx\n\u002F\u002F button.tsx\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@\u002Flib\u002Futils';\n\nconst buttonVariants = cva(\n  \u002F\u002F Base styles\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary\u002F90\",\n        destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive\u002F90\",\n        outline: \"border border-input bg-background hover:bg-accent\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\ninterface ButtonProps extends VariantProps\u003Ctypeof buttonVariants> {\n  children: React.ReactNode;\n}\n\nexport function Button({ variant, size, children }: ButtonProps) {\n  return (\n    \u003Cbutton className={cn(buttonVariants({ variant, size }))}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n}\n```\n\n### Strategy 3: Stitches (CSS-in-JS)\n\n**Best for**: Runtime theming, scoped styles\n\n```tsx\nimport { styled } from '@stitches\u002Freact';\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\n\nconst StyledContent = styled(Dialog.Content, {\n  backgroundColor: '$surface',\n  borderRadius: '$md',\n  padding: '$6',\n  \n  variants: {\n    size: {\n      small: { width: '300px' },\n      medium: { width: '500px' },\n      large: { width: '700px' },\n    },\n  },\n  \n  defaultVariants: {\n    size: 'medium',\n  },\n});\n```\n\n---\n\n## Component Patterns\n\n### Pattern 1: Compound Components with Context\n\n**Use case**: Share state between primitive parts\n\n```tsx\n\u002F\u002F Select.tsx\nimport * as Select from '@radix-ui\u002Freact-select';\nimport { CheckIcon, ChevronDownIcon } from '@radix-ui\u002Freact-icons';\n\nexport function CustomSelect({ items, placeholder, onValueChange }) {\n  return (\n    \u003CSelect.Root onValueChange={onValueChange}>\n      \u003CSelect.Trigger className=\"select-trigger\">\n        \u003CSelect.Value placeholder={placeholder} \u002F>\n        \u003CSelect.Icon>\n          \u003CChevronDownIcon \u002F>\n        \u003C\u002FSelect.Icon>\n      \u003C\u002FSelect.Trigger>\n\n      \u003CSelect.Portal>\n        \u003CSelect.Content className=\"select-content\">\n          \u003CSelect.Viewport>\n            {items.map((item) => (\n              \u003CSelect.Item \n                key={item.value} \n                value={item.value}\n                className=\"select-item\"\n              >\n                \u003CSelect.ItemText>{item.label}\u003C\u002FSelect.ItemText>\n                \u003CSelect.ItemIndicator>\n                  \u003CCheckIcon \u002F>\n                \u003C\u002FSelect.ItemIndicator>\n              \u003C\u002FSelect.Item>\n            ))}\n          \u003C\u002FSelect.Viewport>\n        \u003C\u002FSelect.Content>\n      \u003C\u002FSelect.Portal>\n    \u003C\u002FSelect.Root>\n  );\n}\n```\n\n### Pattern 2: Polymorphic Components with `asChild`\n\n**Use case**: Render as different elements without losing behavior\n\n```tsx\n\u002F\u002F ✅ Render as Next.js Link but keep Radix behavior\n\u003CDialog.Trigger asChild>\n  \u003CLink href=\"\u002Fsettings\">Open Settings\u003C\u002FLink>\n\u003C\u002FDialog.Trigger>\n\n\u002F\u002F ✅ Render as custom component\n\u003CDropdownMenu.Item asChild>\n  \u003CYourCustomButton icon={\u003CIcon \u002F>}>Action\u003C\u002FYourCustomButton>\n\u003C\u002FDropdownMenu.Item>\n```\n\n**Why `asChild` matters**: Prevents nested button\u002Flink issues in accessibility tree.\n\n### Pattern 3: Controlled vs Uncontrolled\n\n```tsx\n\u002F\u002F Uncontrolled (Radix manages state)\n\u003CTabs.Root defaultValue=\"tab1\">\n  \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n\u003C\u002FTabs.Root>\n\n\u002F\u002F Controlled (You manage state)\nconst [activeTab, setActiveTab] = useState('tab1');\n\n\u003CTabs.Root value={activeTab} onValueChange={setActiveTab}>\n  \u003CTabs.Trigger value=\"tab1\">Tab 1\u003C\u002FTabs.Trigger>\n\u003C\u002FTabs.Root>\n```\n\n**Rule**: Use controlled when you need to sync with external state (URL, Redux, etc.).\n\n### Pattern 4: Animation with Framer Motion\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nexport function AnimatedDialog({ open, onOpenChange }) {\n  return (\n    \u003CDialog.Root open={open} onOpenChange={onOpenChange}>\n      \u003CDialog.Portal forceMount>\n        \u003CAnimatePresence>\n          {open && (\n            \u003C>\n              \u003CDialog.Overlay asChild>\n                \u003Cmotion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  className=\"dialog-overlay\"\n                \u002F>\n              \u003C\u002FDialog.Overlay>\n              \n              \u003CDialog.Content asChild>\n                \u003Cmotion.div\n                  initial={{ opacity: 0, scale: 0.95 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.95 }}\n                  className=\"dialog-content\"\n                >\n                  {\u002F* Content *\u002F}\n                \u003C\u002Fmotion.div>\n              \u003C\u002FDialog.Content>\n            \u003C\u002F>\n          )}\n        \u003C\u002FAnimatePresence>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n---\n\n## Common Primitives Reference\n\n### Dialog (Modal)\n\n```tsx\n\u003CDialog.Root> {\u002F* State container *\u002F}\n  \u003CDialog.Trigger \u002F> {\u002F* Opens dialog *\u002F}\n  \u003CDialog.Portal> {\u002F* Renders in portal *\u002F}\n    \u003CDialog.Overlay \u002F> {\u002F* Backdrop *\u002F}\n    \u003CDialog.Content> {\u002F* Modal content *\u002F}\n      \u003CDialog.Title \u002F> {\u002F* Required for a11y *\u002F}\n      \u003CDialog.Description \u002F> {\u002F* Required for a11y *\u002F}\n      \u003CDialog.Close \u002F> {\u002F* Closes dialog *\u002F}\n    \u003C\u002FDialog.Content>\n  \u003C\u002FDialog.Portal>\n\u003C\u002FDialog.Root>\n```\n\n### Dropdown Menu\n\n```tsx\n\u003CDropdownMenu.Root>\n  \u003CDropdownMenu.Trigger \u002F>\n  \u003CDropdownMenu.Portal>\n    \u003CDropdownMenu.Content>\n      \u003CDropdownMenu.Item \u002F>\n      \u003CDropdownMenu.Separator \u002F>\n      \u003CDropdownMenu.CheckboxItem \u002F>\n      \u003CDropdownMenu.RadioGroup>\n        \u003CDropdownMenu.RadioItem \u002F>\n      \u003C\u002FDropdownMenu.RadioGroup>\n      \u003CDropdownMenu.Sub> {\u002F* Nested menus *\u002F}\n        \u003CDropdownMenu.SubTrigger \u002F>\n        \u003CDropdownMenu.SubContent \u002F>\n      \u003C\u002FDropdownMenu.Sub>\n    \u003C\u002FDropdownMenu.Content>\n  \u003C\u002FDropdownMenu.Portal>\n\u003C\u002FDropdownMenu.Root>\n```\n\n### Tabs\n\n```tsx\n\u003CTabs.Root defaultValue=\"tab1\">\n  \u003CTabs.List>\n    \u003CTabs.Trigger value=\"tab1\" \u002F>\n    \u003CTabs.Trigger value=\"tab2\" \u002F>\n  \u003C\u002FTabs.List>\n  \u003CTabs.Content value=\"tab1\" \u002F>\n  \u003CTabs.Content value=\"tab2\" \u002F>\n\u003C\u002FTabs.Root>\n```\n\n### Tooltip\n\n```tsx\n\u003CTooltip.Provider delayDuration={200}>\n  \u003CTooltip.Root>\n    \u003CTooltip.Trigger \u002F>\n    \u003CTooltip.Portal>\n      \u003CTooltip.Content side=\"top\" align=\"center\">\n        Tooltip text\n        \u003CTooltip.Arrow \u002F>\n      \u003C\u002FTooltip.Content>\n    \u003C\u002FTooltip.Portal>\n  \u003C\u002FTooltip.Root>\n\u003C\u002FTooltip.Provider>\n```\n\n### Popover\n\n```tsx\n\u003CPopover.Root>\n  \u003CPopover.Trigger \u002F>\n  \u003CPopover.Portal>\n    \u003CPopover.Content side=\"bottom\" align=\"start\">\n      Content\n      \u003CPopover.Arrow \u002F>\n      \u003CPopover.Close \u002F>\n    \u003C\u002FPopover.Content>\n  \u003C\u002FPopover.Portal>\n\u003C\u002FPopover.Root>\n```\n\n---\n\n## Accessibility Checklist\n\n### Every Component Must Have:\n\n- [ ] **Focus Management**: Visible focus indicators on all interactive elements\n- [ ] **Keyboard Navigation**: Full keyboard support (Tab, Arrows, Enter, Esc)\n- [ ] **ARIA Labels**: Meaningful labels for screen readers\n- [ ] **Color Contrast**: WCAG AA minimum (4.5:1 for text, 3:1 for UI)\n- [ ] **Error States**: Clear error messages with `aria-invalid` and `aria-describedby`\n- [ ] **Loading States**: Proper `aria-busy` during async operations\n\n### Dialog-Specific:\n- [ ] `Dialog.Title` is present (required for screen readers)\n- [ ] `Dialog.Description` provides context\n- [ ] Focus trapped inside modal when open\n- [ ] Escape key closes dialog\n- [ ] Focus returns to trigger on close\n\n### Dropdown-Specific:\n- [ ] Arrow keys navigate items\n- [ ] Type-ahead search works\n- [ ] First\u002Flast item wrapping behavior\n- [ ] Selected state indicated visually and with ARIA\n\n---\n\n## Best Practices\n\n### ✅ Do This\n\n1. **Always use `asChild` to avoid wrapper divs**\n   ```tsx\n   \u003CDialog.Trigger asChild>\n     \u003Cbutton>Open\u003C\u002Fbutton>\n   \u003C\u002FDialog.Trigger>\n   ```\n\n2. **Provide semantic HTML**\n   ```tsx\n   \u003CDialog.Content asChild>\n     \u003Carticle role=\"dialog\" aria-labelledby=\"title\">\n       {\u002F* content *\u002F}\n     \u003C\u002Farticle>\n   \u003C\u002FDialog.Content>\n   ```\n\n3. **Use CSS variables for theming**\n   ```css\n   .dialog-content {\n     background: hsl(var(--surface));\n     color: hsl(var(--on-surface));\n   }\n   ```\n\n4. **Compose primitives for complex components**\n   ```tsx\n   function CommandPalette() {\n     return (\n       \u003CDialog.Root>\n         \u003CDialog.Content>\n           \u003CCombobox \u002F> {\u002F* Radix Combobox inside Dialog *\u002F}\n         \u003C\u002FDialog.Content>\n       \u003C\u002FDialog.Root>\n     );\n   }\n   ```\n\n### ❌ Don't Do This\n\n1. **Don't skip accessibility parts**\n   ```tsx\n   \u002F\u002F ❌ Missing Title and Description\n   \u003CDialog.Content>\n     \u003Cdiv>Content\u003C\u002Fdiv>\n   \u003C\u002FDialog.Content>\n   ```\n\n2. **Don't fight the primitives**\n   ```tsx\n   \u002F\u002F ❌ Overriding internal behavior\n   \u003CDialog.Content onClick={(e) => e.stopPropagation()}>\n   ```\n\n3. **Don't mix controlled and uncontrolled**\n   ```tsx\n   \u002F\u002F ❌ Inconsistent state management\n   \u003CTabs.Root defaultValue=\"tab1\" value={activeTab}>\n   ```\n\n4. **Don't ignore keyboard navigation**\n   ```tsx\n   \u002F\u002F ❌ Disabling keyboard behavior\n   \u003CDropdownMenu.Item onKeyDown={(e) => e.preventDefault()}>\n   ```\n\n---\n\n## Real-World Examples\n\n### Example 1: Command Palette (Combo Dialog)\n\n```tsx\nimport * as Dialog from '@radix-ui\u002Freact-dialog';\nimport { Command } from 'cmdk';\n\nexport function CommandPalette() {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n    document.addEventListener('keydown', down);\n    return () => document.removeEventListener('keydown', down);\n  }, []);\n\n  return (\n    \u003CDialog.Root open={open} onOpenChange={setOpen}>\n      \u003CDialog.Portal>\n        \u003CDialog.Overlay className=\"fixed inset-0 bg-black\u002F50\" \u002F>\n        \u003CDialog.Content className=\"fixed left-1\u002F2 top-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2\">\n          \u003CCommand>\n            \u003CCommand.Input placeholder=\"Type a command...\" \u002F>\n            \u003CCommand.List>\n              \u003CCommand.Empty>No results found.\u003C\u002FCommand.Empty>\n              \u003CCommand.Group heading=\"Suggestions\">\n                \u003CCommand.Item>Calendar\u003C\u002FCommand.Item>\n                \u003CCommand.Item>Search Emoji\u003C\u002FCommand.Item>\n              \u003C\u002FCommand.Group>\n            \u003C\u002FCommand.List>\n          \u003C\u002FCommand>\n        \u003C\u002FDialog.Content>\n      \u003C\u002FDialog.Portal>\n    \u003C\u002FDialog.Root>\n  );\n}\n```\n\n### Example 2: Dropdown Menu with Icons\n\n```tsx\nimport * as DropdownMenu from '@radix-ui\u002Freact-dropdown-menu';\nimport { DotsHorizontalIcon } from '@radix-ui\u002Freact-icons';\n\nexport function ActionsMenu() {\n  return (\n    \u003CDropdownMenu.Root>\n      \u003CDropdownMenu.Trigger asChild>\n        \u003Cbutton className=\"icon-button\" aria-label=\"Actions\">\n          \u003CDotsHorizontalIcon \u002F>\n        \u003C\u002Fbutton>\n      \u003C\u002FDropdownMenu.Trigger>\n\n      \u003CDropdownMenu.Portal>\n        \u003CDropdownMenu.Content className=\"dropdown-content\" align=\"end\">\n          \u003CDropdownMenu.Item className=\"dropdown-item\">\n            Edit\n          \u003C\u002FDropdownMenu.Item>\n          \u003CDropdownMenu.Item className=\"dropdown-item\">\n            Duplicate\n          \u003C\u002FDropdownMenu.Item>\n          \u003CDropdownMenu.Separator className=\"dropdown-separator\" \u002F>\n          \u003CDropdownMenu.Item className=\"dropdown-item text-red-500\">\n            Delete\n          \u003C\u002FDropdownMenu.Item>\n        \u003C\u002FDropdownMenu.Content>\n      \u003C\u002FDropdownMenu.Portal>\n    \u003C\u002FDropdownMenu.Root>\n  );\n}\n```\n\n### Example 3: Form with Radix Select + React Hook Form\n\n```tsx\nimport * as Select from '@radix-ui\u002Freact-select';\nimport { useForm, Controller } from 'react-hook-form';\n\ninterface FormData {\n  country: string;\n}\n\nexport function CountryForm() {\n  const { control, handleSubmit } = useForm\u003CFormData>();\n\n  return (\n    \u003Cform onSubmit={handleSubmit((data) => console.log(data))}>\n      \u003CController\n        name=\"country\"\n        control={control}\n        render={({ field }) => (\n          \u003CSelect.Root onValueChange={field.onChange} value={field.value}>\n            \u003CSelect.Trigger className=\"select-trigger\">\n              \u003CSelect.Value placeholder=\"Select a country\" \u002F>\n              \u003CSelect.Icon \u002F>\n            \u003C\u002FSelect.Trigger>\n            \n            \u003CSelect.Portal>\n              \u003CSelect.Content className=\"select-content\">\n                \u003CSelect.Viewport>\n                  \u003CSelect.Item value=\"us\">United States\u003C\u002FSelect.Item>\n                  \u003CSelect.Item value=\"ca\">Canada\u003C\u002FSelect.Item>\n                  \u003CSelect.Item value=\"uk\">United Kingdom\u003C\u002FSelect.Item>\n                \u003C\u002FSelect.Viewport>\n              \u003C\u002FSelect.Content>\n            \u003C\u002FSelect.Portal>\n          \u003C\u002FSelect.Root>\n        )}\n      \u002F>\n      \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n```\n\n---\n\n## Troubleshooting\n\n### Problem: Dialog doesn't close on Escape key\n\n**Cause**: `onEscapeKeyDown` event prevented or `open` state not synced\n\n**Solution**:\n```tsx\n\u003CDialog.Root open={open} onOpenChange={setOpen}>\n  {\u002F* Don't prevent default on escape *\u002F}\n\u003C\u002FDialog.Root>\n```\n\n### Problem: Dropdown menu positioning is off\n\n**Cause**: Parent container has `overflow: hidden` or transform\n\n**Solution**:\n```tsx\n\u002F\u002F Use Portal to render outside overflow container\n\u003CDropdownMenu.Portal>\n  \u003CDropdownMenu.Content \u002F>\n\u003C\u002FDropdownMenu.Portal>\n```\n\n### Problem: Animations don't work\n\n**Cause**: Portal content unmounts immediately\n\n**Solution**:\n```tsx\n\u002F\u002F Use forceMount + AnimatePresence\n\u003CDialog.Portal forceMount>\n  \u003CAnimatePresence>\n    {open && \u003CDialog.Content \u002F>}\n  \u003C\u002FAnimatePresence>\n\u003C\u002FDialog.Portal>\n```\n\n### Problem: TypeScript errors with `asChild`\n\n**Cause**: Type inference issues with polymorphic components\n\n**Solution**:\n```tsx\n\u002F\u002F Explicitly type your component\n\u003CDialog.Trigger asChild>\n  \u003Cbutton type=\"button\">Open\u003C\u002Fbutton>\n\u003C\u002FDialog.Trigger>\n```\n\n---\n\n## Performance Optimization\n\n### 1. Code Splitting\n\n```tsx\n\u002F\u002F Lazy load heavy primitives\nconst Dialog = lazy(() => import('@radix-ui\u002Freact-dialog'));\nconst DropdownMenu = lazy(() => import('@radix-ui\u002Freact-dropdown-menu'));\n```\n\n### 2. Portal Container Reuse\n\n```tsx\n\u002F\u002F Create portal container once\n\u003CTooltip.Provider>\n  {\u002F* All tooltips share portal container *\u002F}\n  \u003CTooltip.Root>...\u003C\u002FTooltip.Root>\n  \u003CTooltip.Root>...\u003C\u002FTooltip.Root>\n\u003C\u002FTooltip.Provider>\n```\n\n### 3. Memoization\n\n```tsx\n\u002F\u002F Memoize expensive render functions\nconst SelectItems = memo(({ items }) => (\n  items.map((item) => \u003CSelect.Item key={item.value} value={item.value} \u002F>)\n));\n```\n\n---\n\n## Integration with Popular Tools\n\n### shadcn\u002Fui (Built on Radix)\n\nshadcn\u002Fui is a collection of copy-paste components built with Radix + Tailwind.\n\n```bash\nnpx shadcn-ui@latest init\nnpx shadcn-ui@latest add dialog\n```\n\n**When to use shadcn vs raw Radix**:\n- Use shadcn: Quick prototyping, standard designs\n- Use raw Radix: Full customization, unique designs\n\n### Radix Themes (Official Styled System)\n\n```tsx\nimport { Theme, Button, Dialog } from '@radix-ui\u002Fthemes';\n\nfunction App() {\n  return (\n    \u003CTheme accentColor=\"crimson\" grayColor=\"sand\">\n      \u003CButton>Click me\u003C\u002FButton>\n    \u003C\u002FTheme>\n  );\n}\n```\n\n---\n\n## Related Skills\n\n- `@tailwind-design-system` - Tailwind + Radix integration patterns\n- `@react-patterns` - React composition patterns\n- `@frontend-design` - Overall frontend architecture\n- `@accessibility-compliance` - WCAG compliance testing\n\n---\n\n## Resources\n\n### Official Documentation\n- [Radix UI Docs](https:\u002F\u002Fwww.radix-ui.com\u002Fprimitives)\n- [Radix Colors](https:\u002F\u002Fwww.radix-ui.com\u002Fcolors) - Accessible color system\n- [Radix Icons](https:\u002F\u002Fwww.radix-ui.com\u002Ficons) - Icon library\n\n### Community Resources\n- [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com) - Component collection\n- [Radix UI Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F7Xb99uG) - Community support\n- [CVA Documentation](https:\u002F\u002Fcva.style\u002Fdocs) - Variant management\n\n### Examples\n- [Radix Playground](https:\u002F\u002Fwww.radix-ui.com\u002Fprimitives\u002Fdocs\u002Foverview\u002Fintroduction#try-it-out)\n- [shadcn\u002Fui Source](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui) - Production examples\n\n---\n\n## Quick Reference\n\n### Installation\n```bash\nnpm install @radix-ui\u002Freact-{primitive-name}\n```\n\n### Basic Pattern\n```tsx\n\u003CPrimitive.Root>\n  \u003CPrimitive.Trigger \u002F>\n  \u003CPrimitive.Portal>\n    \u003CPrimitive.Content \u002F>\n  \u003C\u002FPrimitive.Portal>\n\u003C\u002FPrimitive.Root>\n```\n\n### Key Props\n- `asChild` - Render as child element\n- `defaultValue` - Uncontrolled default\n- `value` \u002F `onValueChange` - Controlled state\n- `open` \u002F `onOpenChange` - Open state\n- `side` \u002F `align` - Positioning\n\n---\n\n**Remember**: Radix gives you **behavior**, you give it **beauty**. Accessibility is built-in, customization is unlimited.\n",{"name":5,"risk":43,"source":54,"date_added":55,"description":7},"self","2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcursor\u002Fradix-ui-design-system","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill radix-ui-design-system",{"tool":68,"command":69},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill radix-ui-design-system",{"tool":71,"command":72},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill radix-ui-design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002FSKILL.md",true,[76,82,86,92],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"examples\u002Fdialog-example.tsx","OTHER","其他",3617,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002Fexamples\u002Fdialog-example.tsx",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"examples\u002Fdropdown-example.tsx",5762,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002Fexamples\u002Fdropdown-example.tsx",{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"examples\u002FREADME.md","REFERENCE","参考文档",1568,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002Fexamples\u002FREADME.md",{"path":93,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":94,"sourceHtmlUrl":95},"templates\u002Fcomponent-template.tsx.template",4247,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fradix-ui-design-system\u002Ftemplates\u002Fcomponent-template.tsx.template",[97,118,144,154,167,184],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":106,"publishedAt":49},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[103],{"categoryNo":104,"categoryName":105,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000037","律师与法务",[107,108,109,110,111,36,112,113,114,115,116,117],"wechat search","wechat","search","capabilities","openclaw","web search","compliance","web","official","fetch","with",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":49},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[125,126,127,128,129,130,109,131,132,133,134,135,136,137,138,139,140,141,142,143],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":150,"publishedAt":49},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[151,152,125,136,137,138,139,129,109,141,153,142,143,135,133,132,131,140,130,128],"trend radar","radar","pulse",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":49},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[161,162,163,164,165,166],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":176,"publishedAt":49},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[173],{"categoryNo":174,"categoryName":175,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[169,114,177,178,179,117,136,180,181,182,127,183,140],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":190,"publishedAt":49},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[186,191,192,193,140,194,181,195,196,197,198,199],"status","play","go","latest","github","discover","control","cmd","volume"]