[{"_1":2,"_30":-5,"_31":-5},"loaderData",{"_3":4},"routes/post",{"_5":6},"post",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":19,"_20":12,"_21":22,"_28":29},"slug","react-router-agentic-way","title","Beyond the Static: Rebuilding with React Router 7 and AI Agents","description","How I broke a two-year development hiatus by leveraging agentic workflows to migrate from 11ty to a modern React Router 7 architecture.","date","1 March 2026","image","/images/uploads/react-router-agentic-way/header2.png","featuredImage","author","Hanut S. Gusain","excerpt","tags",[23,24,25,26,27],"react-router","ai","agentic-workflow","migration","typescript","html","

The Pivot: From Stagnation to Momentum

For two years, my personal site was a time capsule. After a significant health event in early 2023, my \"developer energy\" was rightfully diverted toward recovery. The site—a dependable but static 11ty build—sat untouched on GitHub, displaying content that felt increasingly like a distant memory.

It wasn’t a lack of interest; it was the mental friction of a full rebuild. When your physical and mental energy is capped, the \"scaffolding tax\"—the hours spent wrestling with configs, routing, and boilerplate—becomes an insurmountable wall.

By late 2025, the math changed. I started experimenting with Claude Code and agentic workflows. I realized the barrier wasn't my ability—it was the overhead. I decided to migrate to React Router 7, not by grinding through the manual labor, but by acting as an architect while an AI agent acted as my lead engineer.

Why 11ty Wasn’t Enough Anymore

11ty is a masterpiece of simplicity, but my needs had outgrown the static paradigm. I wanted a site that felt like an application, not just a document collection.

Interactivity Bottlenecks: Adding dynamic features like complex Framer Motion transitions felt like swimming upstream in a purely static environment.
The \"Context\" Problem: I wanted a unified TypeScript environment where my frontend components and backend loaders shared the same types.
The Goal: A platform where I could rapidly iterate on design patterns and add dynamic features (like real-time reading estimates) without full site rebuilds.

The Agentic Workflow: Architecture by Instruction

Instead of manually wiring up every piece, I utilized an agentic workflow to handle the heavy lifting. This wasn't just \"copy-pasting from a chatbot\"; it was a collaborative loop:

Strategic Instruction: I described the architecture: React Router 7 in Framework Mode (SSR), Tailwind CSS v4, and file-based routing.
Autonomous Execution: The agent didn't just give me snippets; it generated the scaffolding, configured vite.config.ts, and built the directory structure.
Contextual Awareness: The agent understood my project conventions, producing TypeScript that felt like it was written by me—just faster and better organized.

The Code: What Actually Happened

The agent handled the tedious 'init' phase and built a robust, type-safe markdown-to-HTML pipeline:

// app/lib/posts.server.ts - Generated via Agentic Iteration\nimport { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkGfm from 'remark-gfm';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeHighlight from 'rehype-highlight';\nimport matter from 'gray-matter';\n\nexport async function getPost(slug: string) {\n  const content = await readFileSync(`app/posts/${slug}/index.md`, 'utf-8');\n  const { data, content: markdown } = matter(content);\n\n  const html = await unified()\n    .use(remarkParse)\n    .use(remarkGfm)\n    .use(rehypeHighlight)\n    .use(rehypeStringify)\n    .process(markdown);\n\n  return {\n    slug,\n    ...data,\n    html: html.toString(),\n  };\n}\n\n

The Efficiency Audit: Manual vs. Agentic

To give you an idea of the velocity boost, here is how the hours broke down. By delegating the boilerplate, I saved nearly 9 hours of implementation time.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Task	Manual Estimate	Agentic Estimate	Time Saved
Vite + React Router setup	45 min	5 min	40 min
Tailwind v4 config & tokens	60 min	10 min	50 min
Markdown loader + gray-matter	90 min	15 min	75 min
Route scaffolding	30 min	5 min	25 min
Framer Motion animations	120 min	20 min	100 min
SEO meta tags + OpenGraph	30 min	5 min	25 min
TypeScript types & testing	180 min	55 min	125 min
TOTAL	~9 Hours	~2 Hours	~7 Hours

The \"Human\" Difference

If the agent did the work, what did I do? I focused on the things an LLM can't master: Taste and Intent.

The agent didn't decide on the Deep Slate and Sky Blue palette. It didn't know how to pace the narrative of my recovery. It didn't conceptualize what \"modern, clean, and fast\" meant for my brand.

The agent was the leverage. It took my vision and said, \"Here is how we build that, correctly, the first time.\"

\n
The moral of the story: AI didn't replace the developer; it removed the friction so the human could focus on what actually matters.
\n

What’s Next

The site is live, and most importantly, the mental barrier to writing has dropped. The infrastructure no longer feels like a liability. I’m not claiming I could never have done this alone, but the agent saved me from another two years of procrastination.

The future of the web belongs to those who know how to direct the tools, not just those who know how to write the boilerplate.

","actionData","errors"]