how-to-use-react (masseater's React 19.3 guidelines, Japanese)

A set of Japanese React 19.3 coding guidelines: when agents write, modify, or review components and server-side processing, use the table to decide where to place state (use Effect Atom for UI state, TanStack Query for server data), how to eliminate async waterfalls, and when to use the Concurrent API. This is adapted for the author's masseater/typescript-template.

A set of Japanese React 19.3 coding guidelines: when agents write, modify, or review components and server-side processing, use the table to decide where to place state (use Effect Atom for UI state, TanStack Query for server data), how to eliminate async waterfalls, and when to use the Concurrent API. This is adapted for the author's masseater/typescript-template.

Security Audit: Audited (no risks found)

Installation: npx skills add https://github.com/masseater/skills --skill how-to-use-react

Rationale

  • The "state placement" table explicitly specifies what to use and what to avoid: do not use useState / useContext (enforced by no-restricted-imports), use useOptimistic for optimistic updates, use useTransition instead of debouncing for non-urgent updates, and use <Activity> to hide components while preserving state
  • In repositories with React Compiler, do not write useMemo / useCallback / memo; without it, add them only where the react-perf rule indicates
  • Use Effect.all with concurrency: "unbounded" for independent async operations; if order matters, specify concurrency: 1; the author notes this is adapted from resources like vercel-labs' react-best-practices, excluding Next.js, SWR, and Redux
  • skills.sh 24 hours installed 2801 (indicates attention level only)

Usage

  • npx skills add https://github.com/masseater/skills --skill how-to-use-react
  • Triggered when writing, modifying, or reviewing React components, loaders, and server-side processing; SKILL.md requires reading 8 documents under references/ (async, effects-and-data, component-apis, etc.) simultaneously

Risks

  • Audit result is pass; SKILL.md is a text-only specification with no scripts or network requests, consistent with its content; documents under references/ were not scanned
  • Rules are tied to the author's template tech stack (Effect, TanStack Start, FSD directory structure); using them in standard Next.js / Redux projects may conflict with existing code
  • Entirely in Japanese; the skills.sh page shows the repository has only 2 stars and was first indexed on 12 10, with daily install counts disproportionate to the repository size

Open · Repository

Best Skills 每日数据(LinklyAI / @BlueeonY,CC BY 4.0)

Explore the latest AI Radar updates