typescript-rules_skill

Overview

This skill defines React and TypeScript frontend development rules focused on type safety, component design, state management, error handling, and maintainability. It prescribes practical conventions and patterns to produce production-ready, predictable, and secure UI code. Use it to enforce consistent decisions across components, hooks, and API interactions.

How this skill works

The skill inspects design and implementation choices and recommends concrete alternatives when issues are detected. It enforces strict type usage (prohibiting any), requires validation of external inputs as unknown with type guards, and validates component and state design against prescribed limits. It also audits error handling, logging practices, environment variable usage, and security constraints.

When to use it

• Implementing new React components or refactoring existing ones
• Designing or validating TypeScript types for props, state, and API responses
• Building data flow between frontend and backend (serialization/validation)
• Defining state management and dependency injection patterns
• Reviewing error handling, logging, and client-side security practices

Best practices

• Never use any; prefer unknown + type guards, generics, unions, or assertions as last resort
• Keep props small (3–7 ideal); split components if props exceed 10 and limit nesting to 2 levels
• Use function components and custom hooks; class components are prohibited except for Error Boundaries
• Fail fast: log ALL errors, rethrow or propagate via typed Result patterns; never silently swallow errors
• Co-locate tests, styles, and related files with components; perform aggressive small-step refactors to avoid technical debt
• Treat all external input (API, localStorage, URL params) as unknown and validate via type guards before use

Example use cases

• Validate an API response by treating it as unknown and implementing an isX type guard before setting state
• Refactor a large prop-driven component into atoms/molecules to reduce prop count and improve reuse
• Implement a custom hook to inject dependencies and encapsulate server-state logic using React Query
• Replace any usages with branded types or generics and add satisfies/const assertions to preserve inference
• Add an Error Boundary and convert fetch errors to domain AppError types with structured logging