learn

name	learn
description	Studies existing code patterns, architecture, and conventions in react-gts-app. Reads reference components and tests to extract naming, import order, RTL query priority, and GTS-enforced conventions before writing new code. Use when writing new code or entering an unfamiliar area.
user-invocable	true
disable-model-invocation	true
argument-hint	[optional: area or pattern to study]

Learn Patterns

Study existing code in example/src/ before writing anything new. GTS enforces formatting and most style rules automatically, so focus on the conventions GTS does not catch.

Steps

1. Identify target area

If $ARGUMENTS is provided, focus on that area or pattern. Otherwise, study example/src/ — it is the only source directory.

2. Find reference files

ls -lt example/src/*.tsx example/src/*.ts | head -5

Prefer recent, well-structured files. App.tsx, App.test.tsx, reportWebVitals.ts, and reportWebVitals.test.ts are good reference points.

3. Read and analyze

Extract:

• Import grouping — React imports first, external packages next, local/relative last.
• Component shape — function components only, no class components. Hooks for state.
• File naming — PascalCase.tsx for components, co-located PascalCase.test.tsx, co-located PascalCase.css.
• Test shape — Arrange / Act / Assert. RTL query priority: getByRole > getByText > getByTestId. @testing-library/jest-dom matchers.
• Type usage — no any; prefer unknown or generics. GTS forbids loose types.
• Error handling — CRA's default boundary handles runtime errors; don't roll your own.

4. Identify utilities to reuse

grep -rn "^export " example/src/ | head -20

Note exports available for reuse before inventing new ones.

5. Summarize findings

Report:

• Patterns to follow — concrete examples with file:line references.
• Utilities to reuse — specific imports.
• Conventions — naming, structure, style rules observed.
• Anti-patterns — things this codebase avoids (check AGENTS.md § Anti-patterns).

Rules

• Read actual code, do not guess.
• Be specific: "imports are grouped: react, external, relative; blank lines between groups" beats "follow import conventions".
• Note deviations — flag when two files do things differently so the user can decide which is canonical.