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

•

開発者ツール

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.

主な機能

Comprehensive error-handling patterns including Result types and Error Boundaries.
Atomic Design methodology for structured and scalable component hierarchies.
Strict type-safety enforcement through the prohibition of 'any' and mandatory type guards.
Performance optimization guidance including memoization and lazy loading strategies.
3 GitHub stars
Security-first environment variable management for client-side applications.

ユースケース

Standardizing a React codebase to eliminate technical debt and runtime type errors.
Implementing secure and robust API integration layers with 'unknown' type validation.
Architecting a new frontend project using Atomic Design and type-safe data flows.

概要

主な機能

Comprehensive error-handling patterns including Result types and Error Boundaries.
Atomic Design methodology for structured and scalable component hierarchies.
Strict type-safety enforcement through the prohibition of 'any' and mandatory type guards.
Performance optimization guidance including memoization and lazy loading strategies.
3 GitHub stars
Security-first environment variable management for client-side applications.

ユースケース

Standardizing a React codebase to eliminate technical debt and runtime type errors.
Implementing secure and robust API integration layers with 'unknown' type validation.
Architecting a new frontend project using Atomic Design and type-safe data flows.