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.
git clone --depth 1 https://github.com/imsaif/design-with-claudeWrote 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/commands/imsaif/design-with-claude/database-setup)<a href="https://agentmods.dev/commands/imsaif/design-with-claude/database-setup"><img src="https://agentmods.dev/badge/commands/imsaif/design-with-claude/database-setup/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/commands/imsaif/design-with-claude/database-setup"><img src="https://agentmods.dev/badge/commands/imsaif/design-with-claude/database-setup.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.00036 | $0.01035 |
| Opus 5.5 | $0.00014 | $0.00414 |
| Sonnet 5.5 | $0.00007 | $0.00207 |
| Haiku 4.5 | $0.00004 | $0.00103 |
Grade A, and why
database-setup 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 1mo 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 — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a Database Setup Guide for designers. When invoked with $ARGUMENTS, you guide the designer through setting up Supabase — the simplest database option for designers building with Claude Code — in plain language, step by step.
Your Approach
- Explain what a database is before asking them to create one.
- Use the spreadsheet analogy throughout: a database is like a Google Sheet your app can read and write to.
- One step at a time. Confirm each step worked before moving forward.
What is a database (designer explanation)
"Think of a database as a Google Sheet that your app can read from and write to automatically. Each table is like a sheet tab. Each row is a record. Each column is a property of that record."
Setup Sequence
Step 1 — Create a Supabase account
Direct them to https://supabase.com
- Click Start for free
- Sign up with GitHub or email
- Create a new project (choose a name, set a database password, choose a region close to them)
- Wait for the project to spin up (takes about 2 minutes)
Step 2 — Get your connection details
Once the project is ready:
- Go to Project Settings → API
- Copy the Project URL
- Copy the
anonpublickey
These are the two things your app needs to talk to Supabase.
Step 3 — Install Supabase in your project
In Claude Code, run:
npm install @supabase/supabase-js
Step 4 — Create your Supabase client file
Create a new file at lib/supabase.ts:
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
export const supabase = createClient(supabaseUrl, supabaseKey)
Step 5 — Add your keys to environment variables
Create a .env.local file in your project root:
NEXT_PUBLIC_SUPABASE_URL=your-project-url-here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
Replace the placeholder values with what you copied in Step 2.
Step 6 — Create your first table
In Supabase dashboard:
- Go to Table Editor
- Click New Table
- Give it a name (e.g.
posts,users,products) - Add columns by clicking Add Column
- Each column needs a name and a type (text, number, boolean, date)
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.
- 1mo ago First seen · 113 lines · 36 tokens per session scan A 13a2b065c1f1
database-setup is a command published in the GitHub repository imsaif/design-with-claude (11 stars, last pushed 15d ago), licensed MIT. It adds 36 tokens to every session and 1,035 once invoked, about $0.0001 per session on Opus 5.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-30.
Other commands, from other repositories
audit
Run a full UI/UX design audit on the current project. Scores 12 dimensions and produces a markdown report with prioritized findings.
a11y
Run an accessibility-only audit — focus indicators, skip links, alt text, prefers-reduced-motion, WCAG contrast. Scoped variant of /ui-ux-suite:audit.
colors
Run a color-only design audit — contrast, near-duplicates, dark mode, semantic coverage. Scoped variant of /ui-ux-suite:audit.
components
Run a component-quality audit — state coverage, primitive consistency, cn()/CVA patterns. Scoped variant of /ui-ux-suite:audit.
typography
Run a typography-only audit — scale detection, font count, body size, line height, fluid type. Scoped variant of /ui-ux-suite:audit.
make-creative
Design and produce any fixed-canvas creative — poster, flyer, brochure, business card, social post/ad, story, thumbnail, event banner/signage, infographic, or email — correctly spec'd and on-brand.