# Pathrule Pattern: React + TypeScript (1.0.0)
# ::pathrule:package:react-typescript

### [RULE] Type props explicitly, no any  (path: /src/components)
<!-- scope: folder | priority: medium | advisory -->

Every component has an explicit props type and avoids `any`.

- Prefer `unknown` with narrowing when a type is genuinely unknown.
- Type event handlers and refs precisely.
- Derive types from a single source of truth (schemas, API types) rather than restating shapes that can drift.

---

### [RULE] Interactive elements must be accessible  (path: /src/components)
<!-- scope: folder | priority: high | advisory -->

Use real semantics before reaching for a `div` with handlers.

- Prefer native `button`, `a`, `label`, `input`.
- Every control has an accessible name, a visible focus state, and full keyboard operability.
- Images have `alt` text, and color is never the only signal.

---

### [MEMORY] Component structure conventions  (path: /src)

Keep components small and focused on one responsibility.

- Colocate state with the component that owns it; lift only when genuinely shared.
- Separate presentational components from data access.
- Name files and exports consistently so the tree is predictable to navigate.

---

### [MEMORY] Hooks discipline and data fetching  (path: /src)

Call hooks unconditionally at the top level with honest dependency arrays.

- Avoid effects for data fetching; use a data-fetching library or the framework's server data layer.
- Custom hooks encapsulate reusable logic.
- Return stable references where identity matters.

---

### [SKILL] react-component-review  (path: /)

---
name: react-component-review
description: Review a React + TypeScript component for types, accessibility, and hook correctness.
---

# React component review

- [ ] Props are explicitly typed; no any
- [ ] Interactive elements use native semantics, labels, and keyboard support
- [ ] Hooks are called unconditionally with honest dependency arrays
- [ ] No data fetching inside raw effects
- [ ] Component has one clear responsibility and reasonable size
- [ ] State lives at the right level (colocated, lifted only when shared)
- [ ] No needless re-renders from unstable inline props or callbacks