Add comprehensive skills and documentation for various technologies

.claude/skills/frontend/shadcn-ui/SKILL.md

@@ -0,0 +1,87 @@
+# shadcn/ui
+
+## Description
+
+shadcn/ui component library patterns with Radix primitives and Tailwind styling.
+
+## When to Use
+
+- Building React component libraries
+- Accessible UI components
+- Customizable design systems
+
+---
+
+## Core Patterns
+
+### Button Component
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+<Button variant="default">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="destructive">Destructive</Button>
+```
+
+### Form with Validation
+
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Form, FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+const form = useForm({
+  resolver: zodResolver(schema),
+});
+
+<Form {...form}>
+  <FormField
+    control={form.control}
+    name="email"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+        <FormControl>
+          <Input {...field} />
+        </FormControl>
+      </FormItem>
+    )}
+  />
+</Form>
+```
+
+### Dialog
+
+```tsx
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+    </DialogHeader>
+    Content
+  </DialogContent>
+</Dialog>
+```
+
+## Best Practices
+
+1. Use cn() for conditional classes
+2. Compose primitives for custom components
+3. Follow accessibility patterns
+4. Customize via CSS variables
+5. Use asChild for composition
+
+## Common Pitfalls
+
+- **Missing cn import**: Import from lib/utils
+- **Wrong composition**: Use asChild properly
+- **Hardcoded colors**: Use CSS variables

.claude/skills/frontend/tailwind/SKILL.md

@@ -0,0 +1,82 @@
+# Tailwind CSS
+
+## Description
+
+Tailwind CSS utility-first styling with responsive design and component patterns.
+
+## When to Use
+
+- Styling React/Next.js components
+- Responsive design
+- Rapid UI development
+
+---
+
+## Core Patterns
+
+### Layout
+
+```html
+<!-- Flexbox -->
+<div class="flex items-center justify-between gap-4">
+  <div>Left</div>
+  <div>Right</div>
+</div>
+
+<!-- Grid -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  <div>Item</div>
+</div>
+
+<!-- Container -->
+<div class="container mx-auto px-4">
+  Content
+</div>
+```
+
+### Responsive
+
+```html
+<!-- Mobile-first breakpoints -->
+<div class="w-full md:w-1/2 lg:w-1/3">
+  <!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px -->
+</div>
+
+<h1 class="text-xl md:text-2xl lg:text-4xl">
+  Responsive text
+</h1>
+```
+
+### States
+
+```html
+<button class="
+  bg-blue-500 hover:bg-blue-600
+  focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+  disabled:opacity-50 disabled:cursor-not-allowed
+">
+  Button
+</button>
+```
+
+### Dark Mode
+
+```html
+<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+## Best Practices
+
+1. Use consistent spacing scale
+2. Mobile-first design
+3. Extract repeated patterns to components
+4. Use @apply sparingly
+5. Leverage dark mode utilities
+
+## Common Pitfalls
+
+- **Too many classes**: Extract to components
+- **Inconsistent spacing**: Stick to scale
+- **Missing responsive**: Test all breakpoints