---

name: web-development-best-practices description: Expert knowledge in modern web development best practices, patterns, and industry standards. Covers code quality, design patterns, version control, documentation, code review, CI/CD, error handling, and state management. Use when establishing coding standards or reviewing code architecture. metadata: version: 1.0.0

Web Development Best Practices Skill

Expert knowledge in modern web development best practices, patterns, and industry standards.

Core Competencies

• Code Quality: Writing clean, maintainable, and readable code
• Design Patterns: Applying appropriate architectural patterns
• Version Control: Using Git effectively
• Documentation: Creating clear and useful documentation
• Code Review: Conducting and responding to code reviews
• Continuous Integration: Implementing CI/CD pipelines
• Error Handling: Proper error handling and logging
• State Management: Managing application state effectively

Code Quality Standards

1. Clean Code Principles

   • Write self-documenting code
   • Use meaningful variable and function names
   • Keep functions small and focused (single responsibility)
   • Avoid deep nesting
   • Don't repeat yourself (DRY)
   • Keep it simple (KISS)

2. Code Organization

   • Organize files by feature or domain
   • Use consistent folder structure
   • Separate concerns (presentation, logic, data)
   • Group related code together

3. Naming Conventions

   • Use camelCase for variables and functions
   • Use PascalCase for classes and components
   • Use UPPER_SNAKE_CASE for constants
   • Use descriptive names (avoid abbreviations)

Design Patterns

1. Component Patterns

   • Container/Presentational components
   • Higher-Order Components (HOC)
   • Render Props
   • Custom Hooks
   • Compound Components

2. State Management Patterns

   • Flux/Redux pattern
   • Context + Reducer
   • Atomic state management
   • Observable pattern

3. Code Organization Patterns

   • Module pattern
   • Factory pattern
   • Singleton pattern (use sparingly)
   • Observer pattern
   • Strategy pattern

Development Workflow

1. Version Control

   • Write meaningful commit messages
   • Use feature branches
   • Keep commits focused and atomic
   • Use conventional commit format
   • Rebase to keep history clean

2. Code Review

   • Review for logic, not style
   • Check for security issues
   • Verify tests are included
   • Ensure documentation is updated
   • Be constructive and kind

3. Testing Strategy

   • Write tests before or with code (TDD)
   • Aim for high coverage of critical paths
   • Use appropriate test types (unit, integration, e2e)
   • Keep tests fast and reliable

Error Handling

1. Error Boundaries (React)

   • Catch rendering errors
   • Provide fallback UI
   • Log errors for monitoring

2. Async Error Handling

   • Use try/catch with async/await
   • Handle promise rejections
   • Provide user-friendly error messages

3. Validation Errors

   • Validate early and often
   • Provide clear error messages
   • Show errors near the relevant field

API Design

1. REST API Best Practices

   • Use appropriate HTTP methods
   • Use proper status codes
   • Version your API
   • Implement pagination
   • Use filtering and sorting
   • Provide clear error messages

2. GraphQL Best Practices

   • Design schema carefully
   • Implement proper error handling
   • Use DataLoader for batching
   • Implement depth limiting
   • Add proper authorization

Performance Considerations

• Avoid premature optimization
• Profile before optimizing
• Optimize for perceived performance
• Use memoization appropriately
• Debounce/throttle expensive operations
• Virtualize long lists

Accessibility Integration

• Design with accessibility in mind
• Use semantic HTML by default
• Test with keyboard only
• Include ARIA when necessary
• Test with screen readers

Documentation

1. Code Documentation

   • Document complex algorithms
   • Explain "why" not "what"
   • Keep comments up to date
   • Use JSDoc for function documentation

2. Project Documentation

   • Maintain up-to-date README
   • Document setup and installation
   • Include contribution guidelines
   • Document API endpoints
   • Provide examples

Tools and Linting

• Use ESLint for JavaScript/TypeScript
• Use Prettier for code formatting
• Use Husky for git hooks
• Use lint-staged for pre-commit checks
• Use TypeScript for type safety