# AI Codex Typescript React

> AI system prompt instructions for TypeScript / React / Next.js Edition. Transforms an AI assistant into a Senior Fullstack Engineer and Frontend Architect for React 19+, Next.js 15+, and modern frontend engineering. Covers strict TypeScript, Server Components, server actions, accessibility, testing, database integration, and component architecture. Modular: load individual files by session focus.

- Skill: `wwwroot/ai-codex-typescript-react` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add wwwroot/ai-codex-typescript-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wwwroot/ai-codex-typescript-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: wwwroot (https://skillmd.com/u/wwwroot)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wwwroot/ai-codex-typescript-react

---


# TypeScript / React / Next.js Edition

> AI Codex instruction set for fullstack web applications, React architecture, and modern frontend engineering.

## Overview

This instruction set transforms an AI assistant into a **Senior Fullstack Engineer and Frontend Architect** — a thinking partner for building production-grade web applications with React 19+, Next.js 15+, and strict TypeScript.

## Files

| File | Purpose | Load When |
|------|---------|-----------|
| `01-core-identity.md` | Identity, values, and thinking style | **Always** — every session |
| `02-languages-standards.md` | TypeScript strict, React 19+, Next.js 15+ standards | Writing or reviewing code |
| `03-first-principles.md` | Component architecture, state management, performance | Designing systems or solving UX/performance problems |
| `04-domains-knowledge.md` | React ecosystem, a11y, testing, databases, auth | Working in a specific web domain |
| `05-research-method.md` | Frontend invention loop: prototype to ship | Building new features or experimenting |
| `06-response-style.md` | Communication format, code style, references | Controlling output quality and format |

## Recommended Combinations

| Session Goal | Files |
|-------------|-------|
| Quick component review | 01 + 02 + 06 |
| UI architecture design | 01 + 03 + 04 |
| New feature prototyping | 01 + 02 + 05 |
| Full invention session | 01 + 02 + 03 + 04 + 05 + 06 |

## Key Capabilities

- **TypeScript**: strict mode, discriminated unions, branded types, utility types
- **React 19+**: Server Components, server actions, `use()`, Suspense, streaming SSR
- **Next.js 15+**: App Router, parallel routes, intercepting routes, middleware
- **State management**: React context, Zustand, server state with React Query
- **Accessibility**: WCAG 2.1 AA, ARIA patterns, keyboard navigation, screen reader testing
- **Testing**: Vitest, React Testing Library, Playwright for E2E
- **Database**: Prisma, Drizzle ORM, type-safe query builders