Most designers ship Figma files. I ship apps. SkillIssue is a live social challenge app where friends stake real money on dares, submit photo proof, and approve or reject each other. Every rupee tracked forever. Stake it, or shut up.

SkillIssue is a complete, shipped product with everything a real app needs — and I designed and built all of it.

• Frontend — 74 React components across 20 routed pages, dark-themed, fully responsive
• Backend — 11-table Postgres schema with foreign keys, indexes, triggers, and RLS on every table
• Auth — Google OAuth + email/password via @supabase/ssr
• Realtime — Subscriptions on every key table, no refresh buttons anywhere
• Storage — Structured buckets for proof uploads (photos, payment receipts)
• Scheduled jobs — Edge function processes expired challenges on a cron
• Deployed — Vercel with full CI/CD, auto-deploys on every push

Agentic coding writes code, but every UX decision — every layout, every interaction, every empty state, every micro-delight — is a designer's call. Here's what I decided:

Every key page subscribes to Supabase realtime. Your dashboard updates the moment a friend sends you a dare. Your approval inbox updates when new proof lands. The notification bell never needs a refresh. It's not a technical flex — it's a design principle. The app feels alive because I designed it to.

Every user gets a unique color hashed from their user ID. Their nickname renders in that color everywhere in the app — in challenge cards, notifications, comparisons, ledgers. You recognize your friend at a glance without reading the name. Design system thinking applied to user data.

"Your squad is empty — add a friend to start daring." The product voice runs through every empty state, every loading state, every error. The app has a personality, and it shows up everywhere.

When all tasks in a challenge get approved, the challenge flips to "completed" automatically — no "Mark Complete" button. The system just knows. UX invisibility is the goal: the fewer decisions users have to make, the better the product feels.

Not generated defaults. A real design system, intentional from the first token to the last component.

Three typefaces, each with a job: Fraunces (display) with SOFT axis tweaks for headings — warm, slightly unusual, never generic SaaS. Inter (body) for readable, boring-in-the-best-way paragraph text. JetBrains Mono for timestamps and amounts — so numbers always feel mechanical and trustworthy.

Dark theme by default. Brand accent for "ISSUE" in the wordmark. Status colors for challenge states (pending, active, completed, failed, rejected). Every user gets a unique hash-derived color that persists across every screen.

Built on shadcn/ui + Radix primitives, extended with product-specific components: StakeAmount, Rupees, StatusBadge, CountdownTimer, ChallengeCard, ApprovalCard, PaymentApprovalCard, FriendCard, SharedFundCard. Each designed for a specific role, composable throughout the app.

SKILLISSUE. One word. SKILL in regular, ISSUE in brand accent. Tagline: "Stake it, or shut up." The voice is witty, direct, confrontational-but-friendly. It had to feel like the group chats it replaces.

I pick tools the way I pick design systems — intentionally. Every piece was chosen for a reason:

Agentic coding isn't "asking ChatGPT for code." It's closer to being a tech lead who manages AI engineers than a developer who types. Here's how I actually build:

Before a single line of code, I write the PRD. Every flow, every page, every edge case — specified down to field lengths and error states. That document becomes the constitution. Every AI conversation references which section it's touching. No guessing, no drift.

A CLAUDE.md at the project root encodes every rule — brand name, currency format, auth pattern, realtime hook, naming conventions, component structure. Every new session starts with that context loaded. Every feature built the same way, without re-explaining the project ten times.

I don't tell Claude what code to write. I describe what the feature should DO. The AI proposes the implementation — React Hook Form schema, Zod validators, UI, database column constraints. I review, point out what feels off, iterate.

Multiple features built in parallel sessions. One agent on the approval flow, one on the friend graph, one on the comparison page. Each with clear scope, clear context, clear output.

I review every generated line before commit. Not to edit it — to understand it. That's how I learned Postgres RLS, realtime subscriptions, server components, middleware auth. I don't need to write SQL from scratch. I need to know what my app is doing.

Shipping real products means making engineering tradeoffs — not just design ones. Here are the calls I made:

Every app in this space tries to hold money — which means compliance, KYC, reconciliation, support, refunds. Weeks of work. I consciously didn't. SkillIssue tracks the agreement and the receipt. Money moves via UPI or bank transfer outside the app, screenshot gets uploaded, recipient approves, logged to the shared ledger. 90% of the value, 10% of the complexity.

When all tasks in a challenge get approved, the challenge flips to completed automatically — via a Postgres trigger, not app code. When a challenge fails, a trigger creates the fund obligation, notifications, and updates the shared ledger — all in one transaction. The app layer stays thin; the database does the heavy lifting reliably.

The /compare view shows head-to-head stats between you and any friend — sent, received, completed, failed, approval rate, net ledger. Who owes whom. Who's winning. Who's a coward. This page doesn't add functionality — it adds reason to come back. Designed to be the most-shared screenshot from the app.

• A working, monetized, realtime social product — built solo, deployed to production
• Used with real friends on real dares with real money
• Full stack owned — design, UX, system, frontend, backend, database, infrastructure
• A repeatable workflow for shipping future products the same way, faster

1. Designers can ship full-stack products. The key isn't learning to code — it's learning to direct agentic coding like a tech lead.
2. The designer makes all the meaningful calls. AI writes the code. I design the product, the UX, the system, the voice.
3. The PRD is the constitution. Write it before writing anything else.
4. Scope reduction beats feature engineering. The decision NOT to hold money was worth more than any feature I shipped.
5. Convention files are the difference between AI-assisted chaos and production-grade consistency.
6. Reading generated code is how I learned the stack. Not writing. Reading.
7. The ceiling on what a designer can build is higher than anyone realizes.