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

The skill strictly prohibits the use of 'any'. It instead guides developers to use 'unknown' with type guards, generics, or union types to ensure complete type safety and prevent runtime errors.

What React component patterns are recommended?

It mandates functional components and custom hooks, following an Atomic Design hierarchy (Atoms to Pages) while prohibiting class-based components except for Error Boundaries.

How does it improve frontend error handling?

It enforces the 'Fail-Fast' principle, requiring explicit error logging and re-throwing, and promotes the Result Type pattern for typed error handling in business logic.

When is this skill automatically activated?

It triggers when you mention React components, TypeScript types, state management, or prop design, ensuring context-aware guidance during development.

Does this skill address frontend security?

Yes, it includes critical rules against storing secrets or API keys on the client-side and provides guidelines for secure environment variable management.

TypeScript & React Development Standards

Name: TypeScript & React Development Standards
Author: tundraray

bytundraray

•

開発者ツール

Enforces production-grade TypeScript and React development patterns through strict type safety, component design principles, and robust error handling.

概要

This skill provides a comprehensive framework for building high-quality frontend applications by equipping Claude with specialized knowledge in modern TypeScript and React ecosystems. It prioritizes absolute type safety by prohibiting 'any' types and promoting advanced features like 'satisfies' and 'branded types'. The skill guides the creation of maintainable component architectures, efficient state management via hooks and context, and secure coding practices that prevent sensitive data exposure. By implementing 'Fail-Fast' error handling and aggressive refactoring guidelines, it ensures that your codebase remains clean, scalable, and resilient to runtime errors.

主な機能

Strict Type Safety (No-any policy and advanced type guards)
Prop-Driven Component Architecture & Atomic Design
Standardized State Management with Hooks and Context API
Fail-Fast Error Handling & Result Type Patterns
Clean Code Guidelines for Performance & Refactoring
1 GitHub stars

ユースケース

Building scalable enterprise React applications with strict type requirements.
Implementing secure API integrations and robust data validation layers.
Refactoring legacy frontend code to modern TypeScript standards.

概要

主な機能

Strict Type Safety (No-any policy and advanced type guards)
Prop-Driven Component Architecture & Atomic Design
Standardized State Management with Hooks and Context API
Fail-Fast Error Handling & Result Type Patterns
Clean Code Guidelines for Performance & Refactoring
1 GitHub stars

ユースケース

Building scalable enterprise React applications with strict type requirements.
Implementing secure API integrations and robust data validation layers.
Refactoring legacy frontend code to modern TypeScript standards.