{"owner":"typescript-cheatsheets","repo":"react","hasSkills":true,"totalSkillsCount":1,"totalTokensCount":457,"categories":["cursor-rule"],"hasMcp":false,"mcpConfig":null,"found":[".cursorrules (react.mdc)"],"skills":{".cursorrules (react.mdc)":"---\ndescription: \"React best practices and patterns for modern web applications\"\nglobs: **/*.tsx, **/*.jsx, components/**/*\nalwaysApply: false\n---\n# React Best Practices\n\n## Component Structure\n- Use functional components over class components\n- Keep components small and focused\n- Extract reusable logic into custom hooks\n- Use composition over inheritance\n- Implement proper prop types with TypeScript\n- Split large components into smaller, focused ones\n\n## Hooks\n- Follow the Rules of Hooks\n- Use custom hooks for reusable logic\n- Keep hooks focused and simple\n- Use appropriate dependency arrays in useEffect\n- Implement cleanup in useEffect when needed\n- Avoid nested hooks\n\n## State Management\n- Use useState for local component state\n- Implement useReducer for complex state logic\n- Use Context API for shared state\n- Keep state as close to where it's used as possible\n- Avoid prop drilling through proper state management\n- Use state management libraries only when necessary\n\n## Performance\n- Implement proper memoization (useMemo, useCallback)\n- Use React.memo for expensive components\n- Avoid unnecessary re-renders\n- Implement proper lazy loading\n- Use proper key props in lists\n- Profile and optimize render performance\n\n## Forms\n- Use controlled components for form inputs\n- Implement proper form validation\n- Handle form submission states properly\n- Show appropriate loading and error states\n- Use form libraries for complex forms\n- Implement proper accessibility for forms\n\n## Error Handling\n- Implement Error Boundaries\n- Handle async errors properly\n- Show user-friendly error messages\n- Implement proper fallback UI\n- Log errors appropriately\n- Handle edge cases gracefully\n\n## Testing\n- Write unit tests for components\n- Implement integration tests for complex flows\n- Use React Testing Library\n- Test user interactions\n- Test error scenarios\n- Implement proper mock data\n\n## Accessibility\n- Use semantic HTML elements\n- Implement proper ARIA attributes\n- Ensure keyboard navigation\n- Test with screen readers\n- Handle focus management\n- Provide proper alt text for images\n\n## Code Organization\n- Group related components together\n- Use proper file naming conventions\n- Implement proper directory structure\n- Keep styles close to components\n- Use proper imports/exports\n- Document complex component logic\n"},"files":{".cursorrules (react.mdc)":"---\ndescription: \"React best practices and patterns for modern web applications\"\nglobs: **/*.tsx, **/*.jsx, components/**/*\nalwaysApply: false\n---\n# React Best Practices\n\n## Component Structure\n- Use functional components over class components\n- Keep components small and focused\n- Extract reusable logic into custom hooks\n- Use composition over inheritance\n- Implement proper prop types with TypeScript\n- Split large components into smaller, focused ones\n\n## Hooks\n- Follow the Rules of Hooks\n- Use custom hooks for reusable logic\n- Keep hooks focused and simple\n- Use appropriate dependency arrays in useEffect\n- Implement cleanup in useEffect when needed\n- Avoid nested hooks\n\n## State Management\n- Use useState for local component state\n- Implement useReducer for complex state logic\n- Use Context API for shared state\n- Keep state as close to where it's used as possible\n- Avoid prop drilling through proper state management\n- Use state management libraries only when necessary\n\n## Performance\n- Implement proper memoization (useMemo, useCallback)\n- Use React.memo for expensive components\n- Avoid unnecessary re-renders\n- Implement proper lazy loading\n- Use proper key props in lists\n- Profile and optimize render performance\n\n## Forms\n- Use controlled components for form inputs\n- Implement proper form validation\n- Handle form submission states properly\n- Show appropriate loading and error states\n- Use form libraries for complex forms\n- Implement proper accessibility for forms\n\n## Error Handling\n- Implement Error Boundaries\n- Handle async errors properly\n- Show user-friendly error messages\n- Implement proper fallback UI\n- Log errors appropriately\n- Handle edge cases gracefully\n\n## Testing\n- Write unit tests for components\n- Implement integration tests for complex flows\n- Use React Testing Library\n- Test user interactions\n- Test error scenarios\n- Implement proper mock data\n\n## Accessibility\n- Use semantic HTML elements\n- Implement proper ARIA attributes\n- Ensure keyboard navigation\n- Test with screen readers\n- Handle focus management\n- Provide proper alt text for images\n\n## Code Organization\n- Group related components together\n- Use proper file naming conventions\n- Implement proper directory structure\n- Keep styles close to components\n- Use proper imports/exports\n- Document complex component logic\n"},"items":[{"name":".cursorrules","path":".cursorrules (react.mdc)","rawUrl":"https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/main/rules/react.mdc","title":"Awesome Cursorrules: react","category":"cursor-rule","format":"markdown","content":"---\ndescription: \"React best practices and patterns for modern web applications\"\nglobs: **/*.tsx, **/*.jsx, components/**/*\nalwaysApply: false\n---\n# React Best Practices\n\n## Component Structure\n- Use functional components over class components\n- Keep components small and focused\n- Extract reusable logic into custom hooks\n- Use composition over inheritance\n- Implement proper prop types with TypeScript\n- Split large components into smaller, focused ones\n\n## Hooks\n- Follow the Rules of Hooks\n- Use custom hooks for reusable logic\n- Keep hooks focused and simple\n- Use appropriate dependency arrays in useEffect\n- Implement cleanup in useEffect when needed\n- Avoid nested hooks\n\n## State Management\n- Use useState for local component state\n- Implement useReducer for complex state logic\n- Use Context API for shared state\n- Keep state as close to where it's used as possible\n- Avoid prop drilling through proper state management\n- Use state management libraries only when necessary\n\n## Performance\n- Implement proper memoization (useMemo, useCallback)\n- Use React.memo for expensive components\n- Avoid unnecessary re-renders\n- Implement proper lazy loading\n- Use proper key props in lists\n- Profile and optimize render performance\n\n## Forms\n- Use controlled components for form inputs\n- Implement proper form validation\n- Handle form submission states properly\n- Show appropriate loading and error states\n- Use form libraries for complex forms\n- Implement proper accessibility for forms\n\n## Error Handling\n- Implement Error Boundaries\n- Handle async errors properly\n- Show user-friendly error messages\n- Implement proper fallback UI\n- Log errors appropriately\n- Handle edge cases gracefully\n\n## Testing\n- Write unit tests for components\n- Implement integration tests for complex flows\n- Use React Testing Library\n- Test user interactions\n- Test error scenarios\n- Implement proper mock data\n\n## Accessibility\n- Use semantic HTML elements\n- Implement proper ARIA attributes\n- Ensure keyboard navigation\n- Test with screen readers\n- Handle focus management\n- Provide proper alt text for images\n\n## Code Organization\n- Group related components together\n- Use proper file naming conventions\n- Implement proper directory structure\n- Keep styles close to components\n- Use proper imports/exports\n- Document complex component logic\n","tokens":457,"sizeBytes":2324}],"systemPromptSnippet":"<yakaai_skills repo=\"typescript-cheatsheets/react\">\n<!-- File: .cursorrules (react.mdc) (Tokens: ~457 | Category: cursor-rule) -->\n---\ndescription: \"React best practices and patterns for modern web applications\"\nglobs: **/*.tsx, **/*.jsx, components/**/*\nalwaysApply: false\n---\n# React Best Practices\n\n## Component Structure\n- Use functional components over class components\n- Keep components small and focused\n- Extract reusable logic into custom hooks\n- Use composition over inheritance\n- Implement proper prop types with TypeScript\n- Split large components into smaller, focused ones\n\n## Hooks\n- Follow the Rules of Hooks\n- Use custom hooks for reusable logic\n- Keep hooks focused and simple\n- Use appropriate dependency arrays in useEffect\n- Implement cleanup in useEffect when needed\n- Avoid nested hooks\n\n## State Management\n- Use useState for local component state\n- Implement useReducer for complex state logic\n- Use Context API for shared state\n- Keep state as close to where it's used as possible\n- Avoid prop drilling through proper state management\n- Use state management libraries only when necessary\n\n## Performance\n- Implement proper memoization (useMemo, useCallback)\n- Use React.memo for expensive components\n- Avoid unnecessary re-renders\n- Implement proper lazy loading\n- Use proper key props in lists\n- Profile and optimize render performance\n\n## Forms\n- Use controlled components for form inputs\n- Implement proper form validation\n- Handle form submission states properly\n- Show appropriate loading and error states\n- Use form libraries for complex forms\n- Implement proper accessibility for forms\n\n## Error Handling\n- Implement Error Boundaries\n- Handle async errors properly\n- Show user-friendly error messages\n- Implement proper fallback UI\n- Log errors appropriately\n- Handle edge cases gracefully\n\n## Testing\n- Write unit tests for components\n- Implement integration tests for complex flows\n- Use React Testing Library\n- Test user interactions\n- Test error scenarios\n- Implement proper mock data\n\n## Accessibility\n- Use semantic HTML elements\n- Implement proper ARIA attributes\n- Ensure keyboard navigation\n- Test with screen readers\n- Handle focus management\n- Provide proper alt text for images\n\n## Code Organization\n- Group related components together\n- Use proper file naming conventions\n- Implement proper directory structure\n- Keep styles close to components\n- Use proper imports/exports\n- Document complex component logic\n</yakaai_skills>"}