feat: introduce Radix UI design system skill with a component template and examples.

skills/radix-ui-design-system/examples/README.md

@@ -0,0 +1,63 @@
+# Radix UI Design System - Skill Examples
+
+This folder contains practical examples demonstrating how to use Radix UI primitives to build accessible, customizable components.
+
+## Examples
+
+### `dialog-example.tsx`
+
+Demonstrates Dialog (Modal) component patterns:
+- **BasicDialog**: Standard modal with form
+- **ControlledDialog**: Externally controlled modal state
+
+**Key Concepts**:
+- Portal rendering outside DOM hierarchy
+- Overlay (backdrop) handling
+- Accessibility requirements (Title, Description)
+- Custom styling with CSS
+
+### `dropdown-example.tsx`
+
+Complete dropdown menu implementation:
+- **CompleteDropdown**: Full-featured menu with all Radix primitives
+  - Regular items
+  - Separators and labels
+  - Checkbox items
+  - Radio groups
+  - Sub-menus
+- **ActionsMenu**: Simple actions menu for data tables/cards
+
+**Key Concepts**:
+- Compound component architecture
+- Keyboard navigation
+- Item indicators (checkboxes, radio buttons)
+- Nested sub-menus
+
+## Usage
+
+```tsx
+import { BasicDialog } from './examples/dialog-example';
+import { CompleteDropdown } from './examples/dropdown-example';
+
+function App() {
+  return (
+    <>
+      <BasicDialog />
+      <CompleteDropdown />
+    </>
+  );
+}
+```
+
+## Styling
+
+These examples use CSS classes. You can:
+1. Copy the CSS from each file
+2. Replace with Tailwind classes
+3. Use CSS-in-JS (Stitches, Emotion, etc.)
+
+## Learn More
+
+- [Main SKILL.md](../SKILL.md) - Complete guide
+- [Component Template](../templates/component-template.tsx) - Boilerplate
+- [Radix UI Docs](https://www.radix-ui.com/primitives)

skills/radix-ui-design-system/examples/dialog-example.tsx

@@ -0,0 +1,128 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import './dialog.css';
+
+/**
+ * Example: Basic Dialog Component
+ * 
+ * Demonstrates:
+ * - Compound component pattern
+ * - Portal rendering
+ * - Accessibility features (Title, Description)
+ * - Custom styling with CSS
+ */
+export function BasicDialog() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className="button-primary">
+          Open Dialog
+        </button>
+      </Dialog.Trigger>
+
+      <Dialog.Portal>
+        {/* Overlay (backdrop) */}
+        <Dialog.Overlay className="dialog-overlay" />
+        
+        {/* Content (modal) */}
+        <Dialog.Content className="dialog-content">
+          {/* Title - Required for accessibility */}
+          <Dialog.Title className="dialog-title">
+            Edit Profile
+          </Dialog.Title>
+
+          {/* Description - Recommended for accessibility */}
+          <Dialog.Description className="dialog-description">
+            Make changes to your profile here. Click save when you're done.
+          </Dialog.Description>
+
+          {/* Form Content */}
+          <form className="dialog-form">
+            <fieldset className="fieldset">
+              <label className="label" htmlFor="name">
+                Name
+              </label>
+              <input
+                className="input"
+                id="name"
+                defaultValue="John Doe"
+              />
+            </fieldset>
+
+            <fieldset className="fieldset">
+              <label className="label" htmlFor="email">
+                Email
+              </label>
+              <input
+                className="input"
+                id="email"
+                type="email"
+                defaultValue="john@example.com"
+              />
+            </fieldset>
+
+            <div className="dialog-actions">
+              <Dialog.Close asChild>
+                <button className="button-secondary" type="button">
+                  Cancel
+                </button>
+              </Dialog.Close>
+              <button className="button-primary" type="submit">
+                Save Changes
+              </button>
+            </div>
+          </form>
+
+          {/* Close button */}
+          <Dialog.Close asChild>
+            <button className="icon-button" aria-label="Close">
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+/**
+ * Example: Controlled Dialog
+ * 
+ * Use when you need to:
+ * - Sync dialog state with external state
+ * - Programmatically open/close dialog
+ * - Track dialog open state
+ */
+export function ControlledDialog() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSave = () => {
+    // Your save logic here
+    console.log('Saving...');
+    setOpen(false); // Close after save
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <button className="button-primary">
+          Open Controlled Dialog
+        </button>
+      </Dialog.Trigger>
+
+      <Dialog.Portal>
+        <Dialog.Overlay className="dialog-overlay" />
+        <Dialog.Content className="dialog-content">
+          <Dialog.Title>Controlled Dialog</Dialog.Title>
+          <Dialog.Description>
+            This dialog's state is managed externally.
+          </Dialog.Description>
+
+          <p>Dialog is {open ? 'open' : 'closed'}</p>
+
+          <button onClick={handleSave}>Save and Close</button>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

skills/radix-ui-design-system/examples/dropdown-example.tsx

@@ -0,0 +1,162 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import {
+  HamburgerMenuIcon,
+  DotFilledIcon,
+  CheckIcon,
+  ChevronRightIcon,
+} from '@radix-ui/react-icons';
+import './dropdown.css';
+
+/**
+ * Example: Complete Dropdown Menu
+ * 
+ * Features:
+ * - Items, separators, labels
+ * - Checkbox items
+ * - Radio group items
+ * - Sub-menus
+ * - Keyboard navigation
+ */
+export function CompleteDropdown() {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
+  const [urlsChecked, setUrlsChecked] = React.useState(false);
+  const [person, setPerson] = React.useState('pedro');
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="icon-button" aria-label="Customise options">
+          <HamburgerMenuIcon />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="dropdown-content" sideOffset={5}>
+          {/* Regular items */}
+          <DropdownMenu.Item className="dropdown-item">
+            New Tab <div className="right-slot">⌘+T</div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="dropdown-item">
+            New Window <div className="right-slot">⌘+N</div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="dropdown-item" disabled>
+            New Private Window <div className="right-slot">⇧+⌘+N</div>
+          </DropdownMenu.Item>
+
+          {/* Sub-menu */}
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger className="dropdown-subtrigger">
+              More Tools
+              <div className="right-slot">
+                <ChevronRightIcon />
+              </div>
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.SubContent
+                className="dropdown-subcontent"
+                sideOffset={2}
+                alignOffset={-5}
+              >
+                <DropdownMenu.Item className="dropdown-item">
+                  Save Page As… <div className="right-slot">⌘+S</div>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item className="dropdown-item">
+                  Create Shortcut…
+                </DropdownMenu.Item>
+                <DropdownMenu.Item className="dropdown-item">
+                  Name Window…
+                </DropdownMenu.Item>
+                <DropdownMenu.Separator className="dropdown-separator" />
+                <DropdownMenu.Item className="dropdown-item">
+                  Developer Tools
+                </DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Sub>
+
+          <DropdownMenu.Separator className="dropdown-separator" />
+
+          {/* Checkbox items */}
+          <DropdownMenu.CheckboxItem
+            className="dropdown-checkbox-item"
+            checked={bookmarksChecked}
+            onCheckedChange={setBookmarksChecked}
+          >
+            <DropdownMenu.ItemIndicator className="dropdown-item-indicator">
+              <CheckIcon />
+            </DropdownMenu.ItemIndicator>
+            Show Bookmarks <div className="right-slot">⌘+B</div>
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            className="dropdown-checkbox-item"
+            checked={urlsChecked}
+            onCheckedChange={setUrlsChecked}
+          >
+            <DropdownMenu.ItemIndicator className="dropdown-item-indicator">
+              <CheckIcon />
+            </DropdownMenu.ItemIndicator>
+            Show Full URLs
+          </DropdownMenu.CheckboxItem>
+
+          <DropdownMenu.Separator className="dropdown-separator" />
+
+          {/* Radio group */}
+          <DropdownMenu.Label className="dropdown-label">
+            People
+          </DropdownMenu.Label>
+          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
+            <DropdownMenu.RadioItem className="dropdown-radio-item" value="pedro">
+              <DropdownMenu.ItemIndicator className="dropdown-item-indicator">
+                <DotFilledIcon />
+              </DropdownMenu.ItemIndicator>
+              Pedro Duarte
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem className="dropdown-radio-item" value="colm">
+              <DropdownMenu.ItemIndicator className="dropdown-item-indicator">
+                <DotFilledIcon />
+              </DropdownMenu.ItemIndicator>
+              Colm Tuite
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+
+          <DropdownMenu.Arrow className="dropdown-arrow" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
+
+/**
+ * Example: Simple Actions Menu
+ * 
+ * Common use case for data tables, cards, etc.
+ */
+export function ActionsMenu({ onEdit, onDuplicate, onDelete }) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="icon-button" aria-label="Actions">
+          <DotsHorizontalIcon />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="dropdown-content" align="end">
+          <DropdownMenu.Item className="dropdown-item" onSelect={onEdit}>
+            Edit
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className="dropdown-item" onSelect={onDuplicate}>
+            Duplicate
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className="dropdown-separator" />
+          <DropdownMenu.Item
+            className="dropdown-item dropdown-item-danger"
+            onSelect={onDelete}
+          >
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}