Built with AI
A transparent record of how this app was developed — what was added, how Claude was involved, and what the human directed. This app teaches the agent mindset; this log is a live demonstration of it in practice.
Each entry distinguishes what was built from how AI contributed — because that distinction is the whole point.
Research evidence refreshed around 2026 studies and legal-engineering workflows
Refreshed /research from a static evidence page into a more current 2026 research synthesis. The page now opens with a Methodology block explaining the search filters, what counted as primary evidence, and how three research agents were used: one for legal-engineering literature, one for empirical AI legal-workflow studies, and one for the taxonomy of legal-engineering inputs. Rebuilt the study cards around newer academic and empirical sources: the 2026 AI-Powered Lawyering RCT, Chen & Bao's training RCT, Bednar et al. on AI and human legal reasoning, LegalCheck's municipal legal drafting deployment, Legal RAG benchmarks, public-sector drafting evidence, coding productivity evidence, and the 2026 worker-productivity evidence synthesis. Updated the synthesis panel to make the central point sharper: AI improves speed and sometimes quality, but the gains depend on training, task framing, retrieval grounding, evaluation rubrics, verification, and expert review. Added every source used to /sources under Empirical research, and demoted vendor/industry reports to supporting context rather than headline evidence.
Claude's role: Ruben pushed on the original research section: the claims were directionally right, but '7 peer-reviewed studies' overstated the source mix and missed the newer 2026 evidence. Codex first audited the existing cards and found the credibility issue: peer-reviewed RCTs, SSRN papers, vendor-funded comparisons, and industry surveys were being presented under one label. Then Ruben asked for a deeper 2026 update, specifically academic / empirical, with sources logged and agent methodology disclosed. Codex spawned three research agents: one mapped legal engineering as a discipline, one searched for empirical evidence on AI-assisted legal workflows, and one produced a taxonomy of legal-engineering inputs. The key finding was useful because it was narrower than the hype: there is thin evidence that the job title 'legal engineer' causes productivity gains, but much stronger evidence that legal-engineering functions matter — task framing, workflow mapping, curated legal sources, RAG design, evaluation, verification, and expert review. Codex translated that into the page: stronger studies, clearer caveats, a visible methodology, and a full source trail.
First digest run under the new brief — 5 items, 1 tip, sources reported
Ran the daily digest manually for the first time using DIGEST_BRIEF.md as the standing brief. Checked LawNext, Artificial Lawyer, Anthropic news, Hacker News, and EURACTIV (blocked). Selected 5 items: Kirkland + Palantir's PE fund formation engine, Lavern (open-source multi-agent legal system by Finnish lawyer Antti Innanen), a 6,200-matter analysis showing AI effectiveness depends on structured processes, Anthropic's confidential S-1 IPO filing, and a statistical analysis of rsync releases showing Claude-assisted commits are no buggier than baseline. Added 1 tip: the Specify-Encode-Fulfill (SEF) loop for AI-assisted TDD, surfaced from HN with 101 points. Sources used were listed for review before adding to extra-sources.json.
Claude's role: The brief made the run straightforward — clear source list, selection criteria, format, and the instruction to report sources rather than silently commit them. The rsync bug analysis was the most interesting find: a proper statistical test (permutation + Fisher's exact) on a real production codebase, not anecdote. EURACTIV was unreachable; the other high-priority sources returned enough signal. The tips section ran for the first time, requiring a schema update first — DigestTip and an optional tips array had been specified in the brief but never added to the Zod schema.
Digest infrastructure: brief, source list, type taxonomy, and selection transparency
Built out the full infrastructure for running the daily digest as a repeatable, automatable routine. Created DIGEST_BRIEF.md — a standing brief that any agent (scheduled or manual) reads before building a digest entry. Defines 5 source tiers with 25+ outlets, selection criteria (meaningful change only, skip restatements), format, and the instruction to report sources to Ruben rather than self-commit. Added a Prompting & Coding Tips source tier (HN, r/ClaudeAI, r/LocalLLaMA, Latent Space, Karpathy, Pragmatic Engineer) alongside the existing legal AI and EU regulation tiers. Added 22 new entries across 6 groups to extra-sources.json and wired curated headings for all of them in the sources page. Added a selection criteria paragraph to the 'Sources checked' panel on the digest page for transparency. Replaced the priority field (high/medium/low, reflecting source tier) with a type taxonomy (regulation/model/tool/research/technique/market, reflecting what the item actually is) across schema, data, components, and filter bar. Renamed legalSignal → signal throughout. Added DigestTip schema and optional tips array to DailyDigest. Updated CLAUDE.md to reframe the project as a personal AI learning notebook and reference DIGEST_BRIEF.md.
Claude's role: The priority field was the biggest structural fix — it was labelling items by source importance rather than by what they are, which made the filter bar answer the wrong question. The new type taxonomy answers 'what am I in the mood to read?' instead. The change touched 7 files: schema, JSON data (18 items reclassified), digest-item component, digest-client filter bar, homepage, digest page description, and the brief itself. The source tier for prompting tips came out of a question about whether Twitter/X trends could be tracked — the answer is yes, via aggregators (HN, Reddit) that surface what's getting traction there within 24–48 hours.
Philosophy page looked completely unstyled — two separate bugs, one obvious, one hidden
Built and shipped the /philosophy page from a design handoff: a hero section with a floating particle canvas, three expandable accordion boxes (Automations built, Agents deployed, Long term challenges), and a footer. The page rendered — but looked like completely unstyled HTML. Content started at the left edge of the screen, accordion boxes were fully expanded with no card styling, tags appeared as a run of plain text with no pill borders or spacing. The header nav links also did nothing: clicking Study or Digest on /philosophy scrolled nothing. Two bugs, both fixed.
Claude's role: First instinct was CSS specificity — Tailwind v4 has a layer architecture that can cause unlayered custom CSS to conflict. But checking the rendered HTML showed the class names were all present and correct: ph-hero, exp-body, exp-box, etc. were all in the markup. The CSS wasn't missing from the source; it just wasn't making it to the browser. Fetching the compiled CSS bundle directly confirmed it: grep for ph-hero and exp-body returned zero hits. The compiled chunk had graph-wrap (from an earlier session) but nothing from the philosophy additions. A timestamp comparison revealed the actual cause — globals.css had been modified at 22:53, but Turbopack's compiled output was last written at 22:52. The dev server had been running continuously and its file watcher silently missed the edit. The CSS existed in the source but was never recompiled into the bundle. Fix: kill the stale process, restart the dev server, fresh compilation. The second bug was structural: the Header component uses hash anchors (#course, #digest, #log) that only resolve on the homepage, where those section IDs exist. On /philosophy, clicking Study scrolled nothing — there's no #course element on that page. The fix was switching the nav links to real routes (/learn, /digest, /log, etc.) when the header is in inner-page mode (already detectable via the backHref prop that was added as part of this build).
Homepage 'Today's AI Pulse' wired to the daily digest automation
The homepage digest section — 'Today's AI Pulse' — is fully driven by the daily digest automation. When a new digest entry is committed to daily-digest.json, the homepage automatically shows the new date and content on next deploy: no code changes needed, no manual updates. The section always surfaces the five highest-priority items from the latest entry, sorted high → medium → low. Added a small accuracy improvement: the eyebrow now reads 'Today' when the digest date matches the build date, and 'Latest' with the actual date when it doesn't — so the label is honest if a day is missed.
Claude's role: Ruben built the underlying automation — a daily pipeline that searches across 21 monitored sources, curates items, classifies their legal relevance, and commits the results to the content file. The homepage section is the public-facing output of that automation: each morning's run shows up on the front page without any extra work. The Today/Latest label came out of checking whether the wiring was correct — it was, but the 'Today' label was unconditional. One comparison against the build date makes it accurate regardless of cadence.
CSS layer collision silently stripped all Tailwind spacing — found and fixed
A visual rework of the homepage introduced a full airy.css stylesheet into globals.css. The stylesheet included a universal reset — `*{margin:0;padding:0;}` — placed outside any CSS layer. In Tailwind v4, all utility classes (padding, margin, gap, etc.) are emitted inside `@layer utilities`. Per the CSS cascade spec, unlayered styles unconditionally beat layered ones regardless of specificity. The result: every px-3, py-1.5, mt-4, gap-2 across all inner pages was silently zeroed out. Layout structure (flexbox, max-width, columns) survived because those properties weren't padding or margin. But all breathing room was gone — buttons squished together, sidebar items cramped, spacing collapsed. The fix was one line: wrap the reset in `@layer base` so it sits below the utilities layer in the cascade, resetting browser defaults without clobbering utility classes.
Claude's role: The symptom looked like a complete styling failure — inner pages described as 'plain text.' Comparing screenshots from the live Vercel deployment against the local rework pinpointed the difference: spacing and padding were collapsing everywhere, but layout structure (columns, widths) was intact. That pattern pointed to a cascade conflict rather than missing CSS. Checking the globals.css against Tailwind v4's layer architecture identified the culprit: the unlayered `*{padding:0}` winning over `@layer utilities` across the entire app. Wrapping it in `@layer base` restored the correct order. Along the way, two other regressions were caught and fixed: `--surface` had been set to `#0e110e` — only 4 brightness units from the `#0a0c0a` background, making cards invisible (the expandable digest cards were there and working, just undetectable); and a `ThemeToggle` hydration mismatch where `aria-label` was computed from `resolvedTheme` before mount, causing a server/client mismatch on every page load.
Digest items become expandable cards
The flat list of digest items was replaced with interactive cards. Collapsed, each card shows just the priority badge, source, and a truncated quote — enough to scan the day at a glance. Clicking opens the full quote at comfortable reading size with the legal signal below. The external link opens without toggling the card.
Claude's role: Ruben found the dense list format hard to read and asked for items to expand on click. This was a UX observation made while actually using the digest — the kind of friction that only surfaces once the content is real. Claude converted the component to a client component with local state, keeping the change self-contained.
European regulatory sources added — gap discovered through use
Added a dedicated EU AI Regulation tier to the sources panel (7 sources: European Commission, EU AI Act tracker, EDPB, EURACTIV, AlgorithmWatch, Bird & Bird, Fieldfisher). Immediately ran EU-specific searches and added two high-priority items to that day's digest: the EU AI Act Annex III deadline extension to December 2027, and the EDPB's 2026 coordinated GDPR transparency enforcement action.
Claude's role: Ruben noticed the digest source list was US-centric — a gap that only became visible once the sources panel was built and he could actually read what was being checked. He asked whether EU regulatory sources were included. They weren't. Claude mapped the European regulatory landscape (EU AI Act implementation phases, EDPB enforcement structure, key publications), added the sources, searched for current EU developments, and found two genuinely high-priority items already in motion. The content scope improved through use, not through upfront planning.
Sources panel — transparency about what the digest actually checks
A collapsible 'Sources checked' toggle was added to the top of the /digest page, listing all 21 monitored sources grouped by tier with links. Closed by default so it doesn't crowd the page for daily use, but one click makes the methodology fully visible.
Claude's role: Ruben wanted the digest to be transparent about its sourcing — a credibility decision consistent with the bibliography on /sources and the build log itself. The sources panel directly enabled the next improvement: once Ruben could see what was being checked, he noticed the European gap immediately. The transparency feature made the content gap discoverable.
Priority system baked into the digest schema
A DigestPriority enum (high / medium / low) was added to the DigestItem Zod schema. Every item is classified at write time: high = directly affects legal practice, medium = significant AI capability or cost change with indirect legal relevance, low = broader industry context worth knowing. The /digest page gained a priority filter bar with cross-day filtering. The homepage sorts items high → medium → low so the most legally relevant news always surfaces first. Source scope broadened to include AI coding tools and additional model providers.
Claude's role: The priority system was Ruben's design — the classification logic reflects his legal domain knowledge about what matters for practice versus what's general AI industry context. The key architectural decision was making priority a schema-level field rather than a UI label: it's enforced by Zod at validation time, which means every future digest entry must declare its legal relevance explicitly. That's a content quality guarantee built into the data model, not a display choice.
Homepage redesigned as a hub, not a landing page
Replaced the course-selling hero with a premise-first layout: three key research numbers as the opening statement, followed by four equal navigation tiles (Digest, Developments, Course, PowerUser). Added this build log as a live section on the homepage and a dedicated /log page.
Claude's role: Ruben described the concept — 'less landing page, more workspace' and 'the research is the why, not a section'. Claude translated the concept into a structural redesign, wrote all the components, and seeded the build log with the full development history.
Daily AI digest with automated pipeline
Built a daily content type: date-stamped entries of 3–5 items from Anthropic, OpenAI, DeepMind, LawNext, and Artificial Lawyer, each annotated with a one-sentence legal relevance signal. Added /digest archive page (scrollable history with date headers), homepage section, and nav link.
Claude's role: Ruben specified the sources and format. Claude designed the schema, built all components and pages, and ran the first real digest manually — web-searching for June 3 news, curating 4 items (Kirkland LLM fine-tuning, LawGeex founders' NewMod firm, MCP as legal AI standard, Claude Opus 4.8), and committing the result.
Visual redesign — editorial design language from personal website
Changed the accent colour from indigo to forest green (#2E7D4F), added DM Serif Display as a display font for headings, introduced spaced-uppercase section labels with thin horizontal rules, redesigned the homepage with an asymmetric two-column hero and a context card with live stats.
Claude's role: Ruben shared screenshots of his CV and personal website. Claude identified the design language (one accent colour used sparingly, spaced uppercase labels, confident typography, minimal decoration), translated it into Tailwind CSS changes and a full homepage rewrite — matching the visual identity Ruben already uses professionally.
Empirical research evidence section
Built /research — a page with 7 peer-reviewed studies on AI productivity in legal and professional work, each with key metrics, per-study success and risk factors, and a source link. Includes a synthesised panel at the top aggregating success and risk factors across all studies. Homepage shows 2 featured studies.
Claude's role: Ruben asked for literature research on AI productivity in legal workflows. Claude ran web searches, identified the key empirical studies (Dell'Acqua Jagged Frontier RCT, Noy & Zhang MIT, two Schwarcz et al. legal RCTs, Grossman & Cormack TAR, Lawgeex NDA study, Thomson Reuters survey), extracted real metrics from primary sources, and built the full data model, components, and page.
Recent AI developments feed
Built /developments — a curated feed of AI developments relevant to legal professionals, with a homepage section showing the 3 most recent. Each entry has a headline, summary, legal relevance callout, tags, and source link. Added 8 real researched entries covering the Florida citation rule, OpenAI legal vertical, Claude for Legal, Microsoft Legal Agent, LexisNexis Protégé, hallucination incidents, 1M-token context, and the governance gap.
Claude's role: Ruben wanted a 'news mode' for the app. Claude designed the data schema, ran web searches across LawNext, National Law Review, and Artificial Lawyer, wrote 8 entries with real citations and URLs, built the full DevelopmentCard component, /developments page, and homepage section.
LLM Deep Dive module — 7-lesson technical module
Added a standalone 7-lesson module covering how large language models actually work: pretraining data, tokenization, transformer architecture, pretraining and base models, SFT/RLHF alignment, reasoning models, and the inference ecosystem. Each lesson has tiered concept blocks, a simulation, quiz, and hands-on challenge pointing at real tools.
Claude's role: Ruben described the Karpathy 'Deep Dive into LLMs' video and a list of companion resources. Claude planned an extensive curriculum from this source material, authored all 7 lesson JSON files with realistic simulations and case studies (Karpathy, InstructGPT, DeepSeek-R1 team), and added matching bibliography entries.
Bibliography / sources page
Built /sources — an auto-generated bibliography that derives practitioner sources from all case studies in the course and renders manually curated extra sources grouped by topic (Harvey, Legora, legal ethics, academic, LLM deep dive). New source groups auto-appear without code changes.
Claude's role: Ruben wanted a credibility signal. Claude designed a group-as-free-string approach (no hardcoded enum) so new research topics never require TypeScript changes, built the source card components and page, and added CLAUDE.md instructions to automatically attribute sources whenever web research is performed.
PowerUser legal track
Added a second learning track: PowerUser — legal AI mastery for professionals using Harvey and Legora. A /poweruser route renders the adapted PowerUser component. The homepage was updated to show two equal track choices.
Claude's role: Ruben added a PowerUser.jsx file he had built separately. Claude assessed how to integrate it into the Next.js App Router architecture, created the /poweruser page, and restructured the landing page to present both tracks without hierarchy.
Project scaffold and first full lesson
Built the full application foundation: Next.js 16 App Router, TypeScript strict mode, Tailwind CSS v4, Zod content validation, a convention-based content loader (glob-based, no central registry), progress store (LocalProgressStore with interface for future remote swap), simulation engine (ScriptedEvaluator + AgentSimulator component with animated transcript), depth system (tiered concept blocks, GoDeeper expanders, DepthToggle), Quiz and Challenge components, and one fully authored lesson (Delegate Then Verify).
Claude's role: Ruben provided a detailed architectural plan. Claude built every layer — content schema, loader, validator script, progress store, sim evaluator, all UI components — and authored the first real lesson with a genuine case study (Simon Willison), working simulation, and quiz. The entire architecture was designed so adding content never requires code changes.