Typescript React Nextjs Patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe

22 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add leejpsd/typescript-react-nextjs-patterns --skill typescript-react-nextjs-patterns

Manual install

git clone --depth 1 https://github.com/leejpsd/typescript-react-nextjs-patterns.git /tmp/typescript-react-nextjs-patterns
mkdir -p ~/.claude/skills
cp -r /tmp/typescript-react-nextjs-patterns/. ~/.claude/skills/typescript-react-nextjs-patterns

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# TypeScript for React & Next.js — Agent Skill

A structured reference for AI coding agents assisting frontend engineers with TypeScript, React, and Next.js in production environments.

---

## Agent Behavior Rules

### Before answering, always verify:

1. **Server or client?** Server Components, Server Actions, and Route Handlers have different type constraints than `"use client"` components.
2. **Runtime validation needed?** Static types do NOT validate API responses, URL params, form data, or localStorage. Data crossing a trust boundary requires Zod or equivalent.
3. **App Router or Pages Router?** Patterns differ significantly. If unclear, ask.
4. **TypeScript version?** `satisfies` needs 5.0+, `NoInfer` 5.4+, inferred type predicates 5.5+. TS 6.0 is the final JS-based compiler; TS 7 is the Go-native rewrite — ~10x faster, same language, but tooling that consumes the old compiler API may lag.
5. **Next.js version?** `params` is a `Promise` in 15+. Caching model changed in 16+ (`"use cache"`), and 16 renames `middleware.ts` → `proxy.ts` (Node runtime).
6. **React version?** 19 makes `ref` a regular prop (`forwardRef` deprecated), renders `<Context>` directly, and replaces `useFormState` with `useActionState`. `useEffectEvent` and `<Activity>` need 19.2+.

### Assumptions the agent must NOT make:

- That API responses match their TypeScript types at runtime
- That `searchParams` values are the expected type (they are always `string | string[] | undefined`)

Read the full skill on GitHub

Details

Skill name: typescript-react-nextjs-patterns
Repository: leejpsd/typescript-react-nextjs-patterns
License: MIT
Repo updated: 14 September 2026

FAQ

What does the Typescript React Nextjs Patterns skill do?

How do I install the Typescript React Nextjs Patterns skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add leejpsd/typescript-react-nextjs-patterns --skill typescript-react-nextjs-patterns. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Typescript React Nextjs Patterns popular?

It lives in leejpsd/typescript-react-nextjs-patterns, which has 22 GitHub stars and 1 forks.

Related skills

Apple Design System

rukkiecodes/claude-apple-design-system

Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".

Frontend & Design

Components

AnayDhawan/Components

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fall

Frontend & Design

Screenshot to HTML

sevzq/screenshot-to-html

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".

Frontend & Design

UI Sift

Ciao1019/ui-sift

设计、实现、评审或打磨简洁且交互精致的前端页面与组件。提供项目画像、视觉判断、精选组件检索、官方 skills/MCP 与源码发现、多库集成和证据验收。适用于新页面、后台、AI 对话、文档工作台、参考还原和局部 UI 改善；纯后端、仅修复业务逻辑或机械改字时不使用。

Frontend & Design

Web Motion

Schmandarine/web-motion-skill

Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear

Frontend & Design

Telegram Premium Emoji

Zulut30/premium-telegram-emoji

Select verified Telegram custom emoji by meaning, preserve a consistent visual style across a bot or application, and generate HTML with catalog IDs. Use when a Telegram project needs premium emoji or the user requests a palette from this catalog. Includes ordered multi-emoji compositions. Not for unrelated UI icons.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.