Capability
Technical skills
and what they are for.
Everything below is running in something shipped — this site, a client build, or the lead pipeline behind the studio. Named rather than described, so it can be checked.
Frontend & UI
What the visitor actually touches.
Next.js App Router
Server components by default, client components only where state or the DOM demands it. This site runs on Next 16 and React 19, with route groups keeping two design systems apart in one app.
TypeScript
Typed through the content layer, not just the components. Pricing, plans and projects are typed shapes, so renaming a field breaks the build instead of the page.
Tailwind CSS & shadcn/ui
Radix primitives for the accessible behaviour, Tailwind for the styling. It backs the live Stripe signup flow here.
Design tokens in CSS custom properties
Palette, spacing, type scale and easing defined once and consumed everywhere, so a brand change is one file rather than forty components.
Scroll-driven animation
The hero-to-work transition on this site is tied to scroll position with no JavaScript and no animation library — it runs on the compositor and degrades to a plain page where unsupported.
3D in the browser
react-three-fiber and three.js, with geometry written in code rather than imported as a model — so every proportion is editable and the payload is a fraction of a hosted scene. Code-split, so pages that do not show it never download it.
Accessibility and reduced motion
Contrast measured against the rendered pixels rather than the declared colour. Motion is switched off for anyone who asks for less, by not loading it rather than by hiding it after the fact.
Backend & Infrastructure
What keeps it running once it is live.
Git and version control
A branch per change, a preview deployment per branch, and main reserved for what is actually live. History written so the reasoning survives the author.
Vercel
Production Next.js deployments with preview URLs per branch, environment-scoped secrets, analytics, and rollback.
Stripe
Checkout sessions and webhook handling behind a live signup flow, with prices held in one place as cents so the displayed figure and the charged figure cannot drift apart.
Transactional email
Lead delivery through Resend, deliberately built to fail loudly: a missing key returns an error and writes the lead to the logs, because a form that reports success while dropping the enquiry is worse than one that visibly breaks.
API integration
Firecrawl for site extraction, Google Places for business data, and the Anthropic API for classification — wired into one pipeline rather than used one at a time.
Email pipelines
IMAP ingestion, automated triage, and a scheduled client digest assembled and sent without a person in the loop.
Process & Systems
How the work gets done repeatably.
The WAT framework
Workflows are markdown SOPs, the agent coordinates, and tools execute. Reasoning stays in the planning layer and deterministic Python does the work, because chaining five 90%-accurate steps leaves you at 59%.
Scripted lead generation
A Python pipeline that finds businesses, resolves their real domain, audits the site, scores the result, and exports a ranked call sheet as a PDF. Built once, run repeatedly.
Document-driven development
CLAUDE.md and BRAND.md as the source of truth. Palette values, endpoint behaviour and the reasons behind past decisions are written down rather than re-derived, so a new session starts informed.
Browser automation
Puppeteer for rendering a page the way a customer sees it — screenshots at any viewport, PDFs, and the DOM after JavaScript has run, which is the only version of a site builder page worth judging.
Measurement over assertion
Payload sizes, contrast ratios, frame timing and loop seams get checked rather than claimed. Several times the measurement has contradicted the obvious guess, which is the reason for the habit.