mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 18:11:51 +08:00
d845768fcf
Adds a Claude skill encoding correct React Hook Form usage, so
AI-written form code follows best practices instead of copying the
anti-patterns common in older Studio code (prop-form
`form.watch()`/`formState` subscriptions, subscription-only watches,
unguarded `valueAsNumber`, `?? undefined` controlled values, defaults
computed from unloaded queries).
**Added:**
- `.claude/skills/react-hook-form/SKILL.md` — subscription model
(`useWatch`/`useFormState` with `control`), canonical zod + `FormField`
composition (layout deferred to `studio-ui-patterns`), `values:` option
for async data, null normalization for controlled inputs, number-input
handling, dirty-state and gating rules, plus a fix-what-you-touch policy
aligned with the `no-use-watch` lint ratchet
**Changed:**
- `.claude/CLAUDE.md` and `apps/studio/CLAUDE.md` — register the skill
in the skill lists/table
- `.coderabbit.yaml` — add the skill to the existing Studio
code-guidelines entry so CodeRabbit applies it when reviewing Studio
code
Benchmarked on three real form tasks (adding a live-updating field to
`ThroughputField`, a new sheet form with async + nullable data, a
review-changes step in `EditBucketModal`), each run with and without the
skill: 13/13 assertions with the skill vs 8/13 baseline. The baseline
shipped a genuine bug in one task — a `null` server default flowed into
a `''` its own schema rejected, making Save unreachable — which the
skill run avoided.
## To test
- Ask Claude Code to add a field to any Studio form and check it loads
the skill (it's in the studio CLAUDE.md skill table) and uses
`useWatch({ control, name })` rather than `form.watch`
- Skim `SKILL.md` for anything that contradicts current form conventions
— `apps/design-system` demos remain the layout source of truth
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Added a new monorepo “react-hook-form” skill guide with recommended
patterns for safe form subscriptions, wiring, default values,
reset/submission flows, and common anti-patterns.
* Updated Studio skills/load guidance to expand and reorder the skills
matrix, including form logic and copywriting guidance.
* Updated required skill coverage so `react-hook-form` is included for
any form-related work.
* **Chores**
* Expanded automated review enforcement so Studio form code is checked
against the new “react-hook-form” skill guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
93 lines
5.3 KiB
YAML
93 lines
5.3 KiB
YAML
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
|
|
|
|
# Don't inherit organization-level settings (they're tuned for other repos);
|
|
# this config is self-contained and unset values use CodeRabbit defaults.
|
|
inheritance: false
|
|
|
|
# Enrich linked issues with related code and potential solutions during review.
|
|
issue_enrichment:
|
|
auto_enrich:
|
|
enabled: true
|
|
|
|
reviews:
|
|
# Skip machine-generated / vendored files (mirrors .prettierignore). Keeps
|
|
# reviews focused on hand-written code and preserves rate-limit budget on
|
|
# large codegen diffs.
|
|
path_filters:
|
|
- '!pnpm-lock.yaml'
|
|
- '!packages/api-types/types/**' # generated API types (api.d.ts, platform.d.ts)
|
|
- '!supabase/functions/common/database-types.ts' # generated by `pnpm generate:types`
|
|
- '!**/routeTree.gen.ts' # TanStack Router generated
|
|
- '!**/__generated__/**'
|
|
- '!apps/docs/features/docs/generated/**'
|
|
- '!apps/www/.generated/**'
|
|
- '!apps/design-system/__registry__/**'
|
|
- '!apps/ui-library/__registry__/**'
|
|
- '!apps/ui-library/public/r/**' # registry output
|
|
- '!packages/icons/__registry__/**'
|
|
- '!packages/icons/src/icons/**' # generated icon components
|
|
|
|
# Targeted, path-scoped review guidance, version-controlled alongside the code.
|
|
path_instructions:
|
|
- path: 'packages/common/telemetry-constants.ts'
|
|
instructions: |
|
|
Strictly enforce event naming: [object]_[verb] in snake_case. Only approved
|
|
verbs: opened, clicked, submitted, created, removed, updated, retrieved,
|
|
intended, evaluated, added, enabled, disabled, copied, exposed, failed,
|
|
converted. Properties must be camelCase for new events (match existing
|
|
convention when adding to existing events). Flag any usage of
|
|
useSendEventMutation. Verify @group Events and @source JSDoc tags are
|
|
accurate. Check that new interfaces are added to the TelemetryEvent union type.
|
|
- path: 'apps/studio/components/**/!(*.test).tsx' # production components only, not tests
|
|
instructions: |
|
|
Only suggest adding PostHog event tracking (via useTrack from
|
|
lib/telemetry/track, [object]_[verb] snake_case) when a new user-facing
|
|
interaction is growth-relevant: e.g. first-use of a feature, onboarding steps,
|
|
project/org creation, upgrade/billing actions, enabling or disabling a product
|
|
feature, or any action that signals activation or retention. Do not suggest
|
|
tracking for: passive views, page loads, UI-only state changes (e.g. expanding
|
|
a panel, switching tabs in a settings page), developer/internal tooling
|
|
interactions, or interactions clearly unrelated to product adoption.
|
|
- path: 'apps/studio/pages/**'
|
|
instructions: |
|
|
Studio is mid-migration from the Next.js pages router (apps/studio/pages/**)
|
|
to TanStack Start (apps/studio/routes/**). Both runtimes ship side-by-side, so
|
|
every URL served from pages/** has a mirror in routes/**. See
|
|
apps/studio/TANSTACK_MIGRATION.md for the full route map and strategy.
|
|
Leave a comment reminding the author to check whether this change needs to be
|
|
mirrored into the corresponding apps/studio/routes/** file so the two builds
|
|
don't silently drift:
|
|
- Most route files re-export the page's default export (Path A), so pure
|
|
page-body edits propagate automatically — no mirror needed.
|
|
- A mirror IS needed when the change touches something the route file
|
|
duplicates rather than imports: getLayout / layout wrapping, page title or
|
|
other props the route encodes as staticData, withAuth / auth gating, or the
|
|
route/redirect path itself.
|
|
- A brand-new page under pages/** needs a matching new route under routes/**
|
|
(and a checklist entry in apps/studio/TANSTACK_MIGRATION.md).
|
|
- Do NOT suggest deleting the pages/** file — the Next file stays load-bearing
|
|
for both runtimes until the final cleanup pass (tracked in FE-3106).
|
|
Keep this a reminder to verify, not a hard blocker: if no mirror is required,
|
|
say so briefly rather than forcing a change.
|
|
|
|
# Applies our internal engineering skills (.claude/skills/) as CodeRabbit review
|
|
# guidelines. The skills are the single source of truth — they are consumed
|
|
# directly, with no copy of their content elsewhere.
|
|
#
|
|
# `applyTo` decouples where a guideline file lives from the code it governs.
|
|
# Without it, CodeRabbit scopes a guideline file to its own directory and below;
|
|
# our skills live in .claude/skills/, which contains no code, so they would never
|
|
# reach apps/studio. `applyTo` points them at the right paths instead.
|
|
knowledge_base:
|
|
code_guidelines:
|
|
filePatterns:
|
|
# Studio code conventions — React/TS, UI patterns, composition, data fetching, errors
|
|
- files: '.claude/skills/{studio-best-practices,studio-ui-patterns,vercel-composition-patterns,studio-queries,studio-error-handling,react-hook-form}/SKILL.md'
|
|
applyTo: 'apps/studio/**/*.{ts,tsx}'
|
|
# Studio unit / component test conventions
|
|
- files: '.claude/skills/{studio-testing,studio-mock-api-tests}/SKILL.md'
|
|
applyTo: 'apps/studio/**/*.test.{ts,tsx}'
|
|
# Studio end-to-end (Playwright) test conventions
|
|
- files: '.claude/skills/studio-e2e-tests/SKILL.md'
|
|
applyTo: 'e2e/studio/**/*.spec.ts'
|