Skills
.Work. You
Rest

typescript-react-perf

Official

Write high-performance TS and React code.

Software Engineering#typescript#performance#react#react-native#react compiler#hermes#reanimated
AuthorFilenCloudDienste
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents performance regressions in hot TypeScript/React/React Native code by enforcing allocation- and monomorphism-friendly patterns and project-specific React Compiler rules.

Core Features & Use Cases

  • Zero-waste TypeScript code: keeps object shapes monomorphic, avoids hidden-class mutations, and reduces unnecessary allocations in tight loops.
  • Correct data structures: recommends Map/Set for O(1) lookup, typed arrays for numeric data, and avoids costly patterns like Array.shift().
  • React performance aligned to this project: discourages manual memo/useMemo/useCallback when React Compiler is enabled, enforces stable keys, and avoids inline objects in JSX.
  • React Native / Hermes guidance: favors Reanimated worklets, gesture-handler usage, FlashList for large lists, and avoids generators/Proxy on Hermes for speed.
  • Common anti-pattern prevention: covers prop mutation, unstable keys, inline allocations in JSX, and hot-path inefficiencies.

Quick Start

Use this skill when reviewing or writing TypeScript, React, or React Native code that runs frequently and must stay fast.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: typescript-react-perf
Download link: https://github.com/FilenCloudDienste/filen-ts/archive/main.zip#typescript-react-perf

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.