claude-git-hooks/templates/presets/frontend/PRE_COMMIT_GUIDELINES.md

Git hooks with Claude CLI for code analysis and automatic commit messages

# Frontend Code Quality Guidelines

## React Standards

### Components
- Use functional components with hooks
- Keep components small and focused (< 200 lines)
- Extract reusable logic into custom hooks
- Use proper prop types or TypeScript
- Avoid deep nesting (max 3-4 levels)

### Hooks
- Follow Rules of Hooks (top level, not in loops/conditions)
- Provide complete dependency arrays in useEffect
- Use useCallback for functions passed to child components
- Use useMemo for expensive calculations
- Clean up effects (return cleanup function)

### State Management
- Keep state as local as possible
- Use Redux only for truly global state
- Follow Redux best practices (immutable updates)
- Use Redux Saga for side effects
- Normalize state shape

### Performance
- Use React.memo for expensive components
- Lazy load routes and heavy components
- Optimize images and assets
- Avoid inline function definitions in JSX
- Use virtualization for long lists

## Security Requirements

### XSS Prevention
- Never use `dangerouslySetInnerHTML` without sanitization
- Validate and sanitize user input
- Be careful with URL parameters
- Escape user-generated content

### Authentication
- Store tokens securely (httpOnly cookies preferred)
- Never log sensitive data
- Implement proper session timeout
- Clear sensitive data on logout

### API Security
- Never expose API keys in client code
- Use environment variables for configuration
- Validate API responses
- Handle errors without exposing internals

## Accessibility (a11y)

### Must Have
- Semantic HTML elements
- Alt text for images
- ARIA labels for icons and buttons
- Keyboard navigation support
- Focus management

### Forms
- Label all inputs properly
- Show validation errors clearly
- Support keyboard navigation
- Provide helpful error messages

## Common Issues to Avoid

❌ Missing dependency arrays in useEffect
❌ Using dangerouslySetInnerHTML
❌ Exposed API keys or secrets
❌ Missing error boundaries
❌ Unnecessary re-renders
❌ Memory leaks (missing cleanup)
❌ Ignoring console warnings
❌ Poor accessibility
❌ Missing loading/error states
❌ Not handling async errors

## Testing

- Write tests for complex components
- Test user interactions
- Test error scenarios
- Mock API calls
- Aim for 70%+ coverage on new code

## Styling

- Use consistent naming (BEM, CSS modules, or styled-components)
- Avoid inline styles except for dynamic values
- Ensure responsive design
- Check color contrast ratios
- Use CSS variables for theming