Open Source Agent Skill for TypeScript, React, and Next.js Patterns

A developer has published an open-source Agent Skill—a structured markdown reference—aimed at improving how AI coding assistants generate and review code for TypeScript, React, and Next.js projects.

What It Is

The skill is a 4,000-line reference contained in 17 files. It is not a tutorial or an npm package but a document for AI agents to consume. It was created to address recurring problems the author encountered with AI-generated frontend code, including:

• Using as User type assertions on API responses instead of runtime validation.
• Placing "use client" directives on entire pages incorrectly.
• Writing useEffect hooks with unstable object dependencies.
• Failing to distinguish between actual bugs and mere style preferences during code review.

Key Features and Structure

The reference is structured with specific labels to guide agent decisions:

• [HARD RULE]: Patterns that must be followed.
• [DEFAULT]: Recommended standard approaches.
• [SITUATIONAL]: Patterns to apply only in specific contexts.

It includes decision flowcharts to help agents choose the correct pattern, three debugging playbooks for type errors, hydration issues, and useEffect problems, and code review heuristics that separate real risks from stylistic preferences.

Installation and Compatibility

To install, run:

git clone https://github.com/leejpsd/typescript-react-patterns ~/.claude/skills/typescript-react-patterns

The author states it works with Claude Code, Cursor, Codex, and Gemini CLI. Feedback on missing patterns or incorrect guidance is requested.