{
  "_meta": {
    "last_updated": "2026-03-06T15:52:00Z",
    "version": "1.0.0",
    "description": "Common UI fixes and patterns for consistent implementation"
  },
  "eventHandling": {
    "description": "Use onClick handlers with proper event typing",
    "pattern": "onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleClick(e)}",
    "avoid": "onClick={handleClick()} or onClick={() => handleClick}"
  },
  "darkMode": {
    "description": "Use CSS variables for dark mode support",
    "pattern": "className=\"bg-background text-foreground dark:bg-background-dark dark:text-foreground-dark\"",
    "cssVariables": [
      "--background",
      "--foreground",
      "--muted",
      "--muted-foreground",
      "--card",
      "--card-foreground"
    ],
    "tailwindConfig": {
      "darkMode": "class"
    }
  },
  "responsiveDesign": {
    "mobileFirst": true,
    "breakpoints": {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px",
      "2xl": "1536px"
    },
    "pattern": "className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3\""
  },
  "accessibility": {
    "description": "Required accessibility attributes",
    "rules": [
      "Always include alt text for images",
      "Use aria-label for icon-only buttons",
      "Ensure color contrast ratio >= 4.5:1",
      "Use semantic HTML elements",
      "Include focus states for interactive elements"
    ]
  },
  "formHandling": {
    "description": "React Hook Form patterns with Zod validation",
    "pattern": "const form = useForm<FormData>({ resolver: zodResolver(formSchema) })",
    "validation": "Use Zod schemas for both client and server validation"
  },
  "loadingStates": {
    "skeleton": "Use Skeleton component from shadcn/ui",
    "spinner": "Use Loader2 icon with animate-spin",
    "disabled": "Disable buttons during async operations: disabled={isSubmitting}"
  }
}