r/BuildWithClaude

▲ 62 r/BuildWithClaude+2 crossposts

Most of my time now is spent reading and thinking, rather than writing code

I've been meditating on this for the last few months and I's still not sure how I feel about this change.

On one hand, my nearly 30 years of experience in design and development is serving me well, in that I am capable of making sound decisions about virtually any aspect of significant and complex digital products. Which means my day-to-day is no longer spent banging out code, building wireframes, or fiddling with Photoshop. It's literally reading and writing specs all day about which feature to add, how it should function, etc.

So, that feels ...smarter, somehow.

But, on the other hand my identity, and consequently where I had previously found joy, is somehow still tied to what in my head I had always thought of as the "craft" of execution.

I wonder how people who were in "Product Manager" roles are adapting to this change? Are they also moving up the thought-ladder into a different role? Or are we, as an army of displaced designers and developers, suddenly encroaching on an immovable barrier between product design and where the money starts?

reddit.com
u/dennisplucinik — 4 hours ago
▲ 3 r/BuildWithClaude+1 crossposts

Can we all build something together

Can we all build something together a huge project and worlds largest company with 10000+ founders???

Get Claude to blueprint the idea and let’s go if you think it’s worth it???

reddit.com
u/Commercial_Try_2538 — 4 days ago
▲ 6 r/BuildWithClaude+2 crossposts

I built a real-time contact graph activity lead gen dashboard, pls roast me.

Don't worry, this isn't a pitch for a product, I built this for my own company's private use. I just wanted to share and get feedback from you fine folks 😄

This is probably the most valuable thing we've created for ourselves and it's only a small part of what we've been building with AI over the last few months.

This internal tool (codenamed Armory) is designed to keep us informed about our network and stay engaged with people whom we've had a positive working relationship.

Our business is entirely relationship-based, so naturally we began with designing a system to organize our contacts. Starting with ingesting ~3M personal and professional emails over the course of the past 20 years, we were able to create contact records that consolidate known emails and companies for every individual person in our network.

To summarize what you see on this screen, we've combined several different data sources including:

  • email history
  • contact information
  • employment history
  • Otter.ai meeting transcripts
  • MailChimp campaign interaction history
  • Manual category and relationship classification

Sentiment Analysis

The Sentiment Analysis chart in the center is derived from a combination of all those signals and describes:

  • the overall positive/negative tone of our conversations (Tone)
  • how recently I was in contact with this person (Recency)
  • how long ago was our first contact (Longevity)
  • how often this person replied to me (Reciprocity)
  • the amount of communication (Volume)

Once we have a Sentiment, we can perform a Deep Dive analysis and subsequently what we call a "World Model" analysis.

Deep Dive Report

The Deep Dive analysis performs an internet search using information like associated email addresses, name, name and employment history in order to find things like articles this person has written, articles or press about them or their company, activity on social media, etc.

Once we have a Deep Dive report, we can perform a World Model analysis which includes an assessment of this person's:

  • career trajectory (how engaged are they professionally)
  • transition moment (have they started a new position recently)
  • likelihood (are they in a position to hire us)
  • urgency (have they posted recently or is there recent news related to our services)
  • budget (company size and revenue, and potential type of engagement)
  • relationship (incorporates sentiment analysis in the context of an engagement)

World Model Report

If the Deep Dive Report answers "who is this person", the World Model analysis answers "what should we do about them, when, and how." It's a decision-oriented LLM synthesis pass that forbids speculation without evidence.

In general, it assesses:

  • Current state: 3-5 bullets on role/tenure, company phase, active initiatives, location, public posture
  • Derived signals: Career velocity (accelerating/steady/decelerating/pivoting), transition moment, behavioral patterns, network activity, domain trajectory
  • Predicted intent: Hiring / vendor evaluation / platform scaling / rebranding / thought leadership / fundraising — each with High/Medium/Low probability + evidence
  • Opportunity score: 3 dimensions (1-10): Likelihood, Urgency, Budget. Overall = average
  • Relationship strength: One of: deep / strong / active / stable / distant / cold (based on email count + recency + tags)
  • Suggested action: One primary: engage / reconnect / pitch / monitor / introduce / collaborate
  • Message angle: Only when the action is outreach: lead_with, connect_to, avoid, tone, channel

In closing

The key here is automation. The Sentiment Analysis, Deep Dive, and World Model reports all happen automatically in nightly batches. Though the graphs and charts look pretty, the utility is the near real-time actionable insights. Our goal is to understand our network, understand what the market needs, and only spend time connecting with people we can actually do great work for and who already know us.

