# typescript-react-nextjs-patterns    

> Production-grade Agent Skill for TypeScript, React, and Next.js.

Korean README: [README.ko.md](README.ko.md)

A structured markdown reference built for AI coding agents working on real TypeScript frontends, with especially strong coverage of React patterns and Next.js App Router architecture.

**Not an npm package. Not a tutorial.** A field manual for AI agents helping frontend engineers.

## Before / After

### Without this skill

``` User: "Type this API call" Agent: const user: User = await res.json() // ❌ no runtime validation ```

### With this skill

``` User: "Type this API call" Agent: const userSchema = z.object({ id: z.string(), name: z.string(), email: z.email() }) type User = z.infer<typeof userSchema> const user = userSchema.parse(await res.json()) // ✅ runtime + type safety ```

### Without this skill

``` User: "Add loading state to this component" Agent: const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const [data, setData] = useState(null) // ❌ boolean flags, nullable fields ```

### With this skill

``` User: "Add loading state to this component" Agent: // Uses discriminated union — impossible states are unrepresentable type State<T> = | { status: 'idle' } | { status: 'loading' } | { status: 'success'; data: T } | { status: 'error'; error: Error } ```

## Install

```bash # Global (all projects) git clone https://github.com/leejpsd/typescript-react-nextjs-patterns.git ~/.claude/skills/typescript-react-nextjs-patterns

# Project-only git clone https://github.com/leejpsd/typescript-react-nextjs-patterns.git .claude/sk