Does this skill support React Class components?

No, this skill strictly enforces the use of Function components and Custom Hooks as per modern React recommendations, prohibiting Class components with the exception of Error Boundaries.

Can this skill help with frontend performance?

Yes, it provides specific rules for component memoization, lazy loading with Suspense, and monitoring bundle sizes to keep them under 500KB.

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

The skill completely prohibits the 'any' type. It guides developers to use 'unknown' with type guards, generics, or union types to maintain absolute type safety and prevent runtime errors.

How does it manage environment variables and security?

It enforces the use of build-tool environment systems (like import.meta.env) and mandates that no sensitive secrets or API keys are stored client-side, favoring backend proxies instead.

TypeScript & React Development Rules

Name: TypeScript & React Development Rules
Author: tundraray

bytundraray

•

Developer Tools

Enforces strict type safety and production-grade React component patterns to ensure scalable and maintainable frontend codebases.

This skill provides a comprehensive framework for building high-quality frontend applications using React and TypeScript within Claude Code. It automates adherence to industry best practices, including aggressive refactoring, the absolute prohibition of the 'any' type, and component-driven architecture using Atomic Design principles. By integrating these rules, developers can eliminate technical debt, ensure robust state management through immutable updates, and implement reliable error handling and data validation patterns for external APIs and user inputs.

Key Features

01Atomic Design component hierarchy and prop-driven development patterns

02Performance optimization via memoization, lazy loading, and bundle management

03Immutable state management and custom hook architecture

04Strict type safety enforcement and 'any' type prohibition

05Fail-fast error handling with custom Result types and Error Boundaries

061 GitHub stars

Use Cases

01Refactoring legacy JavaScript or loosely typed TypeScript code into type-safe structures

02Establishing standardized coding conventions for enterprise React applications

03Implementing secure data flows between frontend components and external APIs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/overture typescript-rules

For use in Claude.ai and ChatGPT

Download Skill