Synthèse automatique
Cette skill guide le développement backend avec Supabase : configuration du client, authentification, requêtes Postgres, politiques RLS, stockage et Realtime, avec des recommandations de performance.
Points forts
- Couvre les briques essentielles de Supabase (auth, base de données, storage, realtime) avec des extraits TypeScript directement réutilisables
- Accorde une vraie place aux politiques RLS et explique comment les écrire sans sous-requêtes coûteuses
- Fournit des conseils Postgres concrets : index partiels et composites, types de données, EXPLAIN ANALYZE, pagination par curseur
- Rappelle les pièges de production comme le pooler Supavisor en serverless et l'évitement de SELECT *
Limites
- Ne traite ni les migrations via la CLI Supabase, ni les Edge Functions, ni l'intégration SSR avec @supabase/ssr
- Les exemples de code restent minimaux : pas de gestion d'erreurs, de validation ni de typage des réponses
- Le document est tronqué à la section sur la pagination par curseur, qui n'est pas développée
À utiliser lorsqu'on met en place ou révise l'authentification, le schéma, les politiques RLS ou les performances Postgres d'un projet Supabase.
À éviter si le besoin porte sur les migrations CLI, les Edge Functions ou l'authentification côté serveur avec cookies, que la skill ne couvre pas.
Analyse de sécurité
SûrThe skill provides reference code and best practices for Supabase development. It does not instruct destructive actions, exfiltration, or obfuscated payloads. Allowed tools include Bash, but no shell commands are embedded in the skill content, and the SQL/TypeScript examples are legitimate development guidance.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Set up Supabase authentication in my Next.js app with email/password sign-up plus Google OAuth, and add a sign-out button.Write RLS policies for my profiles table so users can only select and update their own row, and make sure they don't use slow subqueries.My orders queries are slow on Supabase — review the schema, add the right indexes, and switch the list endpoint to cursor-based pagination.name: dev-supabase description: Backend development with Supabase. Trigger when the user wants to configure auth, the database, or Supabase storage. allowed-tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep context: fork
Supabase Development
Configuration
import { createClient } from '@supabase/supabase-js';
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
Authentication
// Sign up
await supabase.auth.signUp({ email, password });
// Sign in
await supabase.auth.signInWithPassword({ email, password });
// OAuth
await supabase.auth.signInWithOAuth({ provider: 'google' });
// Sign out
await supabase.auth.signOut();
Database with RLS
-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
-- Policy: users can read own data
CREATE POLICY "Users read own profile"
ON profiles FOR SELECT
USING (auth.uid() = id);
-- Policy: users can update own data
CREATE POLICY "Users update own profile"
ON profiles FOR UPDATE
USING (auth.uid() = id);
Queries
// Select
const { data } = await supabase
.from('profiles')
.select('*')
.eq('id', userId);
// Insert
await supabase.from('profiles').insert({ name, email });
// Update
await supabase.from('profiles').update({ name }).eq('id', userId);
// Delete
await supabase.from('profiles').delete().eq('id', userId);
Storage
// Upload
await supabase.storage.from('avatars').upload(path, file);
// Get URL
supabase.storage.from('avatars').getPublicUrl(path);
Realtime
supabase
.channel('messages')
.on('postgres_changes', { event: 'INSERT', table: 'messages' }, callback)
.subscribe();
Postgres Performance Best Practices
Critical priority: Query Performance
-- ALWAYS use indexes on filtered columns
CREATE INDEX idx_profiles_email ON profiles(email);
CREATE INDEX idx_orders_user_id ON orders(user_id);
CREATE INDEX idx_orders_created_at ON orders(created_at);
-- Partial index for frequent queries
CREATE INDEX idx_active_users ON profiles(id) WHERE is_active = true;
-- Composite index for multi-column queries
CREATE INDEX idx_orders_user_status ON orders(user_id, status);
-- ANALYZE slow queries
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 'xxx';
Critical priority: Connection Management
// USE Supabase's connection pooling (Supavisor)
// In Transaction mode for serverless
const supabase = createClient(url, key, {
db: { schema: 'public' },
auth: { persistSession: true },
});
// AVOID direct connections in serverless
// Always use the pooler (port 6543 instead of 5432)
High priority: Schema Design
-- Correct data types (no VARCHAR when UUID is enough)
CREATE TABLE orders (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID NOT NULL REFERENCES profiles(id),
total_cents INTEGER NOT NULL, -- Not FLOAT for amounts
status TEXT NOT NULL DEFAULT 'pending',
metadata JSONB DEFAULT '{}', -- JSONB not JSON
created_at TIMESTAMPTZ DEFAULT now()
);
-- Avoid SELECT * in production
-- Specify the necessary columns
const { data } = await supabase
.from('orders')
.select('id, status, total_cents') -- NOT '*'
.eq('user_id', userId);
Medium priority: Security & RLS
-- Performant RLS: avoid subqueries in policies
-- GOOD: direct comparison
CREATE POLICY "own_data" ON orders
FOR ALL USING (user_id = auth.uid());
-- BAD: subquery in the policy (slow)
CREATE POLICY "team_data" ON orders
FOR ALL USING (
user_id IN (SELECT member_id FROM team_members WHERE team_id = current_setting('app.team_id'))
);
-- BETTER: use a JWT claim
CREATE POLICY "team_data" ON orders
FOR ALL USING (
team_id = (auth.jwt() -> 'app_metadata' ->> 'team_id')::uuid
);
Medium priority: Data Access Patterns
-- Cursor-based pagination (not OFFSET for large tables)
-- GOOD: cursor-based
const { data } = await supabase
.from('orders')
.select('*')
.gt('created_at', lastSeenDate)
.order('created_at', { ascending: true })
.limit(20);
-- BAD: offset-based (slow on large tables)
const { data } = await supabase
.from('orders')
.select('*')
.range(1000, 1020); // Scans 1020 rows
Monitoring
-- Slowest queries
SELECT query, calls, mean_exec_time, total_exec_time
FROM pg_stat_statements
ORDER BY mean_exec_time DESC
LIMIT 10;
-- Tables without index used
SELECT relname, seq_scan, seq_tup_read
FROM pg_stat_user_tables
WHERE seq_scan > 100
ORDER BY seq_tup_read DESC;
-- Unused indexes
SELECT indexrelname, idx_scan
FROM pg_stat_user_indexes
WHERE idx_scan = 0;
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/supabase-development-mryiqgy1/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/supabase-development-mryiqgy1' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/supabase-development-mryiqgy1/download' --output '.skill-downloads/supabase-development-mryiqgy1/SKILL.md.part' && mv '.skill-downloads/supabase-development-mryiqgy1/SKILL.md.part' '.skill-downloads/supabase-development-mryiqgy1/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && test -s '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/dev-supabase' && cp -R '.skill-downloads/supabase-development-mryiqgy1' '.claude/skills/dev-supabase'Cursor
test -f '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && test -s '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/dev-supabase' && cp -R '.skill-downloads/supabase-development-mryiqgy1' '.cursor/skills/dev-supabase'Codex
test -f '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && test -s '.skill-downloads/supabase-development-mryiqgy1/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/dev-supabase' && cp -R '.skill-downloads/supabase-development-mryiqgy1' '.agents/skills/dev-supabase'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/supabase-development-mryiqgy1'openskills read 'supabase-development-mryiqgy1'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/supabase-development-mryiqgy1/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.