DMleadgen
3cb8d3cb3f
- Schema.org JSON-LD templates (product, event, local-business, faq) - Brand, UI, SEO, and decision guide rules - Working code snippets (vendor-card, schema-inject, deploy-webhook) - JSON schemas for project config validation - Client presets (slc-bride, default) - Self-update protocol with changelog tracking Made-with: Cursor
58 lines
1.9 KiB
JSON
58 lines
1.9 KiB
JSON
{
|
|
"_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}"
|
|
}
|
|
}
|