Using Cline to Fix Vibe Code (Slop will be a $100M) Industry

Show Notes

Parker dives into using Claude (Kine) to diagnose and fix a vibe-coding misstep around auth and migrations with Supabase, then walks through a practical, plan-first approach to getting back on track. It’s messy, hands-on, and shows how to tame chaos with a disciplined workflow.

The Lincoln Method in Action

• Adopts the Abraham Lincoln principle: plan before you code. Allocate time to plan (roughly 2/3) and use the rest to execute.
• Applies this to messy dev work, especially when auth, DB migrations, and CI environments collide.
• Demonstrates how a simple planning mindset can prevent “vibe coding” chaos from spiraling.

The Challenge: Vibe Coding with Auth and DB

• Wanted an end-to-end blog CMS integration with MDX notes, docs, and a DB, but hit barriers with:
  • Migration drift between local and remote environments
  • Auth flow and admin role setup
  • Complex migrations piling up in the repo
• Immediate goal: test if Claude/Kine can autonomously inspect and fix a migration/auth issue, not just chat about it.

Tools in Play

• Claude (Dev) now rebranded as Klein (Kine) for agentic task execution
• Plan → Act loop to drive the work (with real-time cost tracking)
• Local Docker-based Supabase stack to mirror remote
• Browser tools baked into the agent for live testing
• Doc rocker concept: auto-summarize and generate docs from URLs to speed up research
• Repo Mix (formerly Repo Pack): grouping migrations into manageable chunks

The Debugging Workflow (Plan, Act, Verify)

• Start with a broad plan: identify where migrations diverge and how the auth flow is wired.
• Use Klein to:
  • Inspect local vs remote migrations
  • Run migrations step-by-step and monitor outputs (including costs per request)
  • Update middleware to use getUser/getSession appropriately
  • Replace deprecated utilities with the newer client/server patterns
• Act iteratively:
  • The agent makes changes, runs migrations, tests sign-in, and logs results
  • It surfaces TypeScript errors and cookie timing issues to fix
• Verify live:
  • Browser-based checks for login, admin routes, and content (posts)
  • Check cookies handling and SSR/CSR boundaries
  • Ensure admin creation and RBAC checks are secure (only specific email can be admin)

Migration Cleanup & RBAC: Fixes Implemented

• Diagnosed multiple identical migrations and conflicting schema changes
• Cleaned up local migrations and reset the DB state
• Consolidated migrations into a clean, single path for push
• Added guard logic to prevent overwriting existing structures
• Implemented per-user session logic via middleware (getUser + getSession)
• Created an admin path and RBAC logic so only a specific account can be elevated
• Used a “master schema” approach to avoid drift when pushing remote migrations

Code/structure notes (conceptual):

• Use CREATE TABLE IF NOT EXISTS and similar guards to prevent duplicate objects
• Implement RBAC checks in code (example pattern)
  • isAdmin(user) => user.email === "me@parkerx.com"
• Consolidate migrations into a single, testable file when possible

Local Testing Flow: Admin Sign-up, Posts, Cookies

• Started locally with a clean state to test the admin flow
• Verified sign-up flow and admin access, then tested post creation and retrieval
• Noted how cookie timing can affect session initialization; waited for cookies to be ready before use
• Confirmed admin-only paths work and that regular users cannot access admin features

Practical tip: test cookies and session timing explicitly in your local flow to avoid race conditions in auth checks.

Cost & Performance Notes

• The plan/act workflow exposes token/compute costs in real time, which helps avoid runaway AI usage.
• Compared to Claude Code, the approach is more cost-aware and controllable, albeit more hands-on.
• The real value is not just automation, but guided, bounded automation with human oversight.

Takeaways & Practical Tips

• Plan first, then act. Use the Lincoln ratio to stay efficient.
• Lower the barrier to entry to build sustainable habits (e.g., quick-record workflows, doc-rockers) so you actually ship.
• When dealing with migrations:
  • Keep local and remote environments in sync
  • Consolidate migrations to reduce duplication
  • Use guards like IF NOT EXISTS to prevent destructive overwrites
• Embrace a doc-rocker approach: generate docs from research URLs to accelerate learning and consistency
• Use strict linting and governance (RBAC checks, robust policies) to prevent ad-hoc mistakes
• Treat vibe coding as a learning process; use it to build repeatable patterns rather than one-off hacks

Next Steps / Series Idea

• This is a hands-on, uncut look at tackling real-world onboarding and maintenance work with AI-assisted tooling.
• Potential follow-ups: deeper dive into RBAC in Next.js apps, more on doc-rockers, and a clean-room guide to robust migration hygiene.

Links

• Cline AI assistant for dev workflows
• Supabase (Postgres-backed backend)
• Next.js (App Router, server components)
• Docker (local dev environment)
• Repo Mix (migration consolidation concept)
• RBAC concepts in web apps
• Doc rocker concept for auto-generating docs from research sources

If you’ve got questions or want more detail on any step, drop a comment and I’ll expand on that part in the next update.