form-components
Use project form components instead of native elements in all `.tsx` files. Native form elements bypass GAIA's Conform integration and accessible error/label wiring.
$ npx -y skills add gaia-react/gaia --agent claude-codeHow it fires
How this agent gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
Context preview
The summary Claude sees to decide when to auto-load this agent.
Use project form components instead of native elements in all `.tsx` files. Native form elements bypass GAIA's Conform integration and accessible error/label wiring.
Agent definition
form-components.mdsubagents: [react-patterns]
library: GAIA Form Components
GAIA Form Component Gate
Use project form components instead of native elements in all `.tsx` files. Native form elements bypass GAIA's Conform integration and accessible error/label wiring.
| Native element | Use instead | | ------------------------------------------- | ------------------------------------------------------ | | `<input type="text">` | `InputText` from `~/components/Form/InputText` | | `<input type="email">` | `InputEmail` from `~/components/Form/InputEmail` | | `<input type="password">` | `InputPassword` from `~/components/Form/InputPassword` | | `<input type="checkbox">` (single) | `Checkbox` from `~/components/Form/Checkbox` | | `<input type="checkbox">` (group) | `Checkboxes` from `~/components/Form/Checkboxes` | | `<input type="radio">` / radio group | `RadioButtons` from `~/components/Form/RadioButtons` | | `<select>` | `Select` from `~/components/Form/Select` | | `<textarea>` | `TextArea` from `~/components/Form/TextArea` | | Date (year/month/day) | `YearMonthDay` from `~/components/Form/YearMonthDay` | | Field wrapper (label + error + description) | `Field` from `~/components/Form/Field` |
Exceptions (native OK): `<input type="hidden">`, `<input type="file">`, `<input type="range">`.
Read more
subagents: [react-patterns] library: GAIA Form Components
GAIA Form Component Gate
Use project form components instead of native elements in all `.tsx` files. Native form elements bypass GAIA's Conform integration and accessible error/label wiring.
| Native element | Use instead | | ------------------------------------------- | ------------------------------------------------------ | | `<input type="text">` | `InputText` from `~/components/Form/InputText` | | `<input type="email">` | `InputEmail` from `~/components/Form/InputEmail` | | `<input type="password">` | `InputPassword` from `~/components/Form/InputPassword` | | `<input type="checkbox">` (single) | `Checkbox` from `~/components/Form/Checkbox` | | `<input type="checkbox">` (group) | `Checkboxes` from `~/components/Form/Checkboxes` | | `<input type="radio">` / radio group | `RadioButtons` from `~/components/Form/RadioButtons` | | `<select>` | `Select` from `~/components/Form/Select` | | `<textarea>` | `TextArea` from `~/components/Form/TextArea` | | Date (year/month/day) | `YearMonthDay` from `~/components/Form/YearMonthDay` | | Field wrapper (label + error + description) | `Field` from `~/components/Form/Field` |
Exceptions (native OK): `<input type="hidden">`, `<input type="file">`, `<input type="range">`.
Claude is raw power. GAIA is order and focus. The foundation that keeps Claude-shipped code production-grade as your team scales. The React frontend is handled. You build the rest of your app on top. Every convention enforced in code.
Repo: gaia-react/gaia
Other agents on gaia-react-gaia.
- code-audit-frontend
Comprehensive code review, security audit, performance analysis, and architectural assessment. Goes beyond linting and type-checking to identify vulnerabilities, bottlenecks, code smells, anti-patterns, and refactoring opportunities. Mandatory before PR merge.
Open agent - conform
- `@conform-to/zod` must **always** be imported from the `/v4` subpath. Flag any import from the bare `@conform-to/zod` package as **Critical**. The default export targets Zod v3 and causes a silent runtime failure, typecheck, lint, and build do not catch it.
Open agent - react-i18next
- Single `useTranslation()` call per component, flag multiple `useTranslation` calls in the same component - Namespace override via `{ns: 'other'}` as the second arg to `t()`, not separate `useTranslation` calls - Most-used namespace should be the one declared in
Open agent - tailwind-merge
- Import only from `tailwind-merge`, flag any use of `clsx`, `classnames`, or `cn` wrappers for class merging - `twJoin` when no class conflict is possible (internal construction, no incoming `className` prop) - `twMerge` when a consumer `className` prop or two conflict-eligible
Open agent - code-audit-github-workflows
Audits GitHub Actions workflow YAML and composite-action YAML for supply-chain, injection, permission, and secret-handling defects. Advisory-only (no self-heal). One member of the Code Audit Team gate.
Open agent - code-audit-maintainer-node
Maintainer-only audit of the framework Node/CLI TypeScript, its render templates and test snapshots, and the CLI build/config surface the roster grants it: correctness, error handling, filesystem/IO safety, Zod schema fitness, shell/gh injection safety, and
Open agent