omgkit 2.1.1 → 2.3.0

package/plugin/skills/frontend/responsive/SKILL.md

@@ -1,46 +1,149 @@
 ---
-name: responsive
-description: Responsive design. Use for mobile-first, adaptive layouts.
+name: building-responsive-layouts
+description: Claude builds responsive web layouts with mobile-first CSS, fluid typography, and container queries. Use when creating adaptive UIs that work across all device sizes.
 ---
 
-# Responsive Design Skill
+# Building Responsive Layouts
 
-## Breakpoints
-```css
-/* Mobile first */
-.element { /* Mobile styles */ }
+## Quick Start
+
+```tsx
+// Responsive grid with auto-fit
+export function ResponsiveGrid({ children, minWidth = '300px' }: GridProps) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`,
+      gap: '1.5rem'
+    }}>
+      {children}
+    </div>
+  );
+}
 
-@media (min-width: 640px) { /* sm */ }
-@media (min-width: 768px) { /* md */ }
-@media (min-width: 1024px) { /* lg */ }
-@media (min-width: 1280px) { /* xl */ }
+// With Tailwind
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+  {items.map(item => <Card key={item.id} {...item} />)}
+</div>
 ```
 
-## Patterns
+## Features
 
-### Fluid Typography
-```css
-font-size: clamp(1rem, 2.5vw, 2rem);
-```
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Mobile-First Breakpoints | sm(640), md(768), lg(1024), xl(1280), 2xl(1536) | `ref/breakpoints.md` |
+| Fluid Typography | `clamp()` for responsive font sizes | `ref/fluid-type.md` |
+| Container Queries | Component-level responsive design | `ref/container-queries.md` |
+| Responsive Images | srcset, sizes, and art direction | `ref/images.md` |
+| Touch-Friendly | 44px minimum targets, hover vs touch handling | `ref/touch.md` |
+| Safe Areas | Handle notched devices and dynamic viewports | `ref/safe-areas.md` |
 
-### Responsive Grid
-```css
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1rem;
+## Common Patterns
+
+### useMediaQuery Hook
+
+```tsx
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
 }
+
+// Usage
+const isMobile = useMediaQuery('(max-width: 639px)');
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 ```
 
-### Container Queries
+### Container Query Component
+
 ```css
+.card-container {
+  container-type: inline-size;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+}
+
 @container (min-width: 400px) {
-  .card { flex-direction: row; }
+  .card {
+    flex-direction: row;
+    gap: 1rem;
+  }
+  .card-image { width: 40%; }
+}
+```
+
+```tsx
+export function ResponsiveCard({ image, title, content }: CardProps) {
+  return (
+    <div className="card-container">
+      <article className="card">
+        <img src={image} alt="" className="card-image" />
+        <div className="card-content">
+          <h3>{title}</h3>
+          <p>{content}</p>
+        </div>
+      </article>
+    </div>
+  );
+}
+```
+
+### Responsive Navigation
+
+```tsx
+export function ResponsiveNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <nav className="relative">
+      <div className="flex justify-between items-center h-16 px-4">
+        <Logo />
+        {/* Desktop nav */}
+        <div className="hidden md:flex items-center space-x-8">
+          <NavLink href="/">Home</NavLink>
+          <NavLink href="/about">About</NavLink>
+        </div>
+        {/* Mobile menu button */}
+        <button
+          className="md:hidden p-2 min-h-[44px] min-w-[44px]"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+        >
+          <span className="sr-only">{isOpen ? 'Close' : 'Open'} menu</span>
+          {isOpen ? <XIcon /> : <MenuIcon />}
+        </button>
+      </div>
+      {/* Mobile nav */}
+      {isOpen && (
+        <div className="md:hidden px-2 pb-3 space-y-1">
+          <MobileNavLink href="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
+          <MobileNavLink href="/about" onClick={() => setIsOpen(false)}>About</MobileNavLink>
+        </div>
+      )}
+    </nav>
+  );
 }
 ```
 
 ## Best Practices
-- Mobile-first approach
-- Use relative units
-- Test on real devices
-- Consider touch targets (44px min)
+
+| Do | Avoid |
+|----|-------|
+| Start with mobile-first CSS | Hiding essential content on mobile |
+| Use relative units (rem, %, vw) | Fixed pixel widths |
+| Test on real devices | Relying only on hover states |
+| Use 44px minimum touch targets | Small touch targets on mobile |
+| Consider reduced motion preferences | Ignoring landscape orientation |
+| Use CSS logical properties (inline, block) | Device-specific breakpoints |
+| Handle safe-area-inset for notched devices | Assuming mouse input |

package/plugin/skills/frontend/shadcn-ui/SKILL.md

@@ -1,58 +1,148 @@
 ---
-name: shadcn-ui
-description: shadcn/ui components. Use for pre-built accessible React components.
+name: building-with-shadcn
+description: Claude builds accessible React UIs using shadcn/ui components with Radix primitives and React Hook Form integration. Use when creating forms, dialogs, or composable UI systems.
 ---
 
-# shadcn/ui Skill
+# Building with shadcn/ui
+
+## Quick Start
 
-## Installation
 ```bash
