Growuild · Personal handbook

How to make Claude better.

A living document I'll read at the start of every Claude session. Edit anything, add anything, and Claude inherits it. Stored locally in your browser; export as JSON when you want to back it up.

Live Last edited never ⌘E toggle edit · ⌘S force save

★Right now

What I'm working on at this minute. Use it as a handoff to the next device / partner / Claude session. Click Stamp to prepend a timestamp.

— nothing logged yet —

00TL;DR

The single page Claude should read first. Keep it under 200 words. Below: the longer index.

I'm Henry, founder of Growuild — a Singapore web design + ORM agency targeting SMBs. Building with Claude is most of how I work. Voice: editorial, restrained, premium. Hate generic AI-agency aesthetics (Inter, Space Grotesk, purple gradients). Love Fraunces, italic accents, Singapore-specific texture. Defaults: deploy to Cloudflare Pages, dark mode by default, mobile-first but desktop-cinematic, agency-craft skill discipline. Live projects: growuild.org (portfolio) · growuild-os (internal OS) · astra-skincare (D2C demo, cinematic complete) · growuild-handbook (this page) · empire-food-catering (real client) · inkredibletattoosupply.com (real client). What I want from Claude: aggressive autonomy. Don't ask permission for things I've said before. Verify your own work with Playwright before reporting done. When you don't know, say so — don't fabricate.

01Active projects

What I'm building right now. Drop in URLs + one-liner status so Claude can pick up mid-thread.

- growuild.org — agency portfolio · live · 17 cards, Inkredible + Rose Gold KTV are real clients - growuild-os.pages.dev — internal OS · Supabase backend · setup status panel pending v2/v3 SQL - astra-skincare.pages.dev — D2C demo · cinematic build complete: intro curtain, hero camera-orbit, sticky cydstumpel banner, 3-chapter molecules cinema + persistent particle canvas + slow molecule rotation, davidwhyte blur scrub on 9 copy lines, right-edge scroll rail, full SEO/OG + JSON-LD product schema - growuild-handbook.pages.dev — this page · Supabase sync (table SQL pending), ?raw=1[&section=ID] for Claude WebFetch, "Right now" scratchpad, per-section last-edit pills, session-starter prompt builder, offline service worker - empire-food-catering.pages.dev — real client · awaiting $650 quote signoff - inkredibletattoosupply.com — real client · live, monthly retainer - rave-productions.pages.dev — bento services grid recently rebuilt Add new ones here when they start. Strike them out when they ship.

02Inspirations

Sites Claude can WebFetch + analyze before starting visual work. URLs only — Claude does the analysis.

- davidwhyte.com/experience — persistent canvas + per-line blur scrub - cosmos.studio — scroll-pinned camera-orbit hero - cydstumpel.nl — sticky-banner overlap, hero refuses to leave - lusion.co — DPR cap + pixel budget mobile pipeline - exoape.com — per-section video discipline - 14islands.com — Lenis desktop-only, hover-fine pointer gates - obsidianassembly.com — Nuxt + GSAP + SplitType - apple.com/iphone-17-pro — sticky chapters > ScrollTrigger.pin on mobile - growuild-inspirations.pages.dev — full curated list For ASTRA-tier work: paste the inspiration URL + tell Claude to spawn parallel agents to analyze before building.

03Style rules

Hard "always / never" rules. Claude should treat these as immutable for the brand.

NEVER: - Use Inter, Space Grotesk, DM Sans, Geist, Outfit (AI-agency stock fonts) - Generic purple gradient on white background - Stock illustrations as decoration - 5 colors at equal weight (always: dominant + accent) - Emojis in production UI (only if user explicitly asks) - Generic "premium dark cosmos" without a concept - Same component structure for both menu cards and blog cards - Trust the deployed site without Playwright verification ALWAYS: - Fraunces for editorial display + Inter Tight for body OR JetBrains Mono for metrics - One signature visual moment per site (the screenshot) - Section rhythm: alternating dark/cream, never wall of one color - Dark mode default, light mode optional - Mobile-first responsive, but desktop-cinematic for hero - Italic-accent in Fraunces for emphasis instead of bold - Tabular nums for numbers (font-feature-settings: "tnum") - Test all CRUD + scroll behaviors with Playwright before reporting done - Deploy to Cloudflare Pages, hand back the .pages.dev URL

04Code patterns I want

When Claude writes code for me, default to these shapes.

Stack defaults: - Vite + React + TypeScript for SPAs - Vanilla HTML+CSS+JS single-file for cinematic landing pages - Tailwind v4 with @theme tokens (not v3 config) - Motion (formerly Framer Motion) for React animation, not raw GSAP - GSAP + ScrollTrigger only for scroll-pinned scrub timelines - Lenis desktop-only (smoothTouch:false, gate on matchMedia("(pointer:fine)")) - Supabase for backend with VITE_SUPABASE_URL/ANON_KEY env vars Component patterns: - Glass primitive for surfaces (backdrop-filter blur) - Drawer for inline editing (Esc closes, lock body scroll) - Field for inline-editable text (saves on blur) - Kicker for section labels (uppercase, tracking-[0.32em]) - StatusPill for state indicators - KineticNumber for count-up rAF animations - Empty states: invitation, not "no data" Naming: - React components PascalCase, files PascalCase - CSS uses --color-ink for text (4 shades), --color-pane for surfaces - Section accents: cyan strategy, amber content, magenta clients, lime missions, lavender inspiration

05Mistakes you've made

Claude — don't repeat these. Add new ones as they happen.

- Over-aggressive regex deleting good cards alongside flagged ones (growuild.org cleanup). Always preview substring matches before bulk replacement. - HTML-tag-broken matches missed on rename — Chen & Associates vs Chen <span>&</span> Associates. Always do a full grep after rename, not just pattern match. - Renamed cards but never created new CF projects — left dead links pointing to heartlands-cards.pages.dev etc. Either rename underlying site OR keep card pointing to existing project. - Deployed without verification — wrong scroll positions in tests led me to declare chapters 2/3 broken when they actually worked. - Translate(-50%,-50%) baked into spin keyframes shifted rings off-center. Cleanup unused keyframes after deleting components. - Framer motion's transform on motion.div clobbers inline style.transform — wrap motion.div inside positioning div, not the other way around. - Used trademark-conflicting names without IPOS check — FORGE Fitness incident. Always check Singapore IPOS before fictional brand naming. - Forgot user said "real client" when nuking sites in trademark cleanup. Verify list of real-vs-demo clients before destructive ops. - Lenis wheelMultiplier > 1.0 + short duration = stuttery scroll. User reported "1% to 10% jumps" on ASTRA. wheelMultiplier:1.15 + duration:0.85 + ease-out cubic amplified each wheel tick into a chunky ramp. Default for cinematic sites:

{duration:1.2, easing:t=>Math.min(1,1.001-Math.pow(2,-10*t)), wheelMultiplier:1.0, lerp:0.1, smoothWheel:true, smoothTouch:false}

. Don't multiply wheel input unless the user explicitly says scroll feels slow. - Visual bugs invisible to DOM/state checks. Two real bugs (ASTRA rail tooltip occluding stat content, Handbook toolbar background too transparent) only surfaced when I took screenshots and looked. Lesson: after any UI change, take screenshots at multiple scroll positions on desktop AND mobile. Don't rely solely on opacity/state assertions.

06Workflow preferences

How I want Claude to actually behave during work.

Autonomy: - Take initiative. Don't ask "do you want me to fix this" — fix it. - Verify your own work before reporting "done". Headless Playwright at multiple viewports. - When in doubt about scope, ask ONE focused question, not five. - Don't over-narrate. Show the result. Skill use: - Always announce skill choice BEFORE writing client-facing code (HARD RULE in memory). - Use codex for design forks (architecture, "this vs that"). - Use agency-craft + distinctive-frontend for premium agency builds. - Use scroll-story for cinematic landing pages. Build/deploy: - Always deploy to Cloudflare Pages on completion. - Hand back the .pages.dev URL as part of "done". - For React SPAs, include _redirects: /* /index.html 200. Communication: - Singapore English: dollar amounts in SGD, addresses in SG style. - Don't use emojis in writing unless I do first. - When listing trade-offs, use a table. - Keep summary "what shipped" at top, "what's pending" at bottom.

Cross-device sync — one-time setup

Currently saving to this browser only. To sync across devices, run this SQL once in your Supabase SQL editor (project hkgebgvtiejumtixssqr):

create table if not exists public.handbook (
  id text primary key,
  content jsonb not null,
  updated_at timestamptz default now()
);
alter table public.handbook enable row level security;
create policy "anon read"  on public.handbook for select using (true);
create policy "anon write" on public.handbook for all using (true) with check (true);
insert into public.handbook (id, content) values ('global', '{}'::jsonb)
  on conflict (id) do nothing;

Session starter

Type what you want to work on — the prompt below auto-fills with the handbook URL + your "Right now" scratchpad as live context. Paste into a new Claude session.

include "Right now" light fetch (one section)

Tip: each section above has a copy raw link button — gives Claude a URL like ?raw=1&section=rules for ~80% lighter context when only one section is relevant.