Skip to content

CLAUDE.md

Latest commit

 

History

History
104 lines (72 loc) · 4.91 KB

CLAUDE.md

File metadata and controls

104 lines (72 loc) · 4.91 KB
Raw

CLAUDE.md

Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.

Tradeoff: These guidelines bias toward caution over speed. For trivial tasks, use judgment.

1. Think Before Coding

Don't assume. Don't hide confusion. Surface tradeoffs.

Before implementing:

  • State your assumptions explicitly. If uncertain, ask.
  • If multiple interpretations exist, present them - don't pick silently.
  • If a simpler approach exists, say so. Push back when warranted.
  • If something is unclear, stop. Name what's confusing. Ask.

2. Simplicity First

Minimum code that solves the problem. Nothing speculative.

  • No features beyond what was asked.
  • No abstractions for single-use code.
  • No "flexibility" or "configurability" that wasn't requested.
  • No error handling for impossible scenarios.
  • If you write 200 lines and it could be 50, rewrite it.

Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.

3. Surgical Changes

Touch only what you must. Clean up only your own mess.

When editing existing code:

  • Don't "improve" adjacent code, comments, or formatting.
  • Don't refactor things that aren't broken.
  • Match existing style, even if you'd do it differently.
  • If you notice unrelated dead code, mention it - don't delete it.

When your changes create orphans:

  • Remove imports/variables/functions that YOUR changes made unused.
  • Don't remove pre-existing dead code unless asked.

The test: Every changed line should trace directly to the user's request.

4. Goal-Driven Execution

Define success criteria. Loop until verified.

Transform tasks into verifiable goals:

  • "Add validation" → "Write tests for invalid inputs, then make them pass"
  • "Fix the bug" → "Write a test that reproduces it, then make it pass"
  • "Refactor X" → "Ensure tests pass before and after"

For multi-step tasks, state a brief plan:

1. [Step] → verify: [check]
2. [Step] → verify: [check]
3. [Step] → verify: [check]

Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.

These guidelines are working if: fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.

Project notes

Old portfolio (still live at old.brandonmoore.design):

  • Local path: /Users/brandon/Development/Portfolio-old
  • Stack: Gatsby + Sanity (monorepo: web/ + studio/)
  • Logo lives at web/src/components/header.js and web/src/images/favicon.svg — a circle with a half-fill "liquid" shape (the inner dome). Brandon originally imagined the liquid sloshing on interaction; that animation was never implemented in the old site.
  • The slosh is now implemented in this site at src/components/LiquidLogo.astro — click the logo for a drain → refill cycle, with droplet shower on full page reload (brand link uses data-astro-reload).
  • Useful reference for: prior copy, asset history, project case study content.

About Brandon (for copy / positioning):

  • Product Designer on the Power BI design team at Microsoft (since he started there).
  • Based in Newfield, NY — says "Ithaca, NY" publicly.
  • Strong accessibility background, but day-to-day is mostly product design now.
  • Technical designer. Hand-codes his own portfolio. Previously worked as a front-end developer (didn't love it at the time, partly because pre-AI debugging was a slog). Builds his own PCs. Comfortable in code — this is part of his point of view, not a side-skill to mention in passing.
  • Loves: prototypes, pixel pushing, motion, microinteractions.
  • The 🦄 unicorn easter-egg emoji in the about copy is intentional — keep it.

Design rules

  • No pill buttons or pill-shaped hover states. Don't use fully-rounded (rounded-full) for buttons, links, nav items, tags, or any interactive surface. Use squarer corners (rounded-lg, rounded-xl, rounded-2xl) consistent with the rest of the system. Pills are reserved for genuinely pill-shaped UI like single status tokens — and even then, ask first.

cool animations

https://lusion.co/ the project items here have cool effects on scroll

here are some must read articles you can read and learn about to apply to anything animation related: https://emilkowal.ski/ui/the-magic-of-clip-path https://emilkowal.ski/ui/7-practical-animation-tips

You should incorporate using blur, motion, and clip paths to create beautiful animations on most interactions. Read into Emil Kowalski. He's not advocating against animation here at all, he's just about making it purposeful: https://emilkowal.ski/ui/you-dont-need-animations "But sometimes the purpose of an animation might just be to bring delight."

Strive to always use whole pixels for elements on the page. It creates a consistent visual grid and looks much better on displays that struggle to show half or partial pixels.