typescript-react-coder-01

Stars10

Forks3

UpdatedApril 11, 2026 at 06:45

Reliability-first React and TypeScript skill for .tsx apps, client and server boundaries, forms, query layers, optimistic UI, navigation recovery, and behavior-first frontend tests. Use when working on React components, hooks, App Router style boundaries, server-state flows, schema-driven forms, or resilient UI state machines.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

that-in-rust

that-in-rust/agent-room-of-requirements

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

5 files

SKILL.md

readonly

name	typescript-react-coder-01
description	Reliability-first React and TypeScript skill for .tsx apps, client and server boundaries, forms, query layers, optimistic UI, navigation recovery, and behavior-first frontend tests. Use when working on React components, hooks, App Router style boundaries, server-state flows, schema-driven forms, or resilient UI state machines.

TypeScript React Reliability

Overview

Use this skill for React and TSX work where UI correctness depends on typed state transitions, trustworthy server-state boundaries, and resilient recovery paths. It focuses on the frontend failures LLMs often miss: widened props and state, duplicated fetching, brittle optimistic updates, and components that only work under ideal timing.

When To Use

.tsx components, hooks, route modules, App Router style boundaries, or client/server split decisions
Forms, query or cache layers, optimistic mutations, external stores, route contracts, or event payloads
Frontend reviews where the question is whether the UI will survive slow data, bad data, retries, or navigation changes
React refactors that should reduce client-side blast radius or impossible UI states

Workflow

Decide what truly needs to be client-side. Keep as much code server-capable as the architecture allows.
Read references/reference-map.md, then load only the relevant sections in references/react-reliability-reference.md. Pull in typescript-coder-01 when you need the shared TypeScript baseline.
Apply the default frontend patterns in order: schema-validated forms, feature-collocated query layers, exhaustive UI unions, minimal store subscriptions, navigation-aware error recovery, and rollback-ready optimistic updates.
Normalize transport data before hooks and components trust it.
Validate with behavior-first UI tests that cover the user-visible boundary, not only isolated helpers.

Reference Use

Use references/reference-map.md first for fast routing.
Use references/react-reliability-reference.md for the full scored React patterns and anti-patterns.
For large-file navigation, prefer heading search such as rg '^##|^###' references/react-reliability-reference.md.

Output Expectations

Prefer one explicit UI state union over scattered booleans and nullable fields.
Keep server-state and client-state responsibilities separate.
Treat optimistic UI as a transaction with a rollback story.
Leave the component tree simpler to reason about than before.

More from this repository

same repository

strata-202607

that-in-rust/agent-room-of-requirements

Use Strata, the Legacy Code Labs macOS visual-spec app, through its local Streamable HTTP MCP server. Trigger when Codex needs to create, read, validate, update, version, diff, or restore Strata diagrams; build visual specs from user flows, discovery trees, architecture sketches, or D2; diagnose Strata MCP setup; or verify a feature against a shared Strata canvas.

2026-07-1610

clarity202606

that-in-rust/agent-room-of-requirements

Use Clarity, the LegacyCodeHQ structural design CLI, for dependency impact graphs, architecture/refactoring verification, before-commit design checks, code review context, cycle/module/workspace exploration, AGENTS.md Clarity setup, or rebuilding/probing Clarity command availability. Use when Codex needs to run or interpret clarity show, watch, languages, extensions, modules, cycles, workspace, setup, or version-specific Clarity commands.

2026-07-0810

kotlin-backend-delivery-01

that-in-rust/agent-room-of-requirements

Plan, build, harden, and review Kotlin backend services with Spring Boot, Ktor, coroutines, typed configuration, persistence, migrations, testing, security, resilience, and operations. Use for Kotlin HTTP APIs, workers, service refactors, production-readiness reviews, or JVM backend architecture decisions.

2026-07-0510

kotlin-coder-01

that-in-rust/agent-room-of-requirements

Reliability-first Kotlin skill for implementing, refactoring, or reviewing Kotlin libraries, CLIs, JVM modules, shared domain code, coroutine code, and Java interop boundaries. Use when work needs null-safety discipline, value and sealed types, idiomatic scope-function use, typed errors, structured concurrency, testing, or JVM quality gates.

2026-07-0510

python-coder-01

that-in-rust/agent-room-of-requirements

Reliability-first Python skill for implementing, refactoring, or reviewing Python packages, CLIs, services, scripts, async code, tests, and typed modules. Use when work needs type hints, dataclasses, boundary parsing, exception design, context managers, asyncio cancellation, packaging, pytest or unittest strategy, ruff, mypy, pyright, or runtime safety.

2026-07-0510

local-vision-ollama

that-in-rust/agent-room-of-requirements

Analyze images using local Ollama vision model (qwen3.5:4b) with automatic pre-resizing and filename sanitization for reliable processing.

2026-05-1010

name	typescript-react-coder-01
description	Reliability-first React and TypeScript skill for .tsx apps, client and server boundaries, forms, query layers, optimistic UI, navigation recovery, and behavior-first frontend tests. Use when working on React components, hooks, App Router style boundaries, server-state flows, schema-driven forms, or resilient UI state machines.

TypeScript React Reliability

Overview

When To Use

.tsx components, hooks, route modules, App Router style boundaries, or client/server split decisions
Forms, query or cache layers, optimistic mutations, external stores, route contracts, or event payloads
Frontend reviews where the question is whether the UI will survive slow data, bad data, retries, or navigation changes
React refactors that should reduce client-side blast radius or impossible UI states

Workflow

Decide what truly needs to be client-side. Keep as much code server-capable as the architecture allows.
Read references/reference-map.md, then load only the relevant sections in references/react-reliability-reference.md. Pull in typescript-coder-01 when you need the shared TypeScript baseline.
Apply the default frontend patterns in order: schema-validated forms, feature-collocated query layers, exhaustive UI unions, minimal store subscriptions, navigation-aware error recovery, and rollback-ready optimistic updates.
Normalize transport data before hooks and components trust it.
Validate with behavior-first UI tests that cover the user-visible boundary, not only isolated helpers.

Reference Use

Use references/reference-map.md first for fast routing.
Use references/react-reliability-reference.md for the full scored React patterns and anti-patterns.
For large-file navigation, prefer heading search such as rg '^##|^###' references/react-reliability-reference.md.

Output Expectations

Prefer one explicit UI state union over scattered booleans and nullable fields.
Keep server-state and client-state responsibilities separate.
Treat optimistic UI as a transaction with a rollback story.
Leave the component tree simpler to reason about than before.