From frontend-backend
FE↔DB column-name parity. Walks code, compares vs live Supabase schema, fixes drift in code (never silently renames a DB column). Triggers — "schema drift", "column missing", "field not saving", "shape mismatch", "FE/BE sync", PostgREST 400.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-backend:db-schema-syncThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **DB writes go through `db-guardian`.** Schema-sync work always touches DB scope, so the guardian applies any rename/migration; FE primaries propose via `dbProposals[]` and update consumers after the guardian publishes. For T3 multi-table syncs, fan out one quartet per table via `parallel-dispatch` plus one shared guardian.
DB writes go through
db-guardian. Schema-sync work always touches DB scope, so the guardian applies any rename/migration; FE primaries propose viadbProposals[]and update consumers after the guardian publishes. For T3 multi-table syncs, fan out one quartet per table viaparallel-dispatchplus one shared guardian.
Code field names MUST equal the DB column they map to. This skill catches and repairs drift.
Source of truth = the live Supabase schema. Code adapts to the DB, not the other way around. Only rename a DB column if the user explicitly asks — and then do it via a migration through the Supabase MCP, never with a hand-edited SQL file.
Use the Supabase MCP to read the current schema. Prefer the user-level connector if both are wired:
mcp__claude_ai_Supabase__list_tables # tables + columns + types
mcp__claude_ai_Supabase__list_migrations # to see what landed recently
If a project keeps a derived snapshot (e.g. .claude/docs/db-schema.md or lib/types/database.ts generated by supabase gen types), check whether it is fresher than the live read; if not, regenerate it before continuing.
For each table the user asks about (or all tables for a full audit), use the Grep tool (never Bash grep):
\.from\(['"]<table>['"]\) over **/*.{ts,tsx,js,jsx} — finds every Supabase query against this table.<table>\.\w+ — property accesses on returned rows.pickFields|select\(|insert\(|update\(|upsert\(|\.eq\(|\.match\(|\.order\( over app/api/**/route.ts — find columns named in writes/filters.lib/types/database.ts (or equivalent) with the Read tool for the generated row/insert/update types.Build a table in the response:
| Table | Column (DB) | Code ref site | Code name | Match? |
|---|
Flag every row where Code name !== Column (DB).
For each mismatch:
mcp__claude_ai_Supabase__apply_migration to create a ALTER TABLE ... RENAME COLUMN migration, and update all code to match.Use Edit / MultiEdit. Touch:
select, insert, update, pickFields whitelist).name= attributes if they are sent verbatim to the API.database.ts regeneration if it lags the live schema.npm run type-check — drift in types surfaces here first.npm run lint.verify skill or /verify command, route the claim through it.| Pattern | What it catches |
|---|---|
\.from\(['"]\w+['"]\)\.select\(['"] | Explicit column lists in select() |
pickFields\(.+,\s*\[ | Whitelist drift in API writes |
as\s+\w+:\s*['"]\w+['"] | as alias aliasing — watch for FE/BE divergence |
| camelCase ↔ snake_case translations | Never silently translate; alias explicitly or rename in code |
database.ts was not regenerated.pickFields whitelist forgot to add a new column, so writes silently drop it.End every run with:
type-check, lint, browser screenshot.npx claudepluginhub mobil3801/frontend-backend-plugin --plugin frontend-backendGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.