Does this skill support React class components?

No, functional components are mandatory. Class components are completely deprecated under these rules, with the sole exception of Error Boundaries.

How are environment variables managed for security?

The skill enforces using build-tool environment systems and strictly prohibits storing secrets like API keys or tokens on the client side, as all frontend code is public.

What is the recommended approach for state management?

It recommends a tiered approach: useState for local state, Context API for global tree-sharing, Custom Hooks for logic encapsulation, and React Query/SWR for server state.

How does this skill handle the 'any' type in TypeScript?

The 'any' type is strictly prohibited. The skill provides a priority order for alternatives: using 'unknown' with type guards, generics, union/intersection types, or type assertions as a last resort.

TypeScript Frontend Rules

Name: TypeScript Frontend Rules
Author: Tahir-yamin

byTahir-yamin

•

Design Tools

Standardizes React and TypeScript development with strict type safety, modern component design patterns, and robust error handling.

This skill provides a comprehensive architectural framework for building high-quality frontend applications using React and TypeScript. It enforces strict type safety by prohibiting the 'any' type in favor of type guards and generics, promotes modern React patterns like functional components and custom hooks, and implements advanced error handling strategies such as the Result type pattern. By following these guidelines, developers can reduce technical debt through aggressive refactoring, maintain a single source of truth in state management, and ensure client-side security by preventing the exposure of sensitive secrets.

Key Features

01Functional component architecture based on Atomic Design principles.

02Immutable state management patterns using modern React hooks and Context API.

033 GitHub stars

04Fail-fast error handling with custom error classes and Result type patterns.

05Strict type safety enforcement prohibiting 'any' and promoting type guards.

06Performance optimization guidelines for memoization and bundle size management.

Use Cases

01Refactoring legacy frontend code to modern functional patterns while maintaining performance and security.

02Standardizing a large-scale React codebase with consistent TypeScript typing and component structure.

03Implementing secure data fetching layers that validate external API responses with type guards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tahir-yamin/dev-engineering-playbook typescript-rules

For use in Claude.ai and ChatGPT

Download Skill