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

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>
+  );
+}