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,58 @@
+---
+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"
+  image: "https://res.cloudinary.com/ddospxsc8/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1768738185/dry_xucuh4.png"
+  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 asks AI for a table component 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 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.
+
+## Why This Happens
+
+AI doesn't extend. It recreates.
+
+When AI hits complex code it doesn't understand, it doesn't ask why it's complex. It copies what it needs, loosens the types to make it compile, and moves on. Now you have two versions - one battle-tested, one not. They'll drift apart. You'll fix a bug in the original and the copy will still have it.
+
+I reviewed a PR recently with an 800-line duplicated file. GitHub hides large files by default. I missed it the first time. The developer who submitted it had no idea - they'd accepted what AI gave them.
+
+This isn't a one-off. It's happening everywhere, on every team using AI heavily, across every common pattern. Tables, forms, modals, data fetching, auth flows - all being reinvented badly, simultaneously, at industrial scale.
+
+## 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.
+
+## 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/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

plans/ai-guardrails.md

@@ -0,0 +1,108 @@
+# AI Usage Best Practices Plan
+
+## Goal
+
+Position as a developer who uses AI thoughtfully—maximizing productivity while avoiding common pitfalls like code duplication and over-reliance.
+
+## Current State
+
+- [x] CLAUDE.md with project constraints
+- [x] Explicit anti-patterns defined
+- [ ] CI guardrails for duplication (in progress)
+
+## Implementation Roadmap
+
+### 1. CI Duplication Detection
+
+**Problem:** AI tends to generate similar code rather than reuse existing abstractions.
+
+**Solutions:**
+
+- Add `jscpd` to CI pipeline for copy-paste detection
+- Configure thresholds: fail on >5% duplication
+- Add custom ESLint rules for project-specific patterns
+
+```bash
+npm install -D jscpd
+```
+
+### 3. Pre-commit AI Review Hook
+
+**Checks to implement:**
+
+- Bundle size delta
+- New dependencies added
+- Duplicate utility detection
+- Naming convention violations
+
+**Tool options:**
+
+- Husky + custom scripts
+- lint-staged with custom functions
+
+### 4. Scoped Usage Guidelines
+
+Document when AI helps vs hurts:
+
+| Task                       | AI Recommended | Why                                   |
+| -------------------------- | -------------- | ------------------------------------- |
+| Boilerplate (types, tests) | Yes            | Repetitive, low risk                  |
+| State management           | No             | Requires domain context               |
+| Styling/layout             | Yes            | Follows patterns                      |
+| Business logic             | No             | Needs human judgment                  |
+| Refactoring                | Partial        | Good for suggestions, review manually |
+| Code review                | Yes            | Catches patterns linters miss         |
+
+### 5. Prompt Library
+
+Create reusable prompts for common tasks:
+
+```
+/prompts
+  component-scaffold.md
+  test-generation.md
+  pr-review.md
+  refactor-check.md
+```
+
+Each prompt should include:
+
+- Context requirements
+- Expected output format
+- Quality checks to apply after
+
+### 6. AI-Assisted PR Review Checklist
+
+Use AI to check:
+
+- Does this duplicate existing utilities?
+- Are naming conventions consistent?
+- Could this be simplified?
+- Are there abstraction opportunities?
+
+Do NOT use AI to check:
+
+- Business logic correctness
+- Security implications
+- Performance in production context
+
+## Metrics to Track
+
+- Duplication percentage over time
+- PR review turnaround
+- Bugs introduced in AI-assisted vs manual code
+- Bundle size trends
+
+## Talking Points for Marketing
+
+1. "I use AI as a force multiplier, not a replacement for judgment"
+2. "I've built guardrails that catch AI's common failure modes"
+3. "I document when AI helps and when it hurts—that's the skill"
+4. "AI is great at patterns, humans are great at context"
+
+## Next Actions
+
+1. [ ] Set up jscpd in CI
+2. [ ] Create prompt library folder
+3. [ ] Document team's scoped usage guidelines
+4. [ ] Add pre-commit hook for bundle size check