One of the biggest regrets I've had is losing touch with great people we've worked with over the last ten years. I've often felt like those connections slip through your fingers but with this type of intelligence, we no longer have to worry about that.

This is just one of a suite of internal products we've built which include things like analyzing industry trends and social chatter, and auto-generating scheduled goal-oriented content across a variety of channels including social, blogs, newsletters, and direct outreach using automated self-learning a/b test data from multiple analytics sources. Super fun stuff like that.

A final important word of warning about building these types of "automation" systems:

>

These tools can help us automate information gathering, and they can even help tell you where and how and what to write but the final decision to execute those recommendations is performed by an actual person. There are already too many cold calls and emails, mastermind calendar invites, newsletters, and other types of un-targeted spam on the internet; we don't want to add to that noise.

The goal here is to spend our time enriching existing relationships, and pursuing only the most valuable opportunities.

———

Tech stack notes:

  • OpenClaw
  • Neo4j
  • Qdrant
  • N8N
  • Postgres
  • Chrome extensions

Claude Code with VS Code using the Smith harness was responsible for configuring all services, workflows, prompts, and integrations. There are 11 Docker containers running a variety of other aspects of this system, with the Contact Graph connecting with the Sentiment Engine, Communication Triage, Meeting Intelligence, Social Listening, Mailchimp Sync, and Deepdive Worker applications (again, all custom built with Claude Code)

u/dennisplucinik — 3 days ago
▲ 5 r/BuildWithClaude+3 crossposts

Pickleball Pro vs Amateur AI Swing Analysis

Wanted to share with everyone a pretty cool experiment I worked on over the last couple weeks. Let me know what y'all think!

SUMMARY

