Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add rungchan2/frontend-skills --skill supabase-clientsgit clone --depth 1 https://github.com/rungchan2/frontend-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/rungchan2/frontend-skills/supabase-clients)<a href="https://agentmods.dev/skills/rungchan2/frontend-skills/supabase-clients"><img src="https://agentmods.dev/badge/skills/rungchan2/frontend-skills/supabase-clients/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/rungchan2/frontend-skills/supabase-clients"><img src="https://agentmods.dev/badge/skills/rungchan2/frontend-skills/supabase-clients.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00144 | $0.01114 |
| Opus 5 | $0.00072 | $0.00557 |
| Sonnet 5 | $0.00029 | $0.00223 |
| Haiku 4.5 | $0.00014 | $0.00111 |
Grade A, and why
supabase-clients scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 93 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Supabase 클라이언트 4종 세트
@supabase/ssr 기반 Next.js 프로젝트의 표준 클라이언트 분리.
왜 이 분리가 필요한가
| 환경 | 사용할 클라이언트 | 이유 |
|---|---|---|
'use client' 컴포넌트 / hooks |
client.ts의 createClient() |
브라우저 cookie에서 세션 읽기 |
| Server Component / Route Handler / Server Action | server.ts의 createClient() |
Next 서버 cookies API 사용 |
| Cron / Webhook / 관리자 작업 | service-role.ts의 createServiceRoleClient() |
RLS 우회 필요 |
| 모든 요청 진입점 (세션 갱신) | middleware.ts의 updateSession() |
세션 자동 갱신 + 보호 라우트 |
잘못된 클라이언트를 사용하면 세션이 안 잡히거나, RLS가 막거나, 브라우저에 service key가 노출되는 보안 사고로 이어진다.
워크플로우
1. 패키지 설치
pnpm add @supabase/ssr @supabase/supabase-js
2. 위치 결정
| 프로젝트 구조 | 베이스 경로 |
|---|---|
src/ 구조 |
src/lib/supabase/ |
| 루트 직접 | lib/supabase/ |
루트 middleware는 항상 프로젝트 루트의 middleware.ts.
3. 파일 생성
assets/ 안의 5개 파일을 다음과 같이 배치:
| asset | 대상 위치 |
|---|---|
client.ts |
lib/supabase/client.ts |
server.ts |
lib/supabase/server.ts |
service-role.ts |
lib/supabase/service-role.ts |
middleware.ts |
lib/supabase/middleware.ts |
root-middleware.ts |
middleware.ts (프로젝트 루트) |
⚠️
Database제네릭 타입은@/types/database.types에서 import. 이 파일이 없으면supabase:initial-setting스킬로 먼저 생성하거나, 임시로 import 라인을 주석 처리하고 나중에 채운다.
4. 환경변수 점검
.env.local에 다음이 있어야 한다:
NEXT_PUBLIC_SUPABASE_URL=https://...supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ... # 서버 전용. NEXT_PUBLIC_ 절대 금지.
없으면 사용자에게 안내하고 추가하도록 함.
5. 보호 라우트 커스터마이즈
assets/middleware.ts의 보호 정책은 /auth, /error 외 모든 경로 인증 필요가 기본값.
프로젝트마다 공개 페이지(/, /pricing 등)가 있을 수 있으니 사용자에게:
"현재 기본은
/auth,/error를 제외한 모든 경로에서 로그인을 요구합니다. 공개 페이지가 있다면 알려주세요 — 미들웨어에 화이트리스트로 추가하겠습니다."
6. CLAUDE.md 사용 규칙 (선택)
## Supabase 클라이언트 사용 규칙
- `'use client'` / hooks / store: `import { createClient } from "@/lib/supabase/client"`
- Server Component / Route Handler / Server Action: `import { createClient } from "@/lib/supabase/server"` (await 호출)
- Cron / webhook / 관리자 백그라운드 작업: `createServiceRoleClient()` (RLS 우회. 일반 요청 흐름 금지)
- 새 보호 라우트가 추가되면 `lib/supabase/middleware.ts`의 화이트리스트 검토
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 93 lines · 144 tokens per session scan A 6c7d9aad1dc2
supabase-clients is a skill published in the GitHub repository rungchan2/frontend-skills (2 stars, last pushed 4mo ago), licensed Apache-2.0. It adds 144 tokens to every session and 1,114 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
event-store-design
Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implementing event persistence patterns.
convex-explain-app
Explain an existing Convex app — data model + relationships, public vs internal functions, auth/ownership model, components, a request→data flow — read from the schema and function surface. Read-only.
platform-custom-field-generate
Use this skill when users need to create, generate, or validate Salesforce Custom Field metadata. Trigger when users mention custom fields, field types, Roll-up Summary fields, Master-Detail relationships, Lookup relationships, formula fields, picklists, dependent (controlling) picklists, referencing a value set from…
durable-objects
Build, debug, or review Cloudflare Durable Objects code for persistent state and coordination.
field-service-sobject-create-configure
Headless 360 REST API deployment step for creating sObject records. Handles describe-based field discovery, required-field derivation, entity-relationship ordering, and composite graph transactions. Use this skill when a designer skill (or a user directly) needs to create sObject records after design confirmation…
nornicdb-grpc
Drive NornicDB over gRPC — the Qdrant-compatible surface (Collections, Points, Snapshots) plus the additive NornicSearch service. Use when ingesting via Qdrant SDKs, migrating from Qdrant, or running hybrid text+vector search from a non-Bolt client. Covers connection, RPC catalog, collection→database mapping…