skills.rest
eric-sabe
eric-sabeCOMMUNITY
Explore all skills by this author →
GitHub

react-conventions

Enforce React 19 and Next.js 16 client-side conventions for components and hooks.

1|Updated Jun 24, 2026
Search Tags:#frontend#react#next.js#conventions#code-review#tanstack-query#radix-ui
One-click install
npx skills add https://github.com/eric-sabe/engsys --skill react-conventions-eric-sabe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-conventions
Source: https://github.com/eric-sabe/engsys/tree/main/stacks/platform/web/skills/react-conventions
Command: npx skills add https://github.com/eric-sabe/engsys --skill react-conventions-eric-sabe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the recurring pain of inconsistent React/Next.js implementation patterns that lead to flaky user interfaces, failed code reviews, and runtime crashes in client-side web applications.

Core Features & Use Cases

  • React 19/Next.js 16 Convention Enforcement: Codifies team standards for client components, custom hooks, and App Router code using TanStack Query, Radix UI primitives, and shared API gateway helpers.
  • Common Bug Prevention: Eliminates recurring footguns including incomplete optimistic cache patches, unhandled data fetch errors, Radix Select form reset issues, and Edge Runtime import crashes.
  • Use Case: When building a data-heavy dashboard with filtering, destructive user actions, and real-time data updates, use this Skill to write and review component code that passes PR checks and runs reliably in production.

Quick Start

Use the react-conventions skill to review your new dashboard filter component for compliance with optimistic cache, error state, and Radix Select conventions before submitting your pull request.

Frequently Asked Questions about react-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix incomplete optimistic cache patches when using TanStack Query in React?▼

Fix incomplete optimistic cache patches by applying team conventions for TanStack Query that ensure full cache state coverage, preventing flaky UI updates and failed code reviews in data-heavy React components.

Why does my Next.js App Router code crash in the Edge Runtime?▼

Next.js Edge Runtime crashes often stem from unsafe imports. Reviewing App Router code against Edge Runtime import safety conventions identifies and eliminates incompatible dependencies before runtime failures occur.

How do I prevent Radix Select form reset issues in Next.js client components?▼

Prevent Radix Select form reset issues by following codified conventions for Radix UI primitives in Next.js client components, ensuring destructive dialog state and form resets manage state correctly without losing user input.

What standards do I need to pass a React 19 and Next.js 16 code review?▼

Passing a React 19 and Next.js 16 code review requires satisfying team standards for optimistic cache completeness, error state handling, accessibility compliance, and API client usage consistency across all client components.

Does this convention enforcement work with shared API gateway helpers?▼

Yes, convention enforcement validates API client usage consistency, specifically checking that client components correctly implement shared API gateway helpers to maintain reliable data fetching and error handling across web frontend projects.

Related Skills

Explore More Software Engineering Skills→
ai-enhanced-engineerai-enhanced-engineer
3

nextjs-16-app-router

Guide Next.js 16 App Router projects with React 19 and Turbopack.

Official
Advanced
tech-leads-clubtech-leads-club
5.0k

gh-address-comments

Fetch GitHub pull request comments, reviews, and threads for the current branch.

Official
Intermediate
adtecoadteco

adteco-frontend-guidelines

Standardize React/ShadCN/Tailwind build patterns for Next.js 15 TypeScript apps.

Official
Intermediate
ahiendzahiendz
3

lint-and-validate

Lint and statically analyze Node.js/TypeScript and Python codebases.

Community
Intermediate