What React component patterns does this skill recommend?

It mandates the use of Functional Components and Custom Hooks, while following the Atomic Design hierarchy (Atoms, Molecules, Organisms, Templates, Pages).

Can this skill help with state management decisions?

Yes, it provides clear guidelines on using local state, the Context API, and server-state tools like React Query to ensure a single source of truth.

Does this skill allow the use of the 'any' type in TypeScript?

No, the 'any' type is strictly prohibited. The skill provides alternative patterns using 'unknown', type guards, and generics to maintain absolute type safety.

How does this skill handle frontend security?

It enforces strict rules against storing secrets in client-side code and ensures sensitive information is never exposed in logs or environment variables.

TypeScript & React Development Standards

Name: TypeScript & React Development Standards
Author: Tahir-yamin

byTahir-yamin

•

Developer Tools

Enforces rigorous React and TypeScript engineering standards to ensure type safety, architectural consistency, and high-performance frontend implementation.

This skill serves as a comprehensive engineering playbook for modern React and TypeScript development, focusing on eliminating technical debt through strict type enforcement and the total prohibition of the 'any' type. It provides structured patterns for Atomic Design component architecture, robust state management using the Context API and custom hooks, and advanced error-handling strategies like the Fail-Fast principle. By integrating these rules into the development workflow, teams can ensure their frontend applications are secure, maintainable, and optimized for performance while maintaining a high standard of code quality.

Key Features

01Comprehensive error-handling patterns including Result types and Error Boundaries.

02Atomic Design methodology for structured and scalable component hierarchies.

03Strict type-safety enforcement through the prohibition of 'any' and mandatory type guards.

04Performance optimization guidance including memoization and lazy loading strategies.

053 GitHub stars

06Security-first environment variable management for client-side applications.

Use Cases

01Standardizing a React codebase to eliminate technical debt and runtime type errors.

02Implementing secure and robust API integration layers with 'unknown' type validation.

03Architecting a new frontend project using Atomic Design and type-safe data flows.

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