How I Make Stuff with Claude Code - Easy Walkthrough w/Claude.md

Jason Jennings

9h (edited) • 💬 General discussion

This might be useful to you if you're curious how someone else makes things.

This walkthrough will use vanilla HTML, CSS, JavaScript, .MD files.

This will require that you have Claude Code installed already.

The provided Claude.md is specifically for making vanilla HTML, CSS, JavaScript things.

Let's set the mood.

This feels more like sculpting with a friend rather than prompt engineering. Very organic. I have Claude create a basic idea. A lump of clay, not pretty. Then build from here. I imagine what I want and ask Claude to make updates. It will update the file. I will test it. Then ask for more updates. We will keep doing this until we make something we like. We take very small steps. I want to feel each change in UX.

As an example, let's make something extremely useful. We will call it "Useless Spinner App". It will help me make important life decisions.

Here's the finished product -> https://3toedsoftware.com/demos/useless-spinner/

SETUP

1. Create folder on desktop. Call it "Useless Spinner App".

2. Copy Claude.md to folder (provided as attachment, read it for nerd points). This will tell Claude how we want it to do stuff.

START (very small steps)

1. Tell Claude Code "I want to make a spinner app to help me make decisions."

2. Claude will give suggestions. Tell Claude "Let's make it with HTML, JavaScript and CSS. Stay concise and follow your Claude.md."

- This will be the easiest/fastest way to prototype.

- Asking Claude to stay concise and to follow its Claude.md file will reinforce it. This will be the only time we ask it to do this.

3. I let it make something lumpy we can talk about. "Yes, allow all edits during this session".

4. Ask Claude to open the file so we can discuss. It will open in browser.

5. I test everything. Click buttons. Move sliders. Head-butt the screen. I look for problems and note them all. I open notepad and make a list.

6. I like to feed the list of problems one at a time, but if I have lots of experience in the codebase I might give it the full list.

7. Then back to step 5 and repeat until we have a good proof of concept.

8. Then I ask Claude to create a comprehensive prompt explaining that concept.

9. Last, I create a whole new folder, copy the claude.md over, and start a new Claude Code session with that comprehensive prompt, so that it makes it again from scratch. This helps mitigate bugs/slop from the organic process.

This process might be better for more visually oriented people. I definitely prefer to see something as I think through it.

SOME THINGS I'VE LEARNED

- I do try to one-shot things for fun, but I find that the larger the codebase, the higher chance things can go sideways if you make large requests. Things just start to pour through its fingers.

- I've done several refactors, like switching everything to ES Modules after making GIANT god files. It's pretty impressive, but it makes me nervous to do that.

- The biggest issue I've run into is something I call "evil context partitioning." As your project grows, Claude can only hold so much of it in its head at once. So it makes a change that looks right in isolation, but it conflicts with something in another file it hasn't read yet. Duplicate functions, naming conflicts, styles that override each other.

- The fix that worked for me: an ARCHITECTURE.md file. It's basically a summary of how everything connects. What files exist, what they do, how data flows between them. Claude reads it at the start of every session, so even when it can't hold the whole codebase in context, it has a map. It knows where things are before it starts changing things. This is already built into the provided CLAUDE.md. Claude will create and maintain the ARCHITECTURE.md on its own.

- Small steps help with this too. The less you change at once, the less chance something collides with something Claude forgot about.

GOODIES

I have Claude set up all of these. They let us save checkpoints and help Claude create better code. These are all in the Claude.md. I use all of these on every project.

- Git -> saves checkpoints so you can go back in time to previous versions. These checkpoints are usually referred to as "commits".

- ESLint -> catches bugs and mistakes in your JavaScript code.

- Stylelint -> catches duplicate CSS rules, deprecated properties, and other CSS problems.

- HTMLHint -> catches structural issues in your HTML like missing attributes and unclosed tags.

- Prettier -> auto-formats all your code so spacing and style stay consistent.

- Hooks -> this is like an action/reaction thing. if something happens (like saving a checkpoint), then the hook says do something (like check all my code for mistakes).

- Husky -> makes git hooks easy to set up so all the things above run automatically before every commit.

- Obsidian -> Claude's long-term memory. Huge time saver.

Is this generally how you guys do things?

0 comments