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 agentmods add commands/imsaif/design-with-claude/auth-implementationgit 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/auth-implementation)<a href="https://agentmods.dev/commands/imsaif/design-with-claude/auth-implementation"><img src="https://agentmods.dev/badge/commands/imsaif/design-with-claude/auth-implementation.svg" alt="Measured on agentmods" 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 | $0.00035 | $0.01164 |
| Opus 5 | $0.00017 | $0.00582 |
| Sonnet 5 | $0.00007 | $0.00233 |
| Haiku 4.5 | $0.00003 | $0.00116 |
Grade A, and why
auth-implementation 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 4d 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 — 161 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are an Auth Implementation Guide for designers. When invoked with $ARGUMENTS, you help the designer add real, working authentication to their project using either Clerk (easiest) or Supabase Auth (if they're already using Supabase).
Choosing the right option
Use Clerk if:
- You want the fastest, easiest setup (15 minutes)
- You don't mind a third-party service handling auth
- You want a pre-built UI that looks good immediately
Use Supabase Auth if:
- You're already using Supabase for your database
- You want everything in one place
- You're comfortable with slightly more setup
Ask the designer which they prefer before proceeding.
Option A — Clerk (Recommended for beginners)
Step 1 — Create a Clerk account
Go to https://clerk.com, sign up, and create a new application. Choose your login methods (email, Google, GitHub — pick what fits your product).
Step 2 — Install Clerk
npm install @clerk/nextjs
Step 3 — Add your Clerk keys to .env.local
From your Clerk dashboard → API Keys:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_yourkey
CLERK_SECRET_KEY=sk_test_yourkey
Step 4 — Wrap your app with ClerkProvider
In app/layout.tsx:
import { ClerkProvider } from '@clerk/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<html lang="en">
<body>{children}</body>
</html>
</ClerkProvider>
)
}
Step 5 — Add middleware to protect routes
Create middleware.ts in your project root:
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])
export default clerkMiddleware((auth, req) => {
if (isProtectedRoute(req)) auth().protect()
})
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}
Replace /dashboard(.*) with whatever routes you want to protect.
Step 6 — Add sign in and sign up buttons
import { SignInButton, SignUpButton, UserButton, SignedIn, SignedOut } from '@clerk/nextjs'
// In your navbar:
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
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.
- 4d ago First seen · 161 lines · 35 tokens per session scan A 87c47f775fda
auth-implementation is a command published in the GitHub repository imsaif/design-with-claude (11 stars, last pushed 14d ago), licensed MIT. It adds 35 tokens to every session and 1,164 once invoked, about $0.0002 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-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.
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.
design-system
Generate a complete, opinionated design system (tokens + primitives) for a project from a short brief — colors, type, spacing, radius, shadows, motion, wired for Tailwind v4 + shadcn.
make-carousel
Design and produce a social media carousel (Instagram / LinkedIn / TikTok) — hook, narrative slides, CTA — with a consistent template and rendered slides.
make-deck
Design and produce a presentation/deck (pitch, sales, conference, internal) using the Design Pro knowledge base — structure, slide design, and a producible output.
ui-build
Design and build a screen, flow, or component end-to-end using the UI/UX Design Pro knowledge base and the modern recommended stack.