React (.cursorrules)

{
    "prompt": "# React Best Practices ## Component Structure - Use functional components over class components - Keep components small and focused - Extract reusable logic into custom hooks - Use composition over inheritance - Implement proper prop types with TypeScript - Split large components into smaller, focused ones ## Hooks - - Use custom hooks for reusable logic - Keep hooks focused and simple - Use appropriate dependency arrays in useEffect - Implement cleanup in useEffect when needed - Avoid nested hooks ## State Management - Use useState for local component state - Implement useReducer for complex state logic - Use Context API for shared state - Keep state as close to where it's used as possible - Avoid prop drilling through proper state management - Use state management libraries only when necessary ## Performance - Implement proper memoization (useMemo, useCallback) - Use for expensive components - Avoid unnecessary re-renders - Implement proper lazy loading - Use proper key props in lists - Profile and optimize render performance ## Forms - Use controlled components for form inputs - Implement proper form validation - Handle form submission states properly - Show appropriate loading and error states - Use form libraries for complex forms - Implement proper accessibility for forms ## Error Handling - Implement Error Boundaries - Handle async errors properly - Show user-friendly error messages - Implement proper fallback UI - Log errors appropriately - Handle edge cases gracefully ## Testing - Write unit tests for components - Implement integration tests for complex flows - Use React Testing Library - Test user interactions - Test error scenarios - Implement proper mock data ## Accessibility - Use semantic HTML elements - Implement proper ARIA attributes - Ensure keyboard navigation - Test with screen readers - Handle focus management - Provide proper alt text for images ## Code Organization - Group related components together - Use proper file naming conventions - Implement proper directory structure - Keep styles close to components - Use proper imports/exports - Document complex component logic",
    "model": "Claude 3.7 Sonnet / Cursor",
    "aspect_ratio": "1:1",
    "category": "Coding Agents",
    "content_type": "coding_prompt",
    "surface": "agents_hub",
    "quality_score": 81,
    "provenance": "SYSTEM_RULE"
}