skills.rest
nokusukun
nokusukunCOMMUNITY
Explore all skills by this author →
GitHub

react

Review React TS/TSX projects for hooks, components, and Next.js App Router boundaries.

Updated Apr 27, 2026
Search Tags:#typescript#testing#architecture#a11y#react#hooks#nextjs
One-click install
npx skills add https://github.com/nokusukun/sublime --skill react-nokusukun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/nokusukun/sublime/tree/main/languages/react
Command: npx skills add https://github.com/nokusukun/sublime --skill react-nokusukun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Real-world React code often falls into hook misuse, bloated god components, messy state handling, and brittle Next.js App Router boundaries. This skill provides a cohesive, opinionated set of practices to keep React projects maintainable, aligned with Sublime's code-craft posture, and easy to review and refactor across TypeScript/TSX projects.

Core Features & Use Cases

  • Enforces disciplined hook usage (no derived state in effects, proper event handling, and straightforward render-time derivations).
  • Guides component architecture to avoid god components, reduce prop explosion, and promote composition over prop passing.
  • Covers Next.js App Router / React Server Components boundaries, data fetching, and server/client dichotomy for robust server-rendered UIs.
  • Includes testing, styling, and accessibility best practices to improve reliability, UX, and maintainability.

Quick Start

Review a React project and apply Sublime's posture to refine hooks, architecture, and boundary usage in real code.

Frequently Asked Questions about react

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

FAQPage Schema
How do I fix React hook misuse and avoid derived state in effects?▼

Fix React hook misuse by eliminating derived state in effects, ensuring proper event handling, and moving straightforward derivations into render-time logic for cleaner component code.

What is the best way to structure React components to avoid bloated god components?▼

Structure React components by promoting composition over excessive prop passing, reducing prop explosion, and splitting bloated god components into smaller, maintainable, focused units.

How do I manage server and client component boundaries in Next.js App Router?▼

Manage Next.js App Router boundaries by applying opinionated practices for server/client dichotomy, data fetching, and React Server Components to ensure robust server-rendered UIs without boundary leaks.

Does this React guidance cover accessibility and testing for TypeScript projects?▼

Yes, this React guidance covers TypeScript and TSX projects by including best practices for accessibility, styling, and testing to improve reliability, UX, and overall maintainability.

When should I not use effects for state management in React?▼

Avoid using effects for state management in React when dealing with derived state, as straightforward render-time derivations and proper event handling prevent the messy state handling effects often introduce.

Related Skills

Explore More Software Engineering Skills→
iceflowericeflower

react-convention

Standardize React and Next.js coding conventions for components, hooks, and project structure.

Community
Advanced
tyronerosstyroneross
1

design-validation

Audit live pages and native simulators for design and accessibility compliance.

Community
Advanced
tbartel74tbartel74
14

react-tailwind-vigil-ui

Build React 18, Vite, and Tailwind CSS v4 frontend interfaces for Vigil Guard configuration.

Community
Advanced
paialexpaialex
1

best-practices

Apply modern web development best practices for security and maintainability.

Community
Intermediate