# React Coding

> React Coding Skill

- Skill: `quannv1198/react-coding` (Agent Skill)
- Install (CLI): `npx skillmds@latest add quannv1198/react-coding`
- Raw SKILL.md: https://api.skillmd.com/api/skills/quannv1198/react-coding/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: quannv1198 (https://skillmd.com/u/quannv1198)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/quannv1198/react-coding

---

# React Coding Skill

- Follow existing project patterns, architecture, and conventions.
- Prefer functional components and React hooks.
- Keep components small, focused, and reusable.
- Use TypeScript with explicit, accurate types; avoid `any`.
- Keep UI, state, business logic, and data fetching separated when practical.
- Reuse existing components, hooks, utilities, and libraries before creating new ones.
- Avoid unnecessary re-renders, effects, memoization, and state.
- Prefer derived values over duplicated state.
- Handle loading, error, empty, and edge states explicitly.
- Keep JSX declarative and readable; avoid complex inline logic.
- Use stable keys and avoid array indexes when rendering dynamic lists.
- Preserve accessibility: semantic HTML, labels, keyboard support, and ARIA only when needed.
- Make the smallest necessary changes and avoid unrelated refactoring.
- Before adding a dependency, check whether the project already provides an equivalent solution.
- After changes, verify TypeScript, lint, tests, and build when available.