| 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.
