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

•

デザインツール

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.

主な機能

Functional component architecture based on Atomic Design principles.
Immutable state management patterns using modern React hooks and Context API.
3 GitHub stars
Fail-fast error handling with custom error classes and Result type patterns.
Strict type safety enforcement prohibiting 'any' and promoting type guards.
Performance optimization guidelines for memoization and bundle size management.

ユースケース

Refactoring legacy frontend code to modern functional patterns while maintaining performance and security.
Standardizing a large-scale React codebase with consistent TypeScript typing and component structure.
Implementing secure data fetching layers that validate external API responses with type guards.

概要

主な機能

Functional component architecture based on Atomic Design principles.
Immutable state management patterns using modern React hooks and Context API.
3 GitHub stars
Fail-fast error handling with custom error classes and Result type patterns.
Strict type safety enforcement prohibiting 'any' and promoting type guards.
Performance optimization guidelines for memoization and bundle size management.

ユースケース

Refactoring legacy frontend code to modern functional patterns while maintaining performance and security.
Standardizing a large-scale React codebase with consistent TypeScript typing and component structure.
Implementing secure data fetching layers that validate external API responses with type guards.