What state management patterns are recommended?

The skill promotes the Single Source of Truth principle, unidirectional data flow, and immutable updates using useState, Context API, and React Query.

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

The use of 'any' is strictly prohibited. The skill enforces safer alternatives such as 'unknown' combined with type guards, generics, or union types.

Does this skill support legacy React class components?

No, this skill mandates functional components and custom hooks for all logic, following official modern React recommendations, with exceptions only for Error Boundaries.

Does it include rules for code documentation?

Yes, it provides guidelines for concise, functional comments that explain the 'why' rather than the 'what,' ensuring documentation remains timeless and valid.

Can this skill help prevent security leaks in frontend code?

Yes, it includes specific rules for client-side security, such as preventing the storage of API keys or secrets in environment variables visible to the browser.

TypeScript & React Development Standards

Name: TypeScript & React Development Standards
Author: shinpr

byshinpr

•

开发者工具

Enforces production-grade TypeScript and React best practices for type safety, component architecture, and state management.

This skill provides a comprehensive set of rules and patterns designed to maintain a healthy, scalable React and TypeScript codebase. It establishes strict type-safety protocols, such as prohibiting the 'any' type and utilizing 'unknown' with type guards, while promoting modern component design through functional components and Atomic design principles. By integrating fail-fast error handling, immutable state updates, and client-side security constraints, this skill ensures that development workflows remain consistent, performant, and resilient to common frontend vulnerabilities.

主要功能

01Performance & Security (Memoization, code splitting, secret exposure prevention)

02Strict Type Safety (No-any rule, type guards, satisfies operator)

0335 GitHub stars

04Modern React Architecture (Functional components, Custom Hooks, Atomic design)

05Robust Error Handling (Fail-fast principle, Result patterns, Error Boundaries)

06Advanced State Management (Immutable patterns, Context API, Server state)

使用场景

01Standardizing frontend architecture across collaborative team projects

02Implementing complex data flows and API integrations with reliable error recovery

03Refactoring legacy JavaScript or loose TypeScript into strict, type-safe code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill