frontend/typescript-rules

Type-related bugs in React are prevented by enforcing strict TypeScript rules across components, props design, and error handling. This Skill applies mandatory type definitions for props, explicit return types, function components only, and type guards for external input validation to eliminate runtime errors.

Design component props by defining explicit Props types as interfaces, using object parameter patterns, and applying strict typing throughout. This ensures clear component interfaces, prevents prop drilling issues, and catches type mismatches at compile time rather than runtime.

Handle errors with asynchronous try-catch blocks, structured error classes, Error Boundaries for component failures, and robust logging with privacy considerations. This Skill enforces these patterns to prevent unhandled exceptions and ensure graceful fallback UI rendering.

Class components are prohibited except for Error Boundaries, which must use them for React's error-catching lifecycle. Function components are mandatory throughout your application to maintain consistent patterns and leverage modern hooks for logic reuse.

Use the unknown type with explicit type guards to validate external input from APIs before assignment. This prevents runtime type errors when API responses don't match expectations and enforces frontend type safety at data entry points.

Avoid oversized components, prop drilling, implicit any types, and missing return type annotations. This Skill enforces guidelines for dependency injection, code formatting, and component size limits to maintain type safety and code quality across your frontend.