| name | Frontend Code Standards |
| description | Code standards and conventions for React, TypeScript, and domain-driven front-end architecture |
Frontend Code Standards
Opinionated code standards for building scalable, maintainable front-end applications with React, TypeScript, and Clean Architecture principles.
๐ฏ Token Budget Guide
Quick tasks (50-150 tokens):
Medium tasks (200-500 tokens):
Complex tasks (500-1000 tokens):
๐ Auto-Trigger Patterns
This skill should be loaded when:
- Creating
.tsx, .ts, .jsx, or .js files in a React project
- User mentions: "component", "create", "refactor", "naming", "structure"
- Code review or standards discussion
- User mentions: "SOLID", "Clean Code", "Clean Architecture", "DDD"
- Performance optimization tasks
- User mentions: "TypeScript", "types", "interfaces"
File patterns that trigger specific rules:
*.tsx โ Load react-naming.md + react-component-structure.md
- Helper/utility files โ Load helper-function-patterns.md
- Domain/entity files โ Load ddd-naming.md + clean-architecture.md
- Performance issues โ Load dom-performance.md + caching-strategies.md
Keywords:
component, naming, convention, structure, SOLID, SRP, DRY, architecture, Clean Code, TypeScript, interface, type, helper, utility, performance, optimization
Navigate to specific topics:
๐ Naming Conventions
React Naming
โ See rules/react-naming.md
Use when:
- Creating React components
- Setting up hooks
- Organizing component folders
Covers:
- Component naming (PascalCase)
- Hook naming (camelCase with 'use' prefix)
- Feature directories (kebab-case)
- Composite component folders
โ๏ธ React Component Structure
โ See rules/react-component-structure.md
Use when:
- Creating React components
- Refactoring component files
- Deciding where to place helper functions
Covers:
- Function declarations vs const (avoid React.FC)
- Single Responsibility Principle
- Component file organization
- When to extract helpers vs keep them inline
- Anti-patterns (god components, mixing concerns)
TypeScript Naming
โ See rules/typescript-naming.md
Use when:
- Defining types and interfaces
- Creating utility functions or classes
Covers:
- Types and interfaces (PascalCase)
- Functional vs class-based utilities
- File naming for utilities
Domain-Driven Design Naming
โ See rules/ddd-naming.md
Use when:
- Building domain layer (Clean Architecture)
- Defining entities, value objects, aggregates
- Creating repositories and use cases
Covers:
- Entities and value objects (PascalCase)
- Domain services and repositories
- Aggregates and use cases
- Ubiquitous language principles
๐ General Coding Standards
โ See rules/general-coding-standards.md
Use when:
- Writing or reviewing any source code
- Designing function signatures
- Refactoring for readability
Covers:
- Function design (naming, parameters, size)
- Command-Query Separation
- Control flow (early returns, avoiding deep nesting)
- Code organization and style
- Magic numbers, comments, variable scope
๐ ๏ธ Helper Function Patterns
โ See rules/helper-function-patterns.md
Use when:
- Creating utility functions
- Organizing formatters, validators, parsers, calculations
- Deciding when to extract a helper
Covers:
- Common helper categories (formatters, validators, parsers, guards)
- Function design for helpers (pure functions, simple signatures)
- Organization patterns (flat, categorized, barrel exports)
- Testing helpers
- Anti-patterns to avoid
๐ท TypeScript Best Practices
โ See rules/typescript-best-practices.md
Use when:
- Writing TypeScript code
- Choosing between type and interface
- Deciding on type annotations
Covers:
- Type safety (unknown vs any)
- Type inference (when to skip return types)
- Interface vs type guidelines
- Utility types (Partial, Pick, Omit, etc.)
- JSDoc documentation patterns
๐งน Clean Code Principles
โ See rules/clean-code-principles.md
Use when:
- Writing any code
- Creating functions
- General refactoring
Covers:
- Meaningful names (reveal intent)
- Functions do one thing
- Prefer exceptions over error codes
- DRY (Don't Repeat Yourself)
- Small functions (5-20 lines)
- Avoid side effects (Command-Query Separation)
๐ถ SOLID Principles
โ See rules/solid-principles.md
Use when:
- Designing class hierarchies
- Creating reusable components
- Refactoring classes
Covers:
- Single Responsibility Principle
- Open/Closed Principle
- Liskov Substitution Principle
- Interface Segregation Principle
- Dependency Inversion Principle
๐๏ธ Clean Architecture
โ See rules/clean-architecture.md
Use when:
- Structuring application layers
- Implementing domain-driven design
- Separating business logic from frameworks
Covers:
- Layer architecture (Entities, Use Cases, Adapters, Frameworks)
- Dependency rules (dependencies point inward)
- Framework independence
- Testability patterns
- Folder structure examples
โก JavaScript Performance
Performance optimization patterns for hot paths and frequently-executed code.
DOM & Browser
โ See rules/dom-performance.md
Use when working with DOM manipulation and browser APIs:
- Layout thrashing prevention
- Batching reads/writes
Caching Strategies
โ See rules/caching-strategies.md
Use when optimizing expensive operations:
- Property access in loops
- Repeated function calls
- Storage API calls (localStorage, cookies)
Data Structures
โ See rules/data-structures.md
Use when choosing data structures for performance:
- Index maps for repeated lookups
- Set/Map for O(1) membership checks
Array Optimization
โ See rules/array-optimization.md
Use when working with arrays:
- Combining multiple iterations
- Early length checks for comparisons
- Min/max without sorting
- Immutable operations (toSorted)
Control Flow
โ See rules/control-flow-optimization.md
Use when optimizing function logic:
- Early returns
- RegExp hoisting
- Guard clauses
Quick Reference
Naming Summary
| Concept | Naming | See Also |
|---|
| Feature folders | kebab-case | React |
| Composite component folder | PascalCase | React |
| React components | PascalCase | React |
| Hooks | camelCase | React |
| Functional utils | kebab-case | TypeScript |
| Utility classes / services | PascalCase | TypeScript |
| Domain entities & types | PascalCase | DDD |
Helper Categories
| Type | Purpose | Example |
|---|
| Formatter | Display transformation | formatCurrency, formatDate |
| Validator | Data validation | isValidEmail, isRequired |
| Parser | Format conversion | parseISODate, parseJSON |
| Calculator | Business logic | calculateDiscount, calculateTax |
| Guard | Type narrowing | isError, isDefined |
See helper-function-patterns.md for details.
Performance Quick Tips
DOM: Batch DOM reads/writes to avoid layout thrashing
Caching: Cache property access in loops, function results, storage APIs
Data Structures: Use Map/Set for O(1) lookups instead of Array.find()
Arrays: Combine iterations, check length before sorting, use toSorted()
Control Flow: Return early, hoist RegExp, use guard clauses