+# Initialize and add components
 npx shadcn-ui@latest init
-npx shadcn-ui@latest add button
+npx shadcn-ui@latest add button card form input dialog
+```
+
+```tsx
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function Example() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent className="flex gap-4">
+        <Button>Primary</Button>
+        <Button variant="outline">Outline</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Button Variants | default, secondary, destructive, outline, ghost, link | `ref/button.md` |
+| Form Integration | React Hook Form + Zod validation pattern | `ref/forms.md` |
+| Dialog/Sheet | Modal dialogs and slide-out panels | `ref/dialogs.md` |
+| Data Display | Table, Tabs, Accordion components | `ref/data-display.md` |
+| Navigation | DropdownMenu, Command palette, NavigationMenu | `ref/navigation.md` |
+| Feedback | Toast notifications with useToast hook | `ref/toast.md` |
+
+## Common Patterns
+
+### Form with Validation
+
+```tsx
+const formSchema = z.object({
+  email: z.string().email("Invalid email"),
+  name: z.string().min(2, "Name must be at least 2 characters"),
+});
+
+export function ProfileForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: "", name: "" },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl><Input {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <FormField control={form.control} name="name" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl><Input {...field} /></FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? "Saving..." : "Save"}
+        </Button>
+      </form>
+    </Form>
+  );
+}
 ```
 
-## Usage
+### Dialog with Form
+
 ```tsx
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-
-<Button variant="default">Click me</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Title</CardTitle>
-  </CardHeader>
-  <CardContent>
-    Content here
-  </CardContent>
-</Card>
+export function EditDialog({ onSave }: { onSave: (data: Data) => void }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>Update your profile information.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">Name</Label>
+            <Input id="name" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+          <Button onClick={() => onSave(data)}>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
 ```
 
-## Form Pattern
+### Toast Notifications
+
 ```tsx
-import { useForm } from "react-hook-form"
-import { Form, FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-
-<Form {...form}>
-  <FormField
-    control={form.control}
-    name="email"
-    render={({ field }) => (
-      <FormItem>
-        <FormLabel>Email</FormLabel>
-        <FormControl>
-          <Input {...field} />
-        </FormControl>
-      </FormItem>
-    )}
-  />
-</Form>
+import { useToast } from "@/components/ui/use-toast";
+
+export function SaveButton() {
+  const { toast } = useToast();
+
+  const handleSave = async () => {
+    try {
+      await saveData();
+      toast({ title: "Success", description: "Changes saved." });
+    } catch {
+      toast({ variant: "destructive", title: "Error", description: "Failed to save." });
+    }
+  };
+
+  return <Button onClick={handleSave}>Save</Button>;
+}
 ```
 
 ## Best Practices
-- Customize via CSS variables
-- Use with React Hook Form
-- Extend components as needed
+
+| Do | Avoid |
+|----|-------|
+| Install only components you need | Modifying generated component files directly |
+| Use `cn()` utility for class merging | Skipping form validation |
+| Extend components with composition | Overriding styles without good reason |
+| Follow React Hook Form patterns | Using inline styles |
+| Use TypeScript for type safety | Skipping loading and error states |
+| Test component accessibility | Ignoring keyboard navigation |

package/plugin/skills/frontend/tailwindcss/SKILL.md

@@ -1,52 +1,120 @@
 ---
-name: tailwindcss
-description: Tailwind CSS styling. Use when styling with utility classes.
+name: styling-with-tailwind
+description: Claude styles UIs with Tailwind CSS utility classes, responsive design, and dark mode support. Use when creating component styles, theming systems, or responsive layouts.
 ---
 
-# Tailwind CSS Skill
+# Styling with Tailwind CSS
 
-## Core Utilities
-```html
-<!-- Spacing -->
-<div class="p-4 m-2 space-y-4">
+## Quick Start
 
-<!-- Flexbox -->
-<div class="flex items-center justify-between gap-4">
+```tsx
+// Button with variants using utility classes
+export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) {
+  const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50';
+  const variants = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
+    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
+    ghost: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
+  };
+  const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' };
 
-<!-- Grid -->
-<div class="grid grid-cols-3 gap-4">
-
-<!-- Typography -->
-<p class="text-lg font-bold text-gray-900">
+  return (
+    <button className={`${base} ${variants[variant]} ${sizes[size]}`}>
+      {children}
+    </button>
+  );
+}
 ```
 
-## Responsive
-```html
-<div class="text-sm md:text-base lg:text-lg">
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Configuration | Extend colors, fonts, spacing, animations | `ref/config.md` |
+| Responsive Design | Mobile-first breakpoints: sm, md, lg, xl, 2xl | `ref/responsive.md` |
+| Dark Mode | Class-based dark mode with `dark:` prefix | `ref/dark-mode.md` |
+| Custom Animations | Define keyframes and animation utilities | `ref/animations.md` |
+| CSS Variables | Theme with CSS custom properties | `ref/theming.md` |
+| Plugins | @tailwindcss/forms, typography, container-queries | `ref/plugins.md` |
+
+## Common Patterns
+
+### Responsive Card Grid
+
+```tsx
+export function CardGrid({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+      {children}
+    </div>
+  );
+}
+
+export function Card({ children, hoverable }: { children: React.ReactNode; hoverable?: boolean }) {
+  return (
+    <div className={cn(
+      'bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6',
+      hoverable && 'hover:shadow-lg hover:-translate-y-1 transition-all duration-200'
+    )}>
+      {children}
+    </div>
+  );
+}
 ```
 
-## Component Pattern
-```html
-<button class="
-  px-4 py-2
-  bg-blue-500 hover:bg-blue-600
-  text-white font-medium
-  rounded-lg
-  transition-colors
-  focus:outline-none focus:ring-2 focus:ring-blue-500
-">
-  Click me
-</button>
+### Dark Mode Toggle
+
+```tsx
+export function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const dark = localStorage.theme === 'dark' ||
+      (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    setIsDark(dark);
+    document.documentElement.classList.toggle('dark', dark);
+  }, []);
+
+  const toggle = () => {
+    setIsDark(!isDark);
+    document.documentElement.classList.toggle('dark', !isDark);
+    localStorage.theme = !isDark ? 'dark' : 'light';
+  };
+
+  return (
+    <button onClick={toggle} className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800">
+      {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+    </button>
+  );
+}
 ```
 
-## Dark Mode
-```html
-<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
+### Conditional Classes with cn()
+
+```tsx
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Usage
+<div className={cn(
+  'px-4 py-2 rounded-lg',
+  isActive && 'bg-blue-500 text-white',
+  isDisabled && 'opacity-50 cursor-not-allowed',
+  className
+)} />
 ```
 
 ## Best Practices
-- Use consistent spacing
-- Mobile-first responsive
-- Extract common patterns
-- Use @apply sparingly
+
+| Do | Avoid |
+|----|-------|
+| Use mobile-first responsive design | Overusing @apply (prefer utilities) |
+| Leverage `cn()` for conditional classes | Hardcoding colors outside theme |
+| Configure content paths for purging | Using arbitrary values excessively |
+| Use CSS variables for theming | Mixing styling paradigms |
+| Group related utilities semantically | Skipping dark mode variants |
+| Use consistent spacing scales | Ignoring responsive testing |