+
+ )
+}
diff --git a/src/lib/posts/iterative-improvement.mdx b/src/lib/posts/iterative-improvement.mdx
new file mode 100644
index 00000000..0ac1b449
--- /dev/null
+++ b/src/lib/posts/iterative-improvement.mdx
@@ -0,0 +1,180 @@
+import { AUTHORS, CATEGORIES } from '~/lib/constants/blog'
+import { PerfIterationFigure } from '~/ui/blog/iterative-improvement'
+
+export const metadata = {
+ title: "Can polish be automated?",
+ subtitle: "Writing an agent skill to allow long-running agents to iteratively improve their outputs",
+ date: "2026-06-01",
+ isNew: true,
+ author: AUTHORS.TED_SPARE,
+ category: CATEGORIES.EXPERIMENT,
+ description: "Writing an agent skill to allow long-running agents to iteratively improve their outputs",
+ bannerImageUrl: "/images/iterative-improvement/banner.webp",
+}
+
+## Introduction
+
+Coding agents are deeply rooted in an iterative workflow: a builder prompts the agent, sees the output rendered, provides feedback, and the cycle continues until some acceptance criterion is met. For matters of taste, it is our strong belief that the developer’s viewpoint gets encoded through this iteration process and thus we *should* not try to automate it.
+
+This post focuses on the practical issue of iteration loops where the desired state *is* known ahead of time, and the builder’s time might be better spent elsewhere. A good task for a computer.
+
+To this end, we stumbled on a pattern unique to agent harnesses with all of:
+
+- Vision understanding and screenshot ability
+- Computer-use ability
+- Sub-agent support
+
+which is true of most leading-edge systems today. We tested it with [Pi](https://pi.dev).
+
+In a [previous post](https://rubriclabs.com/blog/contract-engineering), we wrote about how [coding agents](https://rubriclabs.com/blog/how-does-claude-code-actually-work) have passed a threshold where, given complete requirements, they can generally one-shot a good result. This collapses a huge class of problems and leaves a more interesting class of new ones. For instance, a senior engineer might know to specify that a filterable React table should be memoized, but the average person does not.
+
+As more people take part in software creation, how can we empower them to *punch up*, getting expert performance out of the tools they didn’t know to ask for? This is the goal of this post.
+
+---
+
+## Initial Prompt
+
+The idea is quite simple:
+
+1. the coding agent (e.g. Claude Code) writes code to implement a feature,
+2. we commission a separate coding agent to critique the output, and then
+3. the original model responds to the feedback
+
+and so on. Think: the smallest-possible inner loop of [self-healing codebases](https://x.com/ycombinator/status/2056908727400423481). We’ll share the prompt we used and walk through three examples, in order of increasing difficulty, to illustrate how it works.
+
+Before we begin, your intuition might be: if quality can be squeezed out of these models by simply getting them to critique themselves, wouldn’t the AI labs have RL’d every drop into their one-shot performance? In theory, yes, but these models are [optimized for multiple rewards](https://arxiv.org/abs/2605.25604), some of which might be time-to-accepted-solution or lines-of-code-changed (the fewer, the better). Such a compromising regime naturally leads to solutions that balance multiple factors. Claude Code is less like a tenured professor and more like a bazaar stall-keeper.
+
+In the same way that getting [2022 models to think before speaking](https://arxiv.org/abs/2201.11903) yielded [radically better](https://openai.com/index/learning-to-reason-with-llms/) math scores, we can push coding agents to iterate before presenting and expect better results.
+
+---
+
+## Example 1: SaaS Landing Page
+
+As a start, we (actually, Claude Code, in a very meta way) wrote this [SKILL.md](https://skill.md) to test the thesis, starting with the challenge of building a distinct landing page for a fictional SaaS:
+
+```md
+---
+name: iterate-ui
+description: Build a UI, screenshot it, critique the screenshot, and improve it.
+---
+
+# Iterate on UI
+
+1. Build the feature.
+2. Run the dev server and take a screenshot.
+3. Look at the screenshot and list what looks bad.
+4. Fix the worst issues.
+5. Repeat until it looks good.
+```
+
+You’ll notice the prompt is very UI-specific, which is more an artifact of our upstream prompt than anything else, but it serves well as a high-water mark to gauge how well our prompt generalizes in the coming examples.
+
+And here is the result of three rounds of iteration on the top-level prompt “build a mobile landing page for Cadence, a habit tracker for teams”:
+
+
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+ )
+ }
+
+ return (
+ + Mounts a live 10k-row dashboard and measures real mount + filter latency. +
+ +
+
+ )
+}
+
+const Badge = ({ label, ms, tint }: { label: string; ms: number | null; tint?: boolean }) => (
+
+ {label}: {ms === null ? '—' : `${ms.toFixed(ms < 10 ? 1 : 0)} ms`}
+
+)
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/chrome.tsx b/src/ui/blog/iterative-improvement/demos/dashboard/chrome.tsx
new file mode 100644
index 00000000..1cba5026
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/chrome.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import { memo } from 'react'
+import type { Transaction } from './data'
+import type { Summary } from './transactions'
+
+// Shared, presentational pieces of the dashboard. The perf differences between
+// iterations live in the container components, not here.
+
+export const ROW_H = 28 // px per row — fixed so the virtualized column can window
+export const VIEWPORT_H = 360 // px scroll window inside each column
+
+export const StatBar = ({ summary }: { summary: Summary }) => (
+
+
+
+
+)
+
+const Stat = ({ label, value }: { label: string; value: string }) => (
+
+ {label}
+ {value}
+
+)
+
+export const FilterInput = ({
+ value,
+ onChange
+}: {
+ value: string
+ onChange: (next: string) => void
+}) => (
+ onChange(e.target.value)}
+ placeholder="Filter by category, merchant…"
+ value={value}
+ />
+)
+
+export const Row = memo(({ t, pctl }: { t: Transaction; pctl: number }) => (
+
+ {t.date.slice(5)}
+ {t.description}
+
+ {t.amount.toFixed(2)}
+
+ {pctl}
+
+))
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/data.ts b/src/ui/blog/iterative-improvement/demos/dashboard/data.ts
new file mode 100644
index 00000000..8ca63ead
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/data.ts
@@ -0,0 +1,85 @@
+// Deterministic seeded dataset shared by all three dashboard iterations, so the
+// naive / memoized / virtualized columns are compared on identical input.
+// Ported from /tmp/iter-improve/demo2-perf/src/data.ts.
+
+export interface Transaction {
+ id: number
+ date: string // ISO yyyy-mm-dd
+ description: string
+ category: string
+ merchant: string
+ amount: number // signed: negative = debit, positive = credit
+}
+
+export const CATEGORIES = [
+ 'Groceries',
+ 'Dining',
+ 'Transport',
+ 'Utilities',
+ 'Entertainment',
+ 'Health',
+ 'Travel',
+ 'Income',
+ 'Shopping',
+ 'Rent'
+]
+
+const MERCHANTS = [
+ 'Acme Foods',
+ 'Metro Transit',
+ 'PowerCo',
+ 'Streamly',
+ 'MediCare Plus',
+ 'SkyJet',
+ 'Globex Payroll',
+ 'ShopMart',
+ 'Brick Properties',
+ 'Cafe Luna'
+]
+
+// Small deterministic PRNG (mulberry32) so data is identical across runs, which
+// keeps the side-by-side comparison fair.
+function mulberry32(seed: number): () => number {
+ let a = seed >>> 0
+ return () => {
+ a |= 0
+ a = (a + 0x6d2b79f5) | 0
+ let t = Math.imul(a ^ (a >>> 15), 1 | a)
+ t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+ }
+}
+
+export function generateTransactions(count: number, seed = 42): Transaction[] {
+ const rand = mulberry32(seed)
+ const out: Transaction[] = new Array(count)
+ const startDate = Date.UTC(2023, 0, 1)
+ const dayMs = 86400000
+ for (let i = 0; i < count; i++) {
+ const catIdx = Math.floor(rand() * CATEGORIES.length)
+ const category = CATEGORIES[catIdx]!
+ const merchant = MERCHANTS[catIdx]!
+ const isIncome = category === 'Income'
+ const magnitude = Math.round((rand() * 980 + 5) * 100) / 100
+ const amount = isIncome ? magnitude : -magnitude
+ const dayOffset = Math.floor(rand() * 730)
+ const date = new Date(startDate + dayOffset * dayMs).toISOString().slice(0, 10)
+ out[i] = {
+ amount,
+ category,
+ date,
+ description: `${merchant} #${i} ${category}`,
+ id: i,
+ merchant
+ }
+ }
+ return out
+}
+
+// Lazily generated 10k-row singleton, shared by every column so the comparison
+// is fair and the data is only built once on the client.
+let cached: Transaction[] | null = null
+export function getTransactions(): Transaction[] {
+ if (cached === null) cached = generateTransactions(10000)
+ return cached
+}
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/iteration-0.tsx b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-0.tsx
new file mode 100644
index 00000000..2acd7e90
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-0.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { FilterInput, Row, StatBar, VIEWPORT_H } from './chrome'
+import {
+ computePercentilesNaive,
+ computeSummary,
+ filterTransactions,
+ sortTransactions
+} from './transactions'
+import type { IterDashboardProps } from './types'
+import { usePerfMeasure } from './use-perf'
+
+// ITERATION 0 — naive baseline. Perf sins (deliberate, do not "fix"):
+// - All derived data (filter, sort, summary, percentiles) recomputed in the
+// render body on EVERY keystroke, with no useMemo.
+// - O(n^2) percentile computation over the FULL dataset every render.
+// - Renders ALL matching rows into the DOM (no virtualization).
+export default function IterationZero({ data, mountStart, onMount, onFilter }: IterDashboardProps) {
+ const [query, setQuery] = useState('')
+
+ // ---- expensive work, in render, every time ----
+ const filtered = filterTransactions(data, query)
+ const sorted = sortTransactions(filtered, 'date', 'desc')
+ const summary = computeSummary(sorted)
+ // percentile rank over the whole history, recomputed from scratch every
+ // keystroke. O(n^2).
+ const percentiles = computePercentilesNaive(data)
+
+ const markFilterStart = usePerfMeasure({ mountStart, onFilter, onMount, signature: query })
+
+ return (
+
+ {
+ markFilterStart()
+ setQuery(next)
+ }}
+ value={query}
+ />
+
+ )
+}
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/iteration-1.tsx b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-1.tsx
new file mode 100644
index 00000000..ef3ff181
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-1.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { FilterInput, Row, StatBar, VIEWPORT_H } from './chrome'
+import {
+ computePercentilesFast,
+ computeSummary,
+ filterTransactions,
+ sortTransactions
+} from './transactions'
+import type { IterDashboardProps } from './types'
+import { usePerfMeasure } from './use-perf'
+
+// ITERATION 1 — stop recomputing in render.
+// - All derived data wrapped in useMemo with precise deps, so a re-render that
+// doesn't change inputs reuses the previous result.
+// - The whole-history percentile depends only on `data`, so it is computed
+// ONCE instead of on every keystroke, and uses the O(n log n) algorithm.
+// (Still renders every matching row — addressed in iteration 2.)
+export default function IterationOne({ data, mountStart, onMount, onFilter }: IterDashboardProps) {
+ const [query, setQuery] = useState('')
+
+ const filtered = useMemo(() => filterTransactions(data, query), [data, query])
+ const sorted = useMemo(() => sortTransactions(filtered, 'date', 'desc'), [filtered])
+ const summary = useMemo(() => computeSummary(sorted), [sorted])
+ // depends only on the dataset → computed once
+ const percentiles = useMemo(() => computePercentilesFast(data), [data])
+
+ const markFilterStart = usePerfMeasure({ mountStart, onFilter, onMount, signature: query })
+
+ return (
+ {sorted.length} rows
+
+ {sorted.map(t => (
+ |
+ ))}
+
+
+ {
+ markFilterStart()
+ setQuery(next)
+ }}
+ value={query}
+ />
+
+ )
+}
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/iteration-2.tsx b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-2.tsx
new file mode 100644
index 00000000..a52f0d3b
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/iteration-2.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { FilterInput, ROW_H, Row, StatBar, VIEWPORT_H } from './chrome'
+import {
+ computePercentilesFast,
+ computeSummary,
+ filterTransactions,
+ sortTransactions
+} from './transactions'
+import type { IterDashboardProps } from './types'
+import { usePerfMeasure } from './use-perf'
+
+const OVERSCAN = 8 // rows rendered above/below the viewport
+
+// ITERATION 2 — stop rendering rows nobody can see.
+// - Virtualized (windowed) list: only the rows inside the scroll viewport
+// (plus a small overscan) are committed to the DOM; top/bottom spacers
+// preserve scroll height. A 10k-row result renders ~25 rows, not thousands.
+// - Carries forward iteration 1's memoized derived data + O(n log n) percentile.
+export default function IterationTwo({ data, mountStart, onMount, onFilter }: IterDashboardProps) {
+ const [query, setQuery] = useState('')
+ const [scrollTop, setScrollTop] = useState(0)
+
+ const filtered = useMemo(() => filterTransactions(data, query), [data, query])
+ const sorted = useMemo(() => sortTransactions(filtered, 'date', 'desc'), [filtered])
+ const summary = useMemo(() => computeSummary(sorted), [sorted])
+ const percentiles = useMemo(() => computePercentilesFast(data), [data])
+
+ const markFilterStart = usePerfMeasure({ mountStart, onFilter, onMount, signature: query })
+
+ // ---- windowing math ----
+ const total = sorted.length
+ const start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN)
+ const windowSize = Math.ceil(VIEWPORT_H / ROW_H) + OVERSCAN * 2
+ const end = Math.min(total, start + windowSize)
+ const visibleRows = sorted.slice(start, end)
+ const topPad = start * ROW_H
+ const bottomPad = (total - end) * ROW_H
+
+ return (
+ {sorted.length} rows
+
+ {sorted.map(t => (
+ |
+ ))}
+
+
+ {
+ markFilterStart()
+ setQuery(next)
+ }}
+ value={query}
+ />
+
+ )
+}
diff --git a/src/ui/blog/iterative-improvement/demos/dashboard/transactions.ts b/src/ui/blog/iterative-improvement/demos/dashboard/transactions.ts
new file mode 100644
index 00000000..d1a1c55e
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/dashboard/transactions.ts
@@ -0,0 +1,128 @@
+// Filter / sort / summary / percentile logic shared by the dashboard iterations.
+// Ported from /tmp/iter-improve/demo2-perf/src/transactions.ts. The naive O(n^2)
+// percentile is kept deliberately so iteration 0 is genuinely slow.
+
+import type { Transaction } from './data'
+
+export type SortKey = 'date' | 'amount' | 'description' | 'category'
+export type SortDir = 'asc' | 'desc'
+
+export interface Summary {
+ count: number
+ total: number // net (sum of signed amounts)
+ income: number // sum of positive amounts
+ expense: number // sum of negative amounts (negative number)
+ avgAbs: number // average of absolute amounts
+ byCategory: Record{total} rows
+ setScrollTop(e.currentTarget.scrollTop)}
+ style={{ height: VIEWPORT_H }}
+ >
+
+ {visibleRows.map(t => (
+ |
+ ))}
+
+
+
+ {columns.map(col => (
+
+ )
+
+ if (bare) return grid
+
+ return (
+
+
+ ))}
+
+ {col.label}
+ {col.caption ? {col.caption} : null}
+
+ {col.body}
+
+
+ {grid}
+ {title}
+{blurb}
+
+
+ )
+}
diff --git a/src/ui/blog/iterative-improvement/demos/onboarding/FlowV0.tsx b/src/ui/blog/iterative-improvement/demos/onboarding/FlowV0.tsx
new file mode 100644
index 00000000..5c5ef869
--- /dev/null
+++ b/src/ui/blog/iterative-improvement/demos/onboarding/FlowV0.tsx
@@ -0,0 +1,243 @@
+'use client'
+
+import { useState } from 'react'
+import { Field, Input, Logo, Phone } from './ui'
+
+// ---------------------------------------------------------------------------
+// V0 — deliberately full of friction.
+// No progress indicator. No back button. Too many fields. No inline validation
+// (errors only blow up on submit, as a dead-end banner). No skip. Confusing,
+// inconsistent CTA labels. No sensible defaults. The final step dead-ends.
+// ---------------------------------------------------------------------------
+
+const HABITS = [
+ 'Daily standup',
+ 'Weekly 1:1',
+ 'Inbox zero',
+ 'Deep work block',
+ 'Code review',
+ 'Hydration',
+ 'Stretch break',
+ 'Journaling',
+ 'Retro notes',
+ 'Gratitude log',
+ 'Reading',
+ 'No-meeting mornings'
+]
+
+export const FlowV0 = () => {
+ const [step, setStep] = useState(1)
+ const [banner, setBanner] = useState('')
+
+ // step 1 — bloated account form
+ const [f, setF] = useState({
+ company: '',
+ confirm: '',
+ email: '',
+ first: '',
+ last: '',
+ password: '',
+ phone: '',
+ source: '',
+ title: ''
+ })
+ const up = (k: keyof typeof f) => (e: React.ChangeEvent
+
+
+ {children()}
+
+
+
+ {banner && (
+
+ {banner}
+
+ )}
+
+
+ {step === 1 && (
+
+
+ {/* sticky CTA — inconsistent labels, no back button */}
+ {step < 5 && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {step === 2 && (
+ Create your account
+
+
+ setTeam(e.target.value)} />
+
+
+ )}
+
+ {step === 3 && (
+ Team details
+Invite teammates (minimum 3 required).
+ {invites.map((v, i) => ( + setInvites(s => s.map((x, j) => (j === i ? e.target.value : x)))} + /> + ))} +
+
+ )}
+
+ {step === 4 && (
+ Choose habits
+
+ {HABITS.map(h => {
+ const on = picked.includes(h)
+ return (
+
+ )
+ })}
+
+
+
+ )}
+
+ {step === 5 && (
+ Connect a tool
+A connected integration is required to finish.
+ {['Slack', 'GitHub', 'Linear', 'Notion'].map(t => ( + + ))} +
+
+ )}
+ Setup complete.
+Your account has been created.
+
+ {step === 1 &&
+ )}
+
+
+
+ {banner && (
+
+ {banner}
+
+ )}
+
+
+ {step === 1 && (
+
+
+ {step < 5 && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {step === 2 && (
+ Create your account
+
+
+ setTeam(e.target.value)} />
+
+
+ )}
+
+ {step === 3 && (
+ Name your team
+Invite teammates (at least 2).
+ {invites.map((v, i) => ( + setInvites(s => s.map((x, j) => (j === i ? e.target.value : x)))} + /> + ))} +
+
+ )}
+
+ {step === 4 && (
+ Pick your habits
+
+ {HABITS.map(h => {
+ const on = picked.includes(h)
+ return (
+
+ )
+ })}
+
+
+
+ )}
+
+ {step === 5 && (
+ Connect a tool
+ {['Slack', 'GitHub', 'Linear', 'Notion'].map(t => ( + + ))} +
+
+ )}
+
+ ✓
+
+ You're all set
+Welcome to {team || 'your team'}.
+
+ {step > 1 && (
+
+ )}
+
+
+ )}
+
+
+)
+
+export const FlowV2 = () => {
+ const [step, setStep] = useState(1)
+ const [touched, setTouched] = useState(false)
+
+ const [email, setEmail] = useState('')
+ const [team, setTeam] = useState('')
+ const [invite, setInvite] = useState('')
+ const [picked, setPicked] = useState
+ {STEPS.map((label, i) => (
+
+ ))}
+
+
+ {STEPS[step - 1]}
+
+ {step} of {STEPS.length}
+
+
+
+
+ {step < 5 && }
+
+
+ {step === 1 && (
+
+
+ {step < 5 && (
+
+
+ setEmail(e.target.value)}
+ onBlur={() => setTouched(true)}
+ placeholder="you@company.com"
+ className={
+ emailError
+ ? 'border-red-400 focus:border-red-500 focus:ring-red-100'
+ : emailOk
+ ? 'border-green-400'
+ : ''
+ }
+ />
+
+ {emailOk &&
+ )}
+
+ {step === 2 && (
+
+
+ Let's set up Cadence
++ Just your email to start — takes about a minute. +
+Looks good ✓
} +
+
+ setTeam(e.target.value)}
+ placeholder="e.g. Platform Squad"
+ />
+
+
+ setInvite(e.target.value)}
+ placeholder="name@company.com"
+ />
+
+
+ )}
+
+ {step === 3 && (
+
+
+ Name your team
+You can change this anytime.
++ No one to add yet? Skip it — you can invite people later. +
+
+
+ )}
+
+ {step === 4 && (
+
+
+ Pick your habits
++ We pre-selected the popular ones. Tweak away. +
+
+ {HABITS.map(h => {
+ const on = picked.includes(h.name)
+ return (
+
+ )
+ })}
+
+ {picked.length} selected
+
+
+ )}
+
+ {step === 5 && (
+
+
+ Connect a tool
++ Optional — sync reminders where your team already works. +
+
+ {['Slack', 'GitHub', 'Linear', 'Notion'].map(t => (
+
+ ))}
+
+
+
+ )}
+
+ 🎉
+
+ You're all set!
++ {team ? ( + <> + Welcome to {team}. + + ) : ( + 'Your workspace is ready.' + )} +
+
+
+
+ {picked.length} habits tracking
+First check-in lands tomorrow at 9:00am.
+
+ {step > 1 && (
+
+ )}
+ {(step === 2 || step === 4) && (
+
+ )}
+
+
+ )}
+
+ {children}
+
+)
+
+export const Logo = () => (
+
+
+)
+
+export const Field = ({
+ label,
+ hint,
+ error,
+ children
+}: {
+ label: string
+ hint?: string
+ error?: string
+ children: ReactNode
+}) => (
+ // biome-ignore lint/a11y/noLabelWithoutControl: the associated Input is passed in via children
+
+)
+
+export const Input = ({ className, ...props }: InputHTMLAttributes
+
+
+ Cadence
+
+
+
+)
+
+export const PerfIterationFigure = () => {
+ const maxMount = Math.max(1, ...DATA.map(d => d.mountMs))
+ const maxFilter = Math.max(1, ...DATA.map(d => d.filterMs))
+
+ return (
+ 0 ? Math.max(4, (value / max) * 100) : 0)}%` }}
+ />
+
+ {value} ms
+
+
+ )
+}
+ {DATA.map(row => (
+
+
+
+ ))}
+
+ {row.label}
+ {row.note}
+
+
+
+
+ mount
+
+
+ filter
+
+