Introducing Durable UI: The 30% That Vibe Coding Can't Teach You

Open any app you’ve built with AI in the last 6 months. Now do this:

Apply some filters on a list page
Hit refresh
Copy the URL and paste it in a new tab

If the filters are gone and the URL shows nothing — you’ve built a Vibe UI. It demos well. It falls apart the moment a real user touches it.

I’ve been shipping production apps with Sails.js and Inertia for years — Sailscasts, Hagfish, and others — and I keep running into the same class of bugs. In every UI I interact with — vibe coded or not, made by a solo builder or a big engineering team. The bugs are always the same:

Filters reset on refresh. Users apply 4 filters, hit F5, start over.
URLs say /dashboard and nothing else. Can’t share. Can’t debug. Can’t reproduce.
The back button destroys form progress. Four steps of input, gone.
Sidebars reopen on every page load. The user closes it. It reopens. A loop that should not exist.
Dropdowns don’t close when you press Escape or click outside them.

These aren’t edge cases. This is the default output of AI-generated UI code. And it’s getting worse, not better.

The Decision AI Can’t Make

CodeRabbit analyzed thousands of pull requests: AI co-authored code has 1.7x more major issues and up to 2.74x more security vulnerabilities. 16 of 18 CTOs reported production disasters from AI-generated code.

Why? Because AI is excellent at generating code and terrible at making placement decisions.

An LLM generates a ref() in milliseconds. What it cannot do is answer: “Given this piece of state, where should it live?”

That single question — state placement — is the difference between a UI that demos well and one that survives real users. And no course anywhere teaches it. I checked Frontend Masters, Egghead, Udemy. Every state management course teaches a library (Redux, Pinia, Zustand). Nobody teaches the decision.

What Durable UI Is

Building Durable UIs in the Era of Vibe Coding is a new course on Sailscasts. It teaches the engineering judgment that sits between “the code works” and “the product survives.”

The core framework is the State Placement Map:

State Type	Where It Lives	Example
Shareable	URL query params	Filters, search, pagination
User preference	localStorage	Sidebar state, theme, column order
Session	Memory	Form draft in progress, modal open
Server truth	Database / API	User data, invoices
Derived	Computed, not stored	Filtered list, totals

One question drives every decision: “If someone else clicks this link, should they see this state?”

Yes → URL.
Persist across sessions, not shareable → localStorage.
Ephemeral → memory.
Source of truth → server.
Calculable from other state → derived. Don’t store it.

You’ll build real composables during the course — useDurableUrl(), useDurableStorage(), useFormDraft(), useWizardDraft(), useClickOutside() — tools that don’t exist anywhere else in the Vue + Inertia ecosystem. The patterns behind them translate directly to React hooks, Svelte stores, or Angular signals.

// Vibe UI
const filters = ref({}) // gone on refresh. can't share. invisible.

// Durable UI
const filters = useDurableUrl('status', {
  default: [],
  server: true,
}) // survives refresh. shareable. debuggable.

The course also ships with a Durable UI skill for Claude Code. Install it, and when you ask Claude to add filters or a sidebar, it makes the right placement decision by default. The course and the skill evolve together.

Start Testing Today

You don’t need the course to start. Run these five checks on any app you’re building right now:

1. The URL Audit. Open every page in your app. Does the URL encode the view state? If /dashboard looks different depending on filters but the URL doesn’t change — that’s a durability bug.

2. The Refresh Test. On every page with interactive state, hit refresh. Whatever resets is state in the wrong place.

3. The Shareability Test. Copy the URL and open it incognito. Does the other person see what you see? If not, you have shareable state trapped in memory.

4. The Back Button Contract. Navigate away from any form. Hit back. Is the user’s work preserved?

5. The Cleanup Check. Open a dropdown. Navigate away without closing it. Come back. Is the listener still attached?

These five checks surface 80% of durability issues in any app. The course teaches you how to fix every one of them — and how to build so they never happen in the first place.

Early Access Is Open

The first 1,000 Founding Vibe Coders get the course at $59.99 (one-time, lifetime). Nigerian developers can pay ₦29,500 via Paystack. Price goes up to $99.99 after that.

11 chapters. 60 episodes. All composable source code. A Claude Code skill. Released weekly.

You don’t need to use The Boring JavaScript Stack. The mental models — State Placement, Shareability Test, Back Button Contract — work in any framework. Vue is used for examples. The thinking is universal.

Get Early Access →

“If your UI can’t survive a refresh, it’s not real.”

Next read: Durable UI Patterns — the 8 patterns behind durable interfaces, with code examples and a checklist you can use today.