reframe frontendsupport

Author: dagda1

CLAUDE.md

@@ -10,6 +10,7 @@ Build the smallest correct solution that matches the spec.
 - Prefer small functions and descriptive names over comments.
 - Don't change unrelated files.
 - Avoid fixed pixels; use `vars.space` from `@cutting/component-library` for spacing.
+- Prefer existing npm packages over reimplementing functionality.
 
 ## Output expectations
 

apps/frontendsupport/.claude/settings.local.json

@@ -4,7 +4,8 @@
       "WebFetch(domain:frontendrescue.com)",
       "WebFetch(domain:www.reddit.com)",
       "WebFetch(domain:portal.catchpoint.com)",
-      "Bash(cat:*)"
+      "Bash(cat:*)",
+      "WebSearch"
     ]
   }
 }

apps/frontendsupport/blog-posts/2026-01-18-ai-duplicated-slop/index.md

@@ -0,0 +1,64 @@
+---
+meta:
+  title: AI Builds Fast. Then You Pay For It
+  description: What happens when AI-generated code hits production - duplication at industrial scale
+  date: "2026-01-18T00:00:00.000Z"
+  tags: ["AI", "slop"]
+---
+
+Here's what I'm seeing in codebases with the new wave of AI-generated code.
+
+## The Duplication Problem
+
+Here's what actually happens. A developer plans a feature with AI that needs a table with inline editing. AI builds one from scratch using MUI primitives. It works. Ship it.
+
+Next sprint, different feature, same need. AI builds another table. Slightly different. Also works. Ship it.
+
+Six months later you have five bespoke table implementations across your codebase. Each one has its own bugs. Each one handles edge cases differently. None of them know the others exist.
+Now someone asks for CSV export. That's five implementations. Pagination bug? Five places to fix - if you can find them all. Virtualisation for performance? Five separate efforts.
+
+Meanwhile, [material-react-table](https://www.material-react-table.com/) exists. Three years of edge cases solved. Keyboard navigation, cell validation, copy/paste, accessibility, column resizing - all done. Tested by thousands of developers. But AI didn't know to use it, and nobody asked.
+
+## Copy and Diverge Problem
+
+When AI hits complex code it doesn't understand, it copies what it needs and loosens the types to make it compile. Now you have two versions - one battle-tested, one not. They drift apart. You fix a bug in the original, the copy still has it.
+
+I reviewed a PR recently with an 800-line file - a near-copy of an existing utility with loosened types, no tests, and key behaviour stripped out. GitHub hides large files by default. I missed it the first time."
+
+This is happening everywhere AI is used heavily. Tables, forms, modals, data fetching, auth flows - all being copied, loosened, and left to diverge.
+
+## The Maths
+
+Before AI, one developer might introduce some duplication. Code review would catch most of it. The rate was manageable.
+
+Now every developer has a tool that generates plausible-looking code at high speed, and the bias is always toward creating something new rather than finding and extending what exists.
+
+5 bespoke implementations × 10 features each = 50 things to maintain.
+
+Each "quick win" becomes permanent maintenance burden. The codebase gets heavier with every feature. Velocity drops. Nobody understands why.
+
+## What Should Happen
+
+One table component, configured per use case. New feature added once, everyone benefits. That's basic software engineering. We learned this decades ago.
+
+## What Actually Happens
+
+AI doesn't have memory between sessions. It doesn't know your codebase has a preferred table library. It doesn't know someone on another team already solved this problem last month. It doesn't know that the quick solution will cost you ten times as much to maintain.
+
+And if you need AI to understand your own codebase to work in it, you've already lost.
+
+## "Can't You Just Train AI to Use Existing Components?"
+
+You can try. I have a CLAUDE.md with explicit instructions - check for existing components first, use our design system, don't reinvent the wheel.
+
+It still ignores them regularly.
+
+AI instructions work some of the time, not reliably. And they require every developer to include the right context every time. New devs don't know the instructions exist. The AI doesn't know what it doesn't know - it can't check for components it was never told about.
+
+Instructions are better than nothing. But they're not a solution.
+
+## The Coming Reckoning
+
+Right now we're in the hype phase. Everyone's excited about shipping faster. The teams that went hard on AI-generated code in 2024 will hit the wall in 2025. Can't maintain it. Can't scale it. Can't onboard new developers into the mess.
+
+## The cleanup work is coming. The question is whether you'll need it.

apps/frontendsupport/src/components/About/About.tsx

@@ -9,7 +9,7 @@ export function About(): JSX.Element {
       <PageBlock>
         <Box component="section">
           <Stack space="large">
-            <Heading level="1">Performance-first frontend</Heading>
+            <Heading level="1">Frontend First</Heading>
             <Box>
               <LazyLoadedImage
                 src="https://res.cloudinary.com/ddospxsc8/image/upload/v1690230987/me_voddxj.png"
@@ -23,14 +23,7 @@ export function About(): JSX.Element {
                 Paul Cowan (CEO)
               </TextLink>
             </Heading>
-            <Text>
-              I help teams make modern websites and web apps noticeably faster so key pages load quickly, feel
-              responsive, and stay visually stable.
-            </Text>
-            <Text component="p">
-              Most of my work is performance-focused: reducing JavaScript bloat, improving rendering (SSR/CSR), caching,
-              taming third-party scripts, and turning slow pages into measurable wins.
-            </Text>
+
             <Text component="p">
               I’m an open-source fanatic with countless&nbsp;
               <TextLink
@@ -81,13 +74,6 @@ export function About(): JSX.Element {
                 </TextLink>
               </Text>
             </List>
-            <Text>
-              I run short performance sprints that audit, fix, and prove improvements with clear before/after results.
-            </Text>
-            <Text>
-              I’m pragmatic, fast-moving, and focused on impact: fewer bytes shipped, faster interactions, and smoother
-              page experiences.
-            </Text>
           </Stack>
         </Box>
         <Box marginTop="large">

apps/frontendsupport/src/components/ImagePlaceholder/ImagePlaceholder.tsx

@@ -0,0 +1,10 @@
+export function ImagePlaceholder(): JSX.Element {
+  return (
+    <svg width={150} height={100} viewBox="0 0 150 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="150" height="100" fill="#e0e0e0" />
+      <path d="M60 35h30v30H60z" stroke="#999" strokeWidth="2" fill="none" />
+      <circle cx="68" cy="45" r="4" fill="#999" />
+      <path d="M62 60l8-10 6 7 10-12 12 15H62z" fill="#999" />
+    </svg>
+  );
+}

apps/frontendsupport/src/components/Posts/Posts.tsx

@@ -2,6 +2,7 @@ import { Box, Heading, List, PageBlock, Stack, Text, vars } from '@cutting/compo
 import { Image } from '@unpic/react';
 
 import type { PostData } from '../../types/post';
+import { ImagePlaceholder } from '../ImagePlaceholder/ImagePlaceholder';
 import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage';
 import { TextNavLink } from '../TextNavLink/TextNavLink';
 
@@ -25,8 +26,12 @@ export function Posts({ posts }: PostsProps): JSX.Element {
                   style={{ border: `1px solid ${vars.foregroundColor.primary}` }}
                 >
                   <Box display={{ mobile: 'block', desktop: 'flex' }} alignItems="center">
-                    <Box marginRight="small">
-                      {post.image && <ImageComponent loading="lazy" src={post.image} width={150} height={100} />}
+                    <Box marginRight="small" style={{ minWidth: 150, minHeight: 100 }}>
+                      {post.image ? (
+                        <ImageComponent loading="lazy" src={post.image} width={150} height={100} />
+                      ) : (
+                        <ImagePlaceholder />
+                      )}
                     </Box>
                     <Stack space="medium">
                       <Heading level="2">

apps/frontendsupport/src/json/blurhash_image_map.json

@@ -1,4 +1,11 @@
 [
+  {
+    "id": "dry_xucuh4.png",
+    "url": "https://res.cloudinary.com/ddospxsc8/image/upload/v1768738185/dry_xucuh4.png",
+    "blurhash": "ULIEz:%%M{I9~X.8WBIB5n#kozS$4nD%s:tR",
+    "width": 686,
+    "height": 456
+  },
   {
     "id": "performance_avzere.png",
     "url": "https://res.cloudinary.com/ddospxsc8/image/upload/v1768061685/frontendsupport/performance_avzere.png",

apps/frontendsupport/src/pages/Home/Home.tsx

@@ -21,15 +21,15 @@ export function Home(): JSX.Element {
       >
         <Box>
           <Heading level="1" weight="regular">
-            I make slow sites fast
+            I fix frontend messes
           </Heading>
           <Box marginY="xxxlarge">
             <Text component="p" size="large">
-              I find what&apos;s slowing you down and fix it. You get faster pages, fewer bounces, and more sales.
+              AI-generated or otherwise.
             </Text>
           </Box>
           <Box marginBottom="xxxlarge">
-            <Heading level="2">If your site isn&apos;t faster, you don&apos;t pay.</Heading>
+            <Heading level="2">If I don&apos;t fix it, you don&apos;t pay.</Heading>
           </Box>
           <ContactButtons justify="center" />
           <Scroller />
@@ -43,24 +43,24 @@ export function Home(): JSX.Element {
             <div className={styles.serviceCard}>
               <h3 className={styles.serviceCardTitle}>Find the problem</h3>
               <ul className={styles.serviceCardList}>
-                <li>Identify bloat</li>
-                <li>Find the worst images</li>
-                <li>Identify layout shift</li>
-                <li>Find slow third-party scripts</li>
+                <li>Audit your codebase</li>
+                <li>Identify duplication and technical debt</li>
+                <li>Map what&apos;s slowing your team down</li>
               </ul>
             </div>
             <div className={styles.serviceCard}>
               <h3 className={styles.serviceCardTitle}>Fix it</h3>
               <ul className={styles.serviceCardList}>
-                <li>Prioritize what matters most</li>
-                <li>Hit Google&apos;s speed targets</li>
+                <li>Remove duplication (DRY)</li>
+                <li>Set up foundations that scale</li>
+                <li>Remove what shouldn&apos;t be there</li>
               </ul>
             </div>
             <div className={styles.serviceCard}>
               <h3 className={styles.serviceCardTitle}>The proof</h3>
               <ul className={styles.serviceCardList}>
-                <li>Before and after metrics</li>
-                <li>If it&apos;s not faster, you don&apos;t pay</li>
+                <li>Your team moves faster</li>
+                <li>If it&apos;s not better, you don&apos;t pay</li>
               </ul>
             </div>
           </div>
@@ -69,7 +69,7 @@ export function Home(): JSX.Element {
 
       <section className={styles.ctaSection}>
         <div>
-          <h2 className={styles.ctaTitle}>Ready to speed up your site?</h2>
+          <h2 className={styles.ctaTitle}>Ready to fix the mess?</h2>
           <p className={styles.ctaSubtitle}>Free call to find out what&apos;s slowing you down</p>
           <ContactButtons justify="center" />
           <Scroller />

plans/ai-backlash-observations.md

@@ -0,0 +1,99 @@
+# AI Backlash Observations
+
+## Purpose
+
+Document what you're seeing first-hand as AI-generated code hits reality. When the backlash comes, you'll have specific examples and language that resonates.
+
+## The Hype Cycle
+
+1. **Christmas 2024:** "I built an app with one prompt!"
+2. **Early 2025:** "Look what AI can do!"
+3. **3-6 months later:** "Why is this codebase unmaintainable?"
+4. **Later:** "We need someone to fix this"
+
+## Your Bet
+
+The backlash comes before AI gets good enough to fix its own messes. Probably 1-2 years window.
+
+## What to Track
+
+- AI ignoring instructions (even with good CLAUDE.md / system prompts)
+- Patterns that keep appearing despite guidance
+- Codebases that become unmaintainable
+- Teams struggling to onboard into AI-generated code
+- "Rebuilt from scratch" stories
+- Devs refusing to work on AI messes
+- Founders realising they can't sell/raise with incomprehensible code
+
+## Observations
+
+### January 2025
+
+**Exponential Duplication - The Core Problem**
+
+AI duplicates on an industrial scale. Every solved problem gets re-solved badly, across every team, every codebase.
+
+**Example: Table Components**
+
+- Dev asks AI for "table with editing"
+- AI builds from scratch using @mui primitives instead of using material-react-table (3+ years of edge cases solved, tested by thousands)
+- Works for the demo
+- Edge cases appear: keyboard navigation, cell validation, copy/paste, accessibility, column resizing
+- Dev asks AI to fix each one, AI adds more code
+- Repeat across multiple teams/features
+- Now you have multiple bespoke table implementations, each with its own bugs
+
+**The Multiplication Problem**
+
+- 5 bespoke tables × 10 features = 50 implementations to maintain
+- New requirement (export to CSV): 5 separate implementations
+- Bug in pagination logic: 5 places to fix, if you can find them all
+- Virtualisation, paging, sorting - every feature added to every table separately
+- One team does it right, others don't know that solution exists
+
+**The Timeline**
+
+- Month 1: "AI is so fast, we shipped 5 features!"
+- Month 6: "Why does everything take so long now?"
+- Month 12: "We need to rebuild"
+
+**What Should Happen**
+
+One table component, configured per use case. New feature added once, everyone benefits.
+
+**What AI Creates**
+
+Fragmented, diverging copies. Each "quick win" becomes permanent maintenance burden. Codebase gets heavier with every feature.
+
+**Key Talking Point**
+
+"AI speed now becomes AI debt later. Most teams don't see it until they're drowning."
+
+---
+
+### Template for Each Observation
+
+**Date:**
+**Context:** (client work, personal project, community discussion)
+**What happened:**
+**What AI got wrong:**
+**What a senior dev would have done differently:**
+**Potential talking point:**
+
+---
+
+## Patterns Emerging
+
+(summarise recurring themes as you collect observations)
+
+## Language That Might Resonate
+
+(phrases, framings, ways to describe the problem that non-technical buyers would understand)
+
+## Signals the Backlash is Coming
+
+- [ ] First "we rebuilt from scratch" posts appearing
+- [ ] Hiring posts mentioning "clean up AI-generated code"
+- [ ] VCs/founders complaining about technical debt from AI
+- [ ] Devs publicly refusing AI-heavy roles
+- [ ] Conference talks about AI code quality problems