This system was developed using Claude Code. The seven-stage pipeline (audio-based serve detection, video segmentation, MediaPipe pose extraction, statistical baseline computation, and comparison reporting) was architected and implemented through spec-driven development over a few weeks using the Smith harness (https://smith.attck.com). Our role was direction, review, and the manual curation steps where human judgment matters, like selecting which serves to include in the baseline.

Final comparison video: https://youtu.be/F9wHacvYza0

THE PROCESS

1. Ingest professional gameplay
Match broadcasts are downloaded and indexed by audio. The distinctive "pop" of a paddle striking the ball is detected acoustically to flag every serve candidate in the footage.

2. Isolate serves from a consistent perspective
Each candidate is filtered by camera angle and court position so that every clip used in the baseline shows the server from the same viewpoint.
Inconsistent angles are discarded.

3. Extract pose data with MediaPipe
Every frame is passed through Google's MediaPipe pose landmarker, producing a 33-point skeleton for the serving player. Smoothing filters remove noise while preserving the kinematic detail that matters.

4. Derive a professional baseline (with statistical margin of error)
111 curated pro serves across 11 professional matches are aggregated into a statistical baseline. Each biomechanical feature gets a mean, standard deviation, and confidence interval. To further inspect the data, we segmented the serve into four stages: setup, backswing, forward swing, and follow-through. This lets the system make more targeted recommendations.

5. Process amateur footage through the same pipeline
The amateur serve runs through every identical stage, same detection, same pose extraction, same feature computation.

6. Calculate statistically significant differences
Each amateur feature is compared against the pro baseline. Differences are ranked by effect size and statistical significance so the recommendations that come out of the system aren't opinions. In this case: the amateur's serve is fundamentally an arm-only motion (4° of trunk rotation vs 50° for pros), the kinematic chain isn't sequencing correctly (forearm peaks 63% slower than pros), and there's almost no follow-through (75% shorter than the pro median).

TECH STACK

Python · MediaPipe · OpenCV · NumPy · SciPy · librosa · Claude Code

Here are the full analysis reports if you want to see how detailed the data gets:
https://attck.com/wp-content/uploads/2026/pro_serve_baseline_report.md
https://attck.com/wp-content/uploads/2026/amateur_vs_pro_report.md

u/dennisplucinik — 4 days ago
▲ 3 r/BuildWithClaude+1 crossposts

People kept calling me a bot for my last post, so here's an easier to understand breakdown.

A couple of days ago I posted about my 3 layer system I built to address Claude memory issues and how I set it up.

https://www.reddit.com/r/claude/s/jloGQbiMZO

I got quite a few DMs asking for a simpler breakdown. Here is a one pager that breaks everything down.

For the people who called me a bot, you're wrong.

My system isn't a single prompt and it's not static. It's 20+ files that reference each other. There's a live database that changes every day from real meetings as well as slash commands that run multi-step workflows against actual API endpoints. It took me about two weeks to build.

A bot would've gotten it right the first time.

One pager includes:

- Every file in the project and what it does

- How the database and dashboard fit in

- The slash command pattern (/morning, /debrief, /close, /weekly)

- Data flow from meeting transcript to database

- The mistakes I made so you don't have to

- Daily routine

- Total cost ($100/mo Claude Max, everything else is free tier)

- Step-by-step if you want to build your own

TL;DR: Claude forgets between chats. I gave it permanent context with markdown files, a database for live data, and slash commands that run like scripts. Nothing writes without my approval.

One pager: https://ballyhofam-bot.github.io/claude-project-os/blueprint.html

GitHub repo with templates: https://github.com/ballyhofam-bot/claude-project-os

ballyhofam-bot.github.io
u/Longjumping-Store434 — 4 days ago

"Best Practices" that were written before your coworker could read 10,000 lines in 3 seconds.

Someone recently told me that having 900 lines in one file is "irrational." Sir, my coworker eats 900 lines for breakfast and asks for seconds.

I've been building with Claude Code daily for about 5 months now — production apps, internal tools, stuff I actually use at work. And I keep bumping into the same advice from people who learned to code before AI could write it for you:

"Max 150 lines per file" — Claude reads 900 lines the way you read a sticky note. A single file with clear sections is actually easier for it to work with than 10 tiny files it has to hop between. When something outgrows a single file, I feel it. Then I split. Not before.

"You need a framework" — I've shipped production tools with zero dependencies. Browser APIs are absurdly powerful now — canvas, IndexedDB, drag-and-drop, media recording. Frameworks solve team coordination problems. My team is me and an AI that doesn't need onboarding just lessons and guidelines it learns along the way from you and for you.

"Plan everything before writing line one" — My production dashboard is tens of thousands of lines. It started as a single file. Half my tools still are single files — because they do one job and they do it fine. The ones that grew earned their architecture. The ones that didn't never needed it.

"If you need maintenance you did it wrong" — Respectfully, no. Nobody gets it right the first time. The difference is that fixing things with AI takes minutes instead of days. Build, break, learn, fix. That loop IS the process now.

>I'm not saying best practices are wrong. I'm saying they were designed for a world where humans had to read, understand, and maintain every line. When your coworker can digest your entire codebase in seconds, some of the rules change. Not all of them. But some.

Made a cheat sheet with this and a few other things I figured out the hard way. Not a tutorial — more like the stuff nobody tells you until you've wasted a few sessions learning it yourself.

The no-gatekeeping guide to Claude Code — from install to shipping your first tool.

>Feel free to tell me I'm wrong — I know this one's gonna rustle some jimmies. 😄

reddit.com
u/Ok_Industry_5555 — 6 days ago
▲ 26 r/BuildWithClaude+1 crossposts

HTML is the new "there's an app for that"

I've stopped downloading apps for half the things I need. If I need it, I just build it as HTML with Claude.

New design idea? HTML. Resume update? HTML. Internal dashboard? HTML. Video editor with subtitles and TTS? HTML.

My latest example: I needed a video narrator tool — upload a video, generate subtitles, preview with overlay, export clips with TTS voiceover. Instead of hunting for some $20/month SaaS, I described what I wanted to Claude Code and had a working local web app the same day.

The thing people underestimate about HTML is how capable it's gotten. Between the browser APIs (media, canvas, drag-and-drop, IndexedDB) and AI writing the glue code, you can build genuinely useful tools without touching a framework, a build step, or a deploy pipeline.

My workflow these days is basically (in a nutshell and very much simplified)

  1. Describe what I need

  2. Claude writes it

  3. Open in browser

  4. Done

The barrier between "I wish this existed" and "I'm using it" has basically disappeared. Anyone else finding themselves building throwaway HTML tools for everything?

https://reddit.com/link/1te53rn/video/poc7t162ic1h1/player

reddit.com
u/Ok_Industry_5555 — 7 days ago

I built a 3-layer system in Claude Projects that runs my actual job — context survives, tasks get tracked, and nothing falls through the cracks

Credit to u/Available-Spend2443 for his Claude Code OS post — same problem, similar thinking, different platform. I built mine on Claude Projects instead of Claude Code, and added a real database layer.

I'm an EHS manager at a manufacturing plant. ~1,200 employees, think fabrication shop, I'm taking over for someone who's transitioning out. That means every conversation we have contains institutional knowledge that doesn't exist anywhere in writing. If I don't capture it, it's gone.

Claude's great at processing all of this. The problem is it forgets. Conversations compact, sessions start cold, and you're back to re-explaining your entire situation. I got tired of that after about three days and built a system around it.

Layer 1 — .md files in the project

These are project files Claude reads at session start. My role, key people, relationship dynamics, institutional knowledge captures, a running decision log, session history. Project files don't get compacted — they're always there. I have about a dozen covering context, tribal knowledge, people intel, and logs.

The decision log alone has saved me hours. When something comes up that was already discussed and decided, Claude has the date, the reasoning, and the outcome. No re-litigating.

Layer 2 — Cloudflare D1 + Worker API + artifacts

This is where structured data lives. Task tracking with ownership, priority, due dates, who's blocking what tasks. People directory (Golden information). Leadership moves log. All accessible through a Cloudflare Worker API, with a Netlify dashboard on top.

I also built interactive artifacts — a mobile inspection form I use on the manufacturing floor, a meeting prep tool. These are React components that run inside Claude's artifact system.

Layer 1 tells Claude why something matters.

Layer 2 tells Claude what the current state is. Different jobs.

Layer 3 — Skill files

Markdown files in the project that act as executable commands. I type /morning and Claude reads the skill file, pulls live data from D1, checks Otter.ai for unprocessed meeting transcripts, and builds a brief. /debrief after a meeting extracts tasks, captures people intel, and runs a strategic analysis. /close at end of day reconciles everything and updates the .md files.

The cadence is what holds it together. Without Layer 3, Layers 1 and 2 drift apart. The skills force synchronization — debriefs push structured data into D1 and narrative context back to the .md files. Morning briefs read both. Close-of-day reconciles both.

What it looks like in practice

I walk in at 7:30, type /morning, and get a brief that already knows what's overdue, what meetings I haven't processed, and what I should focus on. After a meeting with my boss, or any meeting that I've used otter.ai with, I type /debrief and it pulls the transcript, extracts my action items, flags political dynamics I should pay attention to, and tells me what to go check on the floor. At the end of the day I type /close and everything gets logged.

Two weeks in, Claude knew my facility better than my own notes did. I've hit the ground running, people are already impressed with how much I am aware of historical and tribal knowledge and the best thing is I'm actually performing more efficiently. This isnt perfect and as I fine tune it for efficiency and to my job, I'll post a v2 in a few months.

GitHub repo with genericized templates so you can build your own: https://github.com/ballyhofam-bot/claude-project-os

reddit.com
u/Longjumping-Store434 — 6 days ago
▲ 19 r/BuildWithClaude+1 crossposts

I built a tool that watches your screen recording and narrates it for you — just open-sourced it

I record a lot of screen walkthroughs for work, showing teammates how a workflow works, demoing features, documenting processes. The recordings are useful but nobody watches a 5-minute silent screen recording. And honestly, I was too self-conscious to narrate them myself — I have a German accent and kept imagining people laughing instead of listening. I wanted them to look professional.

So I kept doing the same thing over and over: watch my own recording, pause, write what's happening, paste it into a TTS tool, download the audio, sync it in a video editor. For a 5-minute video that's 30-40 minutes of tedious work.

I built Narrator to kill that loop.

How it works:

1. Drop in your screen recording
2. Give it one sentence of context — "this is a demo of the admin dashboard's shipment tracking flow"
3. It extracts frames, sends them to Gemini 2.5 Flash in batches, and gets back a timestamped narration script
4. You can edit any line inline before generating
5. Hit generate — it produces TTS audio (6 built-in voices, no API key needed), burns subtitles, adds transitions between segments, and exports a final MP4

Sample of Narration

The whole thing runs locally. Your video never leaves your machine — only the extracted frames go to Gemini for analysis.

What I actually use it for:

- Work walkthroughs for my ops team ("here's how the new receivables workflow works")

- Quick feature demos I can send in Slack instead of scheduling a meeting

- Documentation that doesn't go stale the way written docs do

The stack:

- TypeScript + Express backend

- React 19 + Tailwind frontend

- Gemini 2.5 Flash for frame analysis

- Microsoft Edge TTS (free, no API key)

- ffmpeg for all the video processing

Built the whole thing with Claude in two days. The AI script generation, the TTS pipeline, the transition engine, the subtitle burning — all wired together. Claude helped me figure out the ffmpeg incantations for xfade transitions, which I definitely would not have gotten right on my own.

A 5-minute video takes about 2 minutes to process and costs roughly $0.01-0.05 on Gemini's paid tier. Free tier works too — 20 requests/day, so I recommend you to upload short clips first, I went all in with a 15 minutes video and was reminded by Gemini that free tiers requires a lot more patience!

Just open-sourced it: https://github.com/anja687gutierrez-jpg/narrator

MIT licensed. You need Node.js, ffmpeg, and a free Gemini API key to run it.

If you make screen recordings for any reason — tutorials, demos, documentation, onboarding — this might save you a lot of time.

Happy narrating! 😄

reddit.com
u/Ok_Industry_5555 — 6 days ago
▲ 8 r/BuildWithClaude+7 crossposts

Cursor 50% off first month through this referral link

Title: Cursor 50% off first month through this referral link

Cursor is giving new users 50% off their first month of Pro, Pro+ or Ultra when they sign up through a referral link.

Here’s the link to activate it:

https://cursor.com/referral?code=VOP2EMUQKAFU

I’ve been using Cursor for real project work lately, mostly codebase cleanup, debugging, refactoring, SEO site improvements, and turning rough product ideas into actual implementation steps.

It’s not one of those AI tools that just looks impressive for 5 minutes and then becomes useless. If you already work with code, websites, apps, automations, or technical projects, Cursor can genuinely save a lot of time.

The offer through this link:

  • 50% off your first month
  • Works for Pro, Pro+ or Ultra
  • I get $25 in Cursor usage credit if you buy a plan

So if you were planning to try Cursor anyway, this is probably one of the better ways to start:

https://cursor.com/referral?code=VOP2EMUQKAFU

Would be interesting to hear how others are using Cursor right now. Are you using it mainly for full project builds, debugging, refactoring, or working inside existing codebases?

u/srch4aheartofgold — 7 days ago

Can you turn a claude artifact url into a hosted website automatically

The path most people don't realize exists: static.app/claude-hosting takes a claude artifact url and converts it into a hosted website without any download step.

workflow:

  1. publish your artifact in claude (click share, get the public artifact url)
  2. open static.app/claude-hosting
  3. paste the url into the "import from url" field
  4. hit fetch, wait about 30 seconds
  5. you get a live website url

From there you can connect a custom domain, turn on analytics, password protect it, or edit the html in the browser if you spot something to fix. forms inside your artifact start capturing submissions to a dashboard.

the alternative is downloading the html from claude and uploading it to netlify drop or github pages, which works but is more steps. if all you want is "artifact url in, website url out," the importer is the shortest path i've found.

u/andrewderjack — 8 days ago
▲ 8 r/BuildWithClaude+5 crossposts

IP Linux: I built a browser-based desktop environment with React, Vite and local-first apps

I built a browser-based desktop environment with React, Vite and local-first apps

I have been working on a project called IP Linux: a browser-based desktop environment that runs as a static web app.

Live site: https://ip-os-linux.vercel.app/
GitHub: https://github.com/ikerperez12/IP-OS-LINUX

It is not a real Linux distribution, and it does not run native binaries. The idea is different: I wanted to explore how far a polished desktop-like experience can go inside a normal browser tab.

The result is a small web OS-style environment with:

  • A splash / entry screen
  • A desktop with icons, folders and widgets
  • A top panel with system controls
  • A dock and app launcher
  • Resizable and draggable windows
  • Virtual workspaces
  • Snap assist
  • A global search / Spotlight-style command palette
  • Local-first apps
  • Reactive wallpapers
  • Glass UI and visual effects
  • A public GitHub repo and Vercel deployment

Why I built it

Most web demos are landing pages, dashboards or small single-purpose apps. I wanted to build something that feels more like an environment.

I was interested in questions like:

  • Can a web app feel physical and desktop-like?
  • How should windows behave inside a browser viewport?
  • How do you organize many small apps without making the UI messy?
  • How far can local-first storage go before a backend is actually needed?
  • How do you publish a visual project publicly without exposing secrets or overcomplicating the stack?

IP Linux became a way to test all of that in one project.

What is inside

The app includes a catalog of built-in apps and tools: Files, Terminal, Browser, Settings, App Store, Music Player, Matrix Rain, games, developer tools, productivity apps and visual utilities.

The apps are loaded lazily, so the initial shell does not need to download every app upfront. The virtual file system and user preferences are stored locally in the visitor's browser with IndexedDB/localStorage. There is no backend, no account system and no required environment variables for the public release.

What I focused on

The main focus was the shell experience:

  • Window resizing and dragging
  • Dock behavior
  • Desktop icon grid
  • App launcher workflow
  • Keyboard shortcuts that do not interfere with inputs or the terminal
  • Responsive behavior for compact viewports
  • Wallpaper rendering that respects reduced motion and tab visibility
  • Public-safe security posture
  • A README that presents the project like a real product

There were also a few important constraints. For example, a full YouTube page cannot be embedded in an iframe because YouTube blocks that for security reasons. So IP Linux includes a YouTube Lite / embed-aware fallback instead of pretending that every website can load inside the internal browser.

Stack

The project is built with:

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI primitives
  • Lucide / React Icons
  • DOMPurify
  • IndexedDB via idb-keyval
  • Vercel static hosting
  • Vercel Web Analytics

The repo also includes a public release setup:

  • README with screenshots and GIF
  • MIT license
  • SECURITY.md
  • Vercel config
  • Security headers
  • Robots and sitemap
  • Manifest
  • GitHub Actions CI for audit, lint and build

What I learned

The biggest lesson was that a desktop UI is mostly about small interaction details.

A window that opens slightly too small feels broken.
A dock icon that scales inside a clipped container feels wrong.
Desktop icons that can overlap make the whole shell feel unfinished.
Keyboard shortcuts that steal Tab from the terminal are frustrating immediately.

Fixing those details made the project feel much more real than adding another decorative effect.

I also learned that public release work matters. A project can look good locally but still feel unfinished if the repo has a generic README, no security notes, no screenshots, no CI and no clear deploy story.

Feedback welcome

I am sharing it because I think browser-based desktop interfaces are a fun area for frontend experimentation.

I would especially appreciate feedback on:

  • Window management
  • Desktop organization
  • Accessibility
  • Performance
  • App ideas
  • Whether the repo presentation is useful for other developers

Live: https://ip-os-linux.vercel.app/
Code: https://github.com/ikerperez12/IP-OS-LINUX

u/Time-Willingness-360 — 7 days ago
▲ 32 r/BuildWithClaude+3 crossposts

15-minute walkthrough of the app I built entirely with Claude Code — 860+ campaigns, $0/month

I've posted a lot about my Claude Code workflow — skills, hooks, knowledge graphs, audits. Now it is time to actually show an app that I've built with this exact playbook.

I recorded a full walkthrough. 15 minutes, no editing, no script — just clicking through the real production dashboard I use every day at work.

What you're seeing:

>- **860+ active transit advertising campaigns** tracked through a 19-stage pipeline

>- **Google Sheets as the database** — no backend, no server, no monthly bill

>- **IndexedDB for offline persistence** — works without internet

>- **Three.js login screen** — interlocking gears that animate on auth

>- **Gear-based navigation** — 4 canvas-rendered gears with 33 orbital menu items

>- **Victor AI Concierge** — deterministic engine for pipeline reports (zero hallucinated numbers), Gemini chat for conversational queries

>- **6 date intelligence algorithms** — crew capacity, material aging, scheduling conflicts, removal clustering

>- **Multi-carrier shipment tracking** — UPS, FedEx, USPS, DHL, OnTrac, Amazon

>- **Role-based access** — admin pushes to Cloudflare KV, field viewers pull from it

>- **Voice commands** — speak a question, hear the answer

The entire stack: React 18 via CDN, Tailwind via CDN, Cloudflare Pages. 25,000+ lines. Monthly cost: $0.

Every line was written in collaboration with Claude Code. Not generated and pasted — planned in plan mode, reviewed by custom agents, tested with hooks, iterated across hundreds of sessions. My CLAUDE.md is 500+ lines. The project rules file is another 400.

This is what I mean when I talk about Claude Code as an engineering partner, not a code generator.

u/Ok_Industry_5555 — 9 days ago

CLAUDE.md isn't a file. It's a stack.

I've posted about individual pieces of my setup before — the knowledge graph, the memory system, hooks, the 10-layer audit. But I never explained why they only work when they're stacked in a specific order.

Most developers treat CLAUDE.md as a flat file. Write some rules, maybe list your stack, done. That works for a single project. It falls apart at three.

Here's what I learned the hard way: each layer only works if the ones below it exist.

>**Layer 1: CLAUDE.md itself — the instruction set** Without it, Claude has no rules. But instructions alone don't remember anything.

>**Layer 2: Project registry** A table inside CLAUDE.md — every project, its location, stack, port, deploy command. Without this, Claude guesses paths and gets them wrong. But a registry doesn't learn from mistakes.

>**Layer 3: Memory system** MEMORY.md + lessons.md + feedback files. Every correction I make gets saved so Claude never repeats it. Without this, I'm giving the same correction for the fourth time. But memories don't organize themselves.

>**Layer 4: Knowledge graph** Markdown files with wikilinks, typed relationships, importance scoring. The debugging insight from three weeks ago is findable in seconds. Without this, good ideas rot in chat history. But knowledge without enforcement is just suggestions.

>**Layer 5: Skills** Slash commands — /reflect, /primer, /spec. Repeatable workflows I'd otherwise type manually every session. Without these, I'm doing the same 12-step debrief from memory. But skills without guardrails can still do damage.

>**Layer 6: Hooks** Event-driven automation. A deploy warning fires before production pushes. A duplicate check runs after every edit. Without these, guidelines are just hopes. But automation without verification is blind.

My Claude Playbook.md files

>**Layer 7: Gates** Quality checks that verify the session actually followed the rules. Did everything get committed? Did the README get updated? Did corrections get saved? Without these, you're trusting that the system worked — instead of proving it.

Skip layer 3 and layer 5 breaks — your skills reference lessons that don't exist. Skip layer 6 and layer 1 is decorative — nobody enforces the instructions. The stack has to be complete or the gaps compound.

It took me 3 months of daily use across 18 projects to figure out this ordering. Each layer exists because something went wrong without it.

I've been documenting the full architecture — all 7 layers, how they connect, failure modes when you skip one, and templates for each.

Happy to share more if anyone's building something similar.

reddit.com
u/Ok_Industry_5555 — 10 days ago
▲ 4 r/BuildWithClaude+1 crossposts

Every session ends with a 10-layer audit. Here's what it's checking for.

I've talked before about my knowledge graph and how session corrections compound. But I never explained what actually happens at the end of a session — the thing that decides what's worth keeping and what's just noise.

It's a 10-layer audit that runs as a slash command. Each layer checks something different:

>**1. Git state** — did everything get committed? Any dangling changes?

>**2. Code quality** — did I introduce anything sloppy?

>**3. Documentation freshness** — does the README still match reality?

>**4. Lesson extraction** — did I learn something that should be written down?

>**5. User corrections** — did I correct Claude on something it should never repeat?

>**5.5. Knowledge harvest** — this is the new one

>**6-10.** Quality gates, output verification, progress checks

Layer 5.5 is where it gets interesting. It evaluates whether anything from this session — an architectural tradeoff, a cross-project pattern, a debugging insight that took 45 minutes to figure out — scores high enough on an importance rubric to get promoted into the knowledge graph permanently.

Not everything passes. A typo fix doesn't. A config change doesn't. But "here's why JWT refresh tokens need different handling across Firebase, Supabase, and Auth.js" — that scores high and gets written as a durable node with typed relationships to related patterns.

The difference between this and just taking notes: I don't decide what's important. The rubric does. At 11pm after a long session, my judgment on "is this worth saving" is terrible. The audit layer doesn't get tired.

Before this, my best insights lived in chat history. I'd vaguely remember solving something three weeks ago but couldn't find it. Now the graph has 110+ nodes and growing — every session feeds it automatically.

The whole thing is part of a broader toolkit I've been building — 7 skills that handle session debriefs, project warm-starts, auth scaffolding, health checks, and more.

Happy to go deeper on any of the layers if anyone's curious. I do have a Power Kit for people who are interested to dive deeper into the architectural design of this concept.

https://preview.redd.it/i2ct14sawr0h1.png?width=1200&format=png&auto=webp&s=fde10d226b4aff7f346de8d04a9206cc5406ee4e

reddit.com
u/Ok_Industry_5555 — 10 days ago
▲ 32 r/BuildWithClaude+13 crossposts

I built a visual frontend asset library so I can stop losing my own UI snippets

As a web developer, I often build or collect small frontend assets that are useful later: buttons, gradients, loaders, hover effects, CTAs, footers, bento grids, layout fragments and product UI patterns.

The problem is that these assets usually end up scattered across old projects, screenshots, notes, CodePens, local folders or random files. When I need one, I know I already made something similar, but finding it takes too long.

So I built UI IP Toolkit: a static visual catalog for fast access to my copy-ready frontend assets.

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

What it is

UI IP Toolkit is a public, static frontend asset library. It is designed to be browsed visually, not as a package install.

It includes sections for:

  • Buttons and interaction states
  • Gradients and color systems
  • Loading patterns
  • Text effects
  • Hover treatments
  • Glass surfaces
  • CTAs and pricing blocks
  • Footers
  • Bento grids
  • Navigation patterns
  • 404 and recovery pages
  • Product UI patterns
  • Layout fragments and reusable CSS utilities

Every card is meant to be practical: open the site, scan visually, copy the snippet, adapt it, and move on.

Why I made it static

I wanted the toolkit to be simple, fast and easy to publish:

  • No backend
  • No runtime framework dependency
  • No account required
  • No build step needed for browsing
  • Self-hosted fonts and assets
  • Deployed as a static site on Vercel

The goal was not to create a huge npm package or a rigid design system. I wanted a personal working library that feels visual and fast enough to use during real frontend work.

The main use case

When I am building a new page or feature, I can open the toolkit and quickly find a starting point:

  • Need a loader? Go to Loading States.
  • Need a CTA? Open CTA Blocks or Purchase CTAs.
  • Need a footer? Open Footer Systems.
  • Need a visual layout idea? Open Bento Systems.
  • Need a small CSS utility? Open the utilities section.

It is basically a visual memory layer for reusable frontend work.

Tech stack

The project is intentionally simple:

  • HTML
  • CSS
  • Vanilla JavaScript
  • Local fonts
  • Local media assets
  • Vercel static hosting

The repository is public here:

https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The live version is here:

https://ui-ip-toolkit.vercel.app/

What I learned

The biggest improvement was not adding more components. It was making the catalog easier to navigate.

Once the toolkit had many sections, a long top nav became useless. I replaced it with a compact section menu grouped by category. That made the site feel much more like a real working tool instead of a long landing page.

I also learned that previews matter a lot. If every card looks too similar, the library feels bigger than it is useful. So I spent time making the previews more varied and more realistic while keeping the site lightweight.

Feedback welcome

I am sharing this because I think other frontend developers might have the same problem: useful assets scattered everywhere, but no quick visual way to reuse them.

Would you use a personal visual asset catalog like this in your own workflow? And what sections would you add next?

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

u/Time-Willingness-360 — 12 days ago
▲ 1 r/BuildWithClaude+1 crossposts

&gt;>>> THIS IS FOR EVERYONE -- NOT JUST 20+ YEARS OF EXPERIENCED GATE KEEPING IT/SOFTWARE ENGINEER VETERANS. <<<<<<<

I used to open Claude Code, describe what I wanted, and let it go. Sometimes it worked. Sometimes I'd look up and realize it had refactored three files I didn't ask it to touch, introduced a new abstraction I didn't need, and broken something that was working fine.

The fix wasn't better prompts. It was plan mode.

What plan mode actually does

You type `/plan` before starting any non-trivial task. Claude switches into research-only mode — it can read files, search the codebase, run grep, trace dependencies. But it can't edit anything. It writes a plan to a markdown file, then waits for your approval before touching a single line of code.

That forced pause is everything. Instead of "here's what I built for you," it's "here's what I'm thinking — does this match what you want?"

https://preview.redd.it/u8ixtbcy89wg1.png?width=1288&format=png&auto=webp&s=74d650fc4c3e48adbaddd463454435b4d61e442a

How I use it daily

Every task with more than 2-3 steps gets plan mode. The workflow:

  1. I describe the task
  2. Claude explores the codebase — reads relevant files, traces how the feature currently works, checks for existing patterns it should reuse
  3. It writes a plan: which files to modify, what approach to take, what to test
  4. I read the plan, push back on anything that doesn't make sense, approve or redirect
  5. Then it executes against the approved plan

Step 4 is where the real value is. I've caught Claude about to introduce a new utility function when one already existed 3 files away. I've caught it planning to refactor a working system instead of making the minimal change I actually needed. I've redirected it from a 12-file change to a 2-file change because the plan made the scope visible before any code was written.

The mindset shift

Before plan mode, I was reviewing code after it was written — trying to catch problems in a diff. That's expensive. You're already invested in the approach, and "undo all of this" feels wasteful.

With plan mode, I'm reviewing the approach before any code exists. Redirecting a plan costs nothing. Redirecting a completed implementation costs everything.

When I skip it

Single-file changes, typo fixes, "add this CSS class" — anything where the scope is obvious and the blast radius is one file. Plan mode adds overhead that isn't worth it for 30-second tasks.

But anything that touches multiple files, involves architectural decisions, or could break something else? Plan mode, every time. The 2 minutes I spend reading the plan saves me 20 minutes undoing work I didn't ask for.

The pattern I keep coming back to: make Claude think before it builds. The code is almost always better when there's a plan behind it.

reddit.com
u/Ok_Industry_5555 — 10 days ago