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.

주요 기능

01Strict Type Safety (No-any policy and advanced type guards)

02Prop-Driven Component Architecture & Atomic Design

03Standardized State Management with Hooks and Context API

04Fail-Fast Error Handling & Result Type Patterns

05Clean Code Guidelines for Performance & Refactoring

061 GitHub stars

사용 사례

01Building scalable enterprise React applications with strict type requirements.

02Implementing secure API integrations and robust data validation layers.

03Refactoring legacy frontend code to modern TypeScript standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/claude-code-workflows typescript-rules

For use in Claude.ai and ChatGPT

Download Skill