coding-standards

# Coding Standards & Best Practices Baseline coding conventions applicable across projects. This skill is the shared floor, not the detailed framework playbook. - Use `frontend-patterns` for React, state, forms, rendering, and UI architecture. - Use `backend-patterns` or `api-design` for repository/service layers, endpoint design, validation, and server-specific concerns. - Use `rules/common/coding-style.md` when you need the shortest reusable rule layer instead of a full skill walkthrough. ## When to Activate - Starting a new project or module - Reviewing code for quality and maintainability - Refactoring existing code to follow conventions - Enforcing naming, formatting, or structural consistency - Setting up linting, formatting, or type-checking rules - Onboarding new contributors to coding conventions ## Scope Boundaries Activate this skill for: - descriptive naming - immutability defaults - readability, KISS, DRY, and YAGNI enforcement - error-handling expectations and code-smell review Do not use this skill as the primary source for: - React composition, hooks, or rendering patterns - backend architecture, API design, or database layering - domain-specific framework guidance when a narrower ECC skill already exists ## Code Quality Principles ### 1. Readability First - Code is read more than written - Clear variable and function names - Self-documenting code preferred over comments - Consistent formatting ### 2. KISS (Keep It Simple, Stupid) - Simplest solution that works - Avoid over-engineering - No premature optimization - Easy to understand > clever code ### 3. DRY (Don't Repeat Yourself) - Extract common logic into functions - Create reusable components - Share utilities across modules - Avoid copy-paste programming ### 4. YAGNI (You Aren't Gonna Need It) - Don't build features before they're needed - Avoid speculative generality - Add complexity only when required - Start simple, refactor when needed ## TypeScript/JavaScript Standards ### Variable Naming ```typescript // PASS: GOOD: Descriptive names const marketSearchQuery = 'election' const isUserAuthenticated = true const totalRevenue = 1000 // FAIL: BAD: Unclear names const q = 'election' const flag = true const x = 1000 ``` ### Function Naming ```typescript // PASS: GOOD: Verb-noun pattern async function fetchMarketData(marketId: string) { } function calculateSimilarity(a: number[], b: number[]) { } function isValidEmail(email: string): boolean { } // FAIL: BAD: Unclear or noun-only async function market(id: string) { } function similarity(a, b) { } function email(e) { } ``` ### Immutability Pattern (CRITICAL) ```typescript // PASS: ALWAYS use spread operator const updatedUser = { ...user, name: 'New Name' } const updatedArray = [...items, newItem] // FAIL: NEVER mutate directly user.name = 'New Name' // BAD items.push(newItem) // BAD ``` ### Error Handling ```typescript // PASS: GOOD: Comprehensive error handling async function fetchData(url: st