From Code Pattern Skill
Apply this project's TypeScript and React conventions whenever implementing, refactoring, polishing, or reviewing any component, hook, page, form, table, store, service, or data flow — consult it BEFORE writing or editing such code, even when the task looks routine and the user never says "conventions" or "patterns". It owns the local standards for typing, domain modeling, async and UI state, forms and API calls, tables, styling, and component structure, and how to turn them into review findings. Reinforcing signals: Maybe, Result, RemoteData, Future, ts-pattern, discriminated unions, decoders/schemas, useForm, FormInput, DataTable, ColumnDef, cn()/cva(), named prop types, container/presentational split, and read-after-write projection delays.
How this skill is triggered — by the user, by Claude, or both
Slash command
/code-pattern:code-patternThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Apply project conventions when implementing, refactoring, or reviewing TypeScript and React code. Ground every change or review in existing patterns first.
references/core/react.mdreferences/core/tailwind.mdreferences/core/typescript-effects.mdreferences/core/typescript-modeling.mdreferences/examples/forms-api/campaigns.example.tsxreferences/examples/forms-api/endpoints.example.tsxreferences/examples/forms-api/forms.example.tsxreferences/examples/forms-api/request.example.tsxreferences/examples/forms-api/use-projection-delay.example.tsxreferences/examples/pages/cooperatives.example.tsxreferences/examples/tables/datatable-usage.example.tsxreferences/examples/tables/datatable.example.tsxreferences/examples/tables/table.example.tsxreferences/surfaces/forms-api.mdreferences/surfaces/pages.mdreferences/surfaces/tables.mdreferences/workflow.mdApply project conventions when implementing, refactoring, or reviewing TypeScript and React code. Ground every change or review in existing patterns first.
These hold on every TypeScript/React change here, regardless of surface — the spine of the conventions. Honor them even on a quick edit; each reference below owns the depth and the "why".
Maybe (not null/undefined/empty-object sentinels in the domain), Result (not try/catch for recoverable flows), RemoteData (not loose isLoading/isError flags), Future (not a raw Promise for app API calls); match with instanceof + satisfies never. → references/core/typescript-effects.mdmatch / switch-with-never; never as-cast or JSON.parse(x) as T — validate with a decoder/schema and derive the type from it. → references/core/typescript-modeling.mdXxxProps type per component; small, colocated, container/presentational split; UI state lives in the child that renders it; no reuse abstraction before ≥2 real call sites. → references/core/react.mdcn() / cva(), never inline style; sibling spacing is parent-owned gap-*, never margin / space-*; theme-scale utilities over arbitrary brackets. → references/core/tailwind.mduseForm + field config classes + FormInput; never add React Hook Form / Formik / Zod. → references/surfaces/forms-api.mdapi.* + call / query / uploadMultipart, handled with .fork at the boundary; never hand-roll fetch for a domain command/query. → references/surfaces/forms-api.mdRemoteData, guard double-submit, and defer read-after-write work through useProjectionDelay's schedule(). → references/surfaces/forms-api.mdDataTable / ColumnDef abstraction; don't re-implement sort / pagination / empty-state or pull a new data-grid dep when one exists. → references/surfaces/tables.mdRemoteData cell fed by a Future.fork in useEffect (return its Cancel); render every state with the instanceof … : satisfies never ladder. → references/surfaces/pages.mdreferences/workflow.mdBefore editing or writing review findings:
package.json. For a new file there's no target yet — read 1-3 nearby files in the same module or surface as the model instead.references/workflow.md first when the change touches shared or exported contracts, schemas, persistence, routes, or dependencies; spans more than one surface; involves unclear or conflicting local patterns; or changes behavior beyond the requested edit. That file owns the complete audit triggers, the stop-and-ask rules, and verification — treat it as the destination for non-local work, not a second gate to pass.Review mode: for a review request, do not edit. Read the same reference for the touched surface and report each violation of its Do / Do-not list as a concrete finding — file:line, the rule broken, and the fix.
Read only the reference selected by the touched surface. Each reference owns the prescriptive rules for its surface; load the narrowest one that fits.
| Touched surface | Reference |
|---|---|
| Shared workflow, full-workflow rules, audits, stop/ask, verification | references/workflow.md |
Types, unions, prop-as-types, entity/domain modeling, Id<T>, state machines, decoders/encoders/schemas, DTO parsing | references/core/typescript-modeling.md |
Absence (Maybe), errors (Result), async UI state (RemoteData), lazy async (Future) | references/core/typescript-effects.md |
Styling, Tailwind utilities, cn()/cva(), layout spacing | references/core/tailwind.md |
| Components, prop types, local state, scope, parent/child boundaries | references/core/react.md |
Forms / API / submit / Future.fork / read-after-write | references/surfaces/forms-api.md |
Tables / data grids / DataTable / columns / sorting | references/surfaces/tables.md |
Pages / screens / RemoteData state machine / layout shell | references/surfaces/pages.md |
Worked code examples live under references/examples, grouped by surface:
pagesforms-apitablesProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
npx claudepluginhub rafaeelricco/dotfiles --plugin code-pattern