How to make Claude better.

- 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. - BIG ONE — Reaching for compositor effects (Glare, bloom, streaks) instead of building proper materials/geometry on premium work. Did this on the ASTRA constellation: when it looked flat, I added Cycles Glare nodes (Fog Glow + 4-point Streaks) to fake quality. User correctly called it out — "this is just a low quality glow" — because compositor effects strip specificity and turn anything into the same generic "CG-toy lens flare" look. The bottle work was good because real PBR + physics did the work, with restraint. The constellation was bad because I bolted on post-process effects to mask weak geometry/lighting. Hard rule for premium work: if a render feels flat, the answer is NEVER bloom/glare/streaks. The answer is better geometry, better materials, real volumetric atmosphere, or restraint (more darkness, fewer elements). Compositor glare is the Photoshop "lens flare" filter of 3D — amateur tell. - BIG ONE — NEVER start premium work without researching real references first. User has a curated inspiration archive at growuild-inspirations.pages.dev with ~100 sites. ALWAYS visit 3-5 relevant references BEFORE building any high-end concept. The bottle work was good because I had side.jpg as a constant reference. The constellation was bad because I improvised without studying actual cinematic space-design references (lusion.co, cosmos.studio, igloo.inc, NASA APOD, Apple AirPods spatial-audio scene). Required workflow for premium client/portfolio work: (1) Open the inspirations site + 2-3 specific references for the exact thing being built, (2) identify the principles that make them premium vs amateur (usually: restraint, real materials/physics doing the work, darkness dominates, depth via volumetric not post-process), (3) plan around those principles, (4) THEN build. Skipping the research pass is the single biggest predictor of mediocre output. - BIG ONE — One reference is not research. On the ASTRA constellation rebuild I shortlisted 6 sites; only cosmos.studio actually delivered usable celestial reference (others were loading-state, cream-bg non-celestial, or DNS-failed). I almost extracted "principles" from a single data point. Hard rule: minimum 3 confirmed-relevant premium examples before generalizing into principles. If round 1 yields only 1 hit, do a round 2 with different search terms before building anything. One reference = a screenshot to copy; three references = a pattern to design from. - RECIPE — Premium celestial / cinematic-dark scenes (cosmos.studio decomposition). Reference: cosmos.studio. What makes it premium: • Darkness ~95% of pixels — near-black BG (#05060a, never flat #000 — leaves room for star contrast without banding). • Stars are 1-3px pinpoints — single emissive pixels or 2px icospheres. NEVER cross-bursts, NEVER bloomed halos, NEVER 4-point sparkles. • Uneven density gradient — sparse at edges, denser around the focal point. Weighted random, not uniform scatter. • One hero element per frame — cosmos.studio has a central instrument-dial; not "lots of cool things competing." Pick one anchor. • Technical monospace anchor — small JetBrains/Berkeley Mono labels (10-11px, all-caps, low-opacity white) reading like coordinates / instrument data. Anchors the frame as scientific instrument not wallpaper. • Color: ONE accent at ~5% of pixels — stars stay white; accent appears on a thin 0.5px connecting line or single ring. Never paint the stars themselves. • Material does the work, never compositor — emission shaders on tiny geometry. No Glare nodes. If it looks flat, fix material/geometry, don't add post-process. • Tech on cosmos.studio: Three.js, stacked canvases (separate passes for star field + instrument), Lenis. Anti-pattern that fails this recipe: big bloomed cross-stars filling 40% of the frame with saturated colors — reads as 2008 Photoshop lens-flare every time. Iter 3 advanced moves (the difference between "decent" and "portfolio-tier"): • Hero element hierarchy — primary node ~1.5× the others, with a thin orbital ring (torus, minor radius 0.0025) tilted ~75° around it. Animate the ring rotating ~45° during the chapter window. This is the cosmos.studio "instrument dial" trick. • Bond hierarchy — main 2 bonds ~45% thicker than aux bonds. Gives the shape READABILITY instead of "all lines same." • Real diffraction spikes (NOT compositor glare) — on the brightest 5-10% of stars, add 4 razor-thin emissive PLANES forming a "+" cross (length 0.20-0.34, thickness 0.0006). Track to camera via constraint. This is the cinema-photography aperture-blade look. • Star palette: 6 classes weighted — 55% white (G-type), 18% warm-cream (K), 10% amber (M), 10% cool-blue (B), 5% hot-blue (O), 2% red-dwarf. Real star fields have chromatic depth. • 3-layer star depth — 30% far (r=28-45, dim, tiny), 50% mid (r=15-28), 20% near (r=8-15, brightest, biggest). Gives parallax feel during camera dolly. • Faint volumetric halo at hero — small uvSphere (radius ~0.32) at primary node center, with Volume Scatter material at density 0.7, color = chapter accent. Gives the chapter color a soft glow that ISN'T post-process bloom. Cycles needs volume_step_rate=0.4, volume_max_steps=24 for clean render. • Billboard stars facing camera — use planes with TRACK_TO camera constraint, not icospheres. Sharper pixel-edges, ~5× faster render. • Standard view transform, not Filmic — Filmic's high-emission rolloff softens bright pixels into "puffy clouds." For pinpoint stars + thin lines you NEED hard edges, which Standard preserves. Render time benchmark: 60 frames × 1920×1080 × 128 samples × Cycles GPU CUDA = ~24 min on RTX-class GPU with the iter 3 setup (volume halos + diffraction spikes). Without volumes drops to ~16 min. - RECIPE — "Single-column dark vertical stack" (obys.agency style). Reference: obys.agency (Awwards SOTY). What makes it premium: • 95% pure black BG with content confined to a narrow center column (~640px wide on a 1280 viewport). • Project tiles stacked vertically — square thumbnails one after another. NO horizontal navigation. NO sidebars. Scroll IS the navigation. • Tiny monospace "99" counter top-right — same scientific anchor pattern as cosmos.studio (8-9px mono, bottom-of-corner placement). • Custom proprietary font ("Obys") declared in body — paid agency-only typeface gives unique signature. For demos use Migra, PP Editorial Old, or GT Sectra. • WebGL canvas for project thumb hover effects (transitions / displacement maps). When to use: agency portfolio that wants to scream "we don't show off, the work does." Radical commitment to single-column scroll + black BG = anti-trend statement. Anti-pattern: filling the black BG with stars, gradients, ambient effects. Empty black IS the design. - RECIPE — "Editorial cream + huge condensed display + pastel column blocks" (akaru.fr style). Reference: akaru.fr. What makes it premium: • Cream/off-white BG (~#f5f3ec), NOT pure white. Slight warmth signals editorial, not tech. • HERO TYPE: condensed bold display ("AKARU" in Anton/Druk-style super-condensed sans, easily 200-300px on desktop). The brand name IS the hero element, not a tagline. • Right-side pastel column blocks — solid color rectangles in 4 muted tones (sage, dusty pink, periwinkle, mauve) creating a visual ladder down the right edge. Photos peek through some. • Pill nav with colored bullet dots — each section has a tiny colored circle (orange, green, red, blue) before its label. • Numbered thumbnails ladder on far right edge (01, 02, 03 mini-tiles indicating projects below). • Body type: paragraph max ~520px wide, sans (light weight) sitting under the display monogram. French/multilingual sites lean into long sentences here. When to use: agency that wants editorial-magazine feel + bold typographic identity. Works for translated/multilingual brands (FR/EN/PT). Anti-pattern: using Inter or Space Grotesk for the display word — kills the editorial feeling instantly. Must be a condensed display face (Anton, Druk, Akzidenz Grotesk Black Condensed, NaN Holo). - RECIPE — "Product-as-monument on cosmic landscape" (organimo.com style). Reference: organimo.com. What makes it premium: • Single product centered on a dramatic landscape — bottle/jar/object floating above a mountain ridge, with a starfield BG. The product is the only subject. • BG is photographed/rendered terrain — not flat color. Volcanic rocks, alpine ridge, lunar surface, etc. Adds scale + drama. • Tagline in italic-display serif ("Limitless begins here.") at lower-left, separate from the product. • Colored micro-dots in top corners (pink/orange) — UI accents that signal "interactive" without dominating. • Lenis smooth scroll + WebGL canvas for product reveal animation on scroll. When to use: hero product launch where the SKU itself is iconic (skincare, supplement, fragrance, audio device). Works only when the product genuinely deserves monument treatment — don't apply to commodity. Anti-pattern: three products competing in the hero. If you have a product line, pick ONE flagship for the monument shot, link the others below. - RECIPE — "Radial typography as identity" (patrickmason.studio style). Reference: patrickmason.studio. What makes it iconic: • Studio name letters arranged AROUND A CIRCLE — "P · A · T · R · I · C · K M · A · S · O · N" curving into a perfect ring. The circle IS the logo + the navigation. • Pure white/near-white BG (98%+ light pixels). Letters render in regular weight black. • Tiny "?" help icon floating at top-left of the circle — invites click without dominating. • Project pills below — small rounded squares with mini-thumbnails or monograms (LB, "Banduch", → arrow). • "Add Project +" tile — turns the page into an interactive collection rather than static portfolio. When to use: personal portfolio / one-name studio where the IDENTITY itself is the hero. Memorable because the navigation doubles as the brand mark. Implementation: use SVG <textPath> with a circle path. Animate path-rotation slowly on hover. ~50 lines of SVG + CSS, no JS framework needed. Anti-pattern: using radial-typography as decoration somewhere on the page. The radial element MUST be the only hero — competes with anything else. - RECIPE — "Massive statement headline with floating image scatter" (floema.com style). Reference: floema.com. What makes it premium: • Cream BG (~#f2efea) — same warmth principle as akaru. • HUGE statement headline center-page in custom serif (floema uses "Zimula"; for demos try Cardinal Fruit, Ogg, Recoleta Black). 50-90px range. Two lines max. • ~25 small thumbnail images SCATTERED organically around (and overlapping) the headline. Sizes vary 20-150px. Positions look random but are choreographed — the headline reads through the gaps. • Pill-shaped rounded-rectangle nav at top — each link in its own subtle pill (PRODUTOS, SOBRE, SUSTENTABILIDADE). • Cookies button bottom-left as small mono "CO" pill — even the GDPR ugly is brand-styled. When to use: portfolio / catalog brand with rich image inventory (furniture, fashion, architecture, food). The scatter says "we have so much beautiful work it overflows the page." Implementation: CSS Grid or absolute-positioned cards with random transforms. Use z-index to layer images BEHIND the headline; the headline itself is foreground with no shadow/outline (it punches through gaps via stacking, not via blur). Anti-pattern: bouncing/animating the scattered images on hover — kills the calm. The scatter should be still; only the headline (and individual hover) interacts. Round 2 validation (3 dark-cinematic premium sites): cosmos.studio (95% near-black, monospace dial hero, tiny faint stars as background texture) · activetheory.net (89% near-black, central glowing orb hero, drifting micro-particles) · bruno-simon.com (65% near-black, glowing ring hero on grid floor, 1-2px X-marks). All three follow: dark dominant + ONE hero element + tiny pinpoint accents. Stars/particles are never the hero — they're the texture that makes the hero feel cinematic.