react-code

Name: react-code
Author: gaia-react

20stars3forks

How to install react-code?

gaia-react/gaia/react-code

$npx -y skills add gaia-react/gaia --skill react-code

Installs into the current project.

Summary

Patterns and conventions for writing and editing React code, including components and hooks. Use this skill whenever writing or reviewing React components, hooks (useEffect, useCallback, useState), event handlers, or component extraction decisions. Also trigger when debugging sta

Files · 1

View on GitHub

SKILL.md

1	# React Code
2
3	Write and edit React components, pages, routes, hooks, and forms following project conventions.
4
5	## Reach for the Platform First
6
7	Before installing a package or hand-rolling a primitive, walk this ladder and stop at the first hit:
8
9	1. Existing GAIA code, a component, hook, or util already covers it (form inputs → Gate 2).
10	2. Web platform, a browser API or native element does the job: `Intl` (dates, numbers, lists, plurals), `URL` / `URLSearchParams`, `crypto.randomUUID()`, `structuredClone()`, `AbortController`, native `Array` / `Object` methods, `<dialog>`, modern CSS (`:has()`, container queries).
11	3. Already-installed dependency, check `package.json` before adding a sibling that does the same job. For component/hook traps Claude often hand-rolls (client-only/useHydrated, sse, debounce-fetcher), see the remix-utils decision map at `wiki/dependencies/remix-utils.md` before reinventing.
12	4. New dependency, only when 1-3 genuinely fall short; the added weight has to earn its place.
13	5. Custom code, last resort, kept minimal.
14
15	The largest real savings come from `Intl` over date/number-formatting libraries and native collection methods over `lodash`/`underscore` (already enforced by `you-dont-need-lodash-underscore`). Reaching for the platform replaces a needless dependency or bespoke widget; it never overrides accessibility, input validation, or an existing GAIA component (a wrapper exists for a reason).
16
17	## Pre-Flight Gates
18
19	Most hook bugs come from misidentifying the type of problem being solved. Before writing or editing hooks, run through these gate, it only applies when the relevant pattern is present in your changes.
20
21	### Gate 1: Hook Check
22
23	Before writing `useEffect`:
24
25	1. Can I calculate this during render? → Derive inline or `useMemo`, no Effect needed.
26	2. Does this respond to a user action? → Put it in the event handler, no Effect needed.
27	3. Am I syncing state to other state? → Derive it; remove the redundant state, no Effect needed.
28	4. Am I notifying a parent of a state change? → Call both setters in the handler, no Effect needed.
29	5. Do I need to reset child state when a prop changes? → Use `key`, no Effect needed.
30	6. Am I synchronizing with an external system (browser API, third-party widget, network)? → Effect is appropriate here. Add cleanup. For data fetching, include an `ignore` flag.
31
32	Before writing `useCallback`:
33
34	Only use when the function is:
35
36	1. Passed as a prop to a `memo`-wrapped component
37	2. A dependency of `useEffect`, `useMemo`, or another `useCallback`
38	3. Passed to a child that uses it in a hook dependency array
39
40	If none apply, skip `useCallback`, it adds indirection without benefit.
41
42	`useState` type inference: Omit explicit type when inferable from the default value. Add types for unions or complex objects. For an absent initial value, prefer `undefined` over `null` (GAIA never-null): `useState<T>()` is already typed `T \| undefined`.
43
44	### Gate 2: Form Element Check
45
46	Before writing `<input>`, `<select>`, `<textarea>`, or `<input type="checkbox">`:
47
48	\| Native element \| Use instead \|
49	\| -------------------------------------- \| ------------------------------------------------------------------------------- \|
50	\| `<input type="text">` \| `InputText` (`~/components/Form/InputText`) \|
51	\| `<input type="email">` \| `InputEmail` (`~/components/Form/InputEmail`) \|
52	\| `<input type="password">` \| `InputPassword` (`~/components/Form/InputPassword`) \|
53	\| `<input type="checkbox">` (single) \| `Checkbox` (`~/components/Form/Checkbox`) \|
54	\| `<input type="checkbox">` (group) \| `Checkboxes` (`~/components/Form/Checkboxes`), needs `options: Option[]` \|
55	\| `<input type="radio">` / radio group \| `RadioButtons` (`~/components/Form/RadioButtons`), needs `options: Option[]` \|
56	\| `<select>`

People who liked this also viewed

6 picks

Type

react-code

20stars3forks

View on GitHub

How to install react-code?

gaia-react/gaia/react-code

$npx -y skills add gaia-react/gaia --skill react-code

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Code
2
3	Write and edit React components, pages, routes, hooks, and forms following project conventions.
4
5	## Reach for the Platform First
6
7	Before installing a package or hand-rolling a primitive, walk this ladder and stop at the first hit:
8
9	1. Existing GAIA code, a component, hook, or util already covers it (form inputs → Gate 2).
10	2. Web platform, a browser API or native element does the job: `Intl` (dates, numbers, lists, plurals), `URL` / `URLSearchParams`, `crypto.randomUUID()`, `structuredClone()`, `AbortController`, native `Array` / `Object` methods, `<dialog>`, modern CSS (`:has()`, container queries).
11	3. Already-installed dependency, check `package.json` before adding a sibling that does the same job. For component/hook traps Claude often hand-rolls (client-only/useHydrated, sse, debounce-fetcher), see the remix-utils decision map at `wiki/dependencies/remix-utils.md` before reinventing.
12	4. New dependency, only when 1-3 genuinely fall short; the added weight has to earn its place.
13	5. Custom code, last resort, kept minimal.
14
15	The largest real savings come from `Intl` over date/number-formatting libraries and native collection methods over `lodash`/`underscore` (already enforced by `you-dont-need-lodash-underscore`). Reaching for the platform replaces a needless dependency or bespoke widget; it never overrides accessibility, input validation, or an existing GAIA component (a wrapper exists for a reason).
16
17	## Pre-Flight Gates
18
19	Most hook bugs come from misidentifying the type of problem being solved. Before writing or editing hooks, run through these gate, it only applies when the relevant pattern is present in your changes.
20
21	### Gate 1: Hook Check
22
23	Before writing `useEffect`:
24
25	1. Can I calculate this during render? → Derive inline or `useMemo`, no Effect needed.
26	2. Does this respond to a user action? → Put it in the event handler, no Effect needed.
27	3. Am I syncing state to other state? → Derive it; remove the redundant state, no Effect needed.
28	4. Am I notifying a parent of a state change? → Call both setters in the handler, no Effect needed.
29	5. Do I need to reset child state when a prop changes? → Use `key`, no Effect needed.
30	6. Am I synchronizing with an external system (browser API, third-party widget, network)? → Effect is appropriate here. Add cleanup. For data fetching, include an `ignore` flag.
31
32	Before writing `useCallback`:
33
34	Only use when the function is:
35
36	1. Passed as a prop to a `memo`-wrapped component
37	2. A dependency of `useEffect`, `useMemo`, or another `useCallback`
38	3. Passed to a child that uses it in a hook dependency array
39
40	If none apply, skip `useCallback`, it adds indirection without benefit.
41
42	`useState` type inference: Omit explicit type when inferable from the default value. Add types for unions or complex objects. For an absent initial value, prefer `undefined` over `null` (GAIA never-null): `useState<T>()` is already typed `T \| undefined`.
43
44	### Gate 2: Form Element Check
45
46	Before writing `<input>`, `<select>`, `<textarea>`, or `<input type="checkbox">`:
47
48	\| Native element \| Use instead \|
49	\| -------------------------------------- \| ------------------------------------------------------------------------------- \|
50	\| `<input type="text">` \| `InputText` (`~/components/Form/InputText`) \|
51	\| `<input type="email">` \| `InputEmail` (`~/components/Form/InputEmail`) \|
52	\| `<input type="password">` \| `InputPassword` (`~/components/Form/InputPassword`) \|
53	\| `<input type="checkbox">` (single) \| `Checkbox` (`~/components/Form/Checkbox`) \|
54	\| `<input type="checkbox">` (group) \| `Checkboxes` (`~/components/Form/Checkboxes`), needs `options: Option[]` \|
55	\| `<input type="radio">` / radio group \| `RadioButtons` (`~/components/Form/RadioButtons`), needs `options: Option[]` \|
56	\| `<select>`

People who liked this also viewed

6 picks

Type