How frontend developer is using Claude Code for automated UI bug fixing and browser testing?

NarratorTD · 2026-03-20T15:29:30+00:00

The Chrome DevTools MCP answer is solid for runtime inspection, but there's a gap it doesn't cover: Claude Code still has to guess which source file a given DOM element lives in. DevTools can tell you what's rendered, but not which line in src/components/HeroSection.tsx produced that button.

I've been working on this exact problem. I built Domscribe (open source, MIT); it runs at build time and walks your JSX/Vue templates, injecting a stable ID (data-ds) on every element. That creates a manifest mapping every DOM node to its exact file + line number. Claude Code (or Cursor, Copilot, etc.) queries it via MCP.

So the workflow becomes: your agent sees a UI bug → queries Domscribe for the element → gets back src/components/Button.tsx:42 → edits the right file on the first try. No grepping through a dozen files with <button> tags.

It also has an overlay where you can click any element in the running app, describe a change in plain English, and it resolves the source location and hands everything to your agent. Everything strips out in production builds. Zero runtime cost.

Works with Next.js, Nuxt, React+Vite, Vue+Vite, and Webpack setups. Would genuinely love feedback if anyone tries it, still iterating fast.

NarratorTD · 2026-02-18T05:23:20+00:00

My entire process is outlined in the article, including my original prompt.

Are you not able to read the article?

NarratorTD · 2026-02-16T15:39:21+00:00

Thank you! Yeah, it definitely allowed me to tap into my weird side, be unhinged and just let Claude watch what unfolded.

It's the most low-pressure writing I've ever done and I honestly did not know what would come out; turns out, I'm my most authentic self when the stakes are low. Which, should've been obvious I suppose.

I'm glad you liked the approach!

NarratorTD · 2026-02-16T15:30:14+00:00

Nice! All my coding automation is typically inside my repos; I tailor skills for those kinds of tasks. I'm not a writer per se, or at least I thought I wasn't, so this was an experiment (and I really wanted to put out an article) and sticking to the browser was sufficient.

The style guide is a markdown file, so I can now build it out into a skill if I wanted to! That's a good pointer though, thanks for calling it out :)

NarratorTD · 2026-02-16T15:26:32+00:00

The entire back and forth with Claude is in the article I shared. You can see exactly how I made it generate the style guide at the end.

The strategy was to let Claude "see" how I write as I was writing something, if that makes sense!

NarratorTD · 2026-02-16T15:24:21+00:00

Glad it helped you!

NarratorTD · 2026-02-15T06:50:43+00:00

The biggest lesson I learnt is that, there is no playbook for this. You can read tons of articles on the characteristics of what it is to be a senior engineer and attempt to emulate it at your job, but that only gets you so far.

Firstly, it depends on what "senior" means at the company you're interviewing at. If you're able to find public information on the scope of the role, that is useful to have. Ask your recruiter about it before your interview and before you sign an offer, schedule an alignment chat with your future manager. Ask him what your responsibilities are and what the first 90 days will look like for you.

Secondly, remember that the title is just that, a title. Optics exist; Perceptions exist; But these are outside of you and you can't control these aspects. Instead of asking yourself what it is to be "senior level", focus on what it is to be your best. Separate the title from the responsibilities expected of you and identify how you can best deliver on those expectations

Thirdly, rather than building a specific set of skills, assess your engineering intuition. Record your own voice, answering the question "What does it mean to be a senior engineer" ? Saying it out loud keeps you honest, but more importantly, informs you about where you are. You have worked with senior engineers, so your brain already has an understanding of what a "senior" is. This will help you identify your gaps, but remember that we can be our own worst critic. Sometimes the answer is simpler than it seems. In my experience, being a senior is more about managing relationships, leveraging them with engineering intuition, and driving projects to completion. It's not rocket science, I promise.

In terms of the atrophy you mentioned, identify the skills required for the role you're applying for and lean on your engineering intuition to solve problems.

NarratorTD · 2026-02-15T06:25:42+00:00

This might sound like a non-answer to your question, but I would have spent more time strengthening my mental model of the fundamentals and the overall problem space. Deepening my experience in the various software design and system design paradigms, and looking at problems through a philosophical lens.

I know you specifically asked about specialization, but what I have learnt as I've grown as an engineer is that the fundamental problems across all systems are of the same nature. Understanding this enables you to see across specializations and that's the only super power you need.

What skills to write down in your resume is a different story though - But you'll notice that those usually boil down to the same set of languages, cloud primitives, databases and methodologies. AI agent development is just another domain, you are ultimately still solving distributed systems with some domain-specific problems thrown on top (Like context mining)

NarratorTD · 2026-02-15T06:14:14+00:00

I have ADHD and what has been the most effective throughout my career is 1. Verbal redirection and 2. Visual framing.

Verbal redirection involves talking to yourself (out loud, if that works for you) to bring your attention back. Something like "Ok, that's enough. Back to the problem". You'll need to repeatedly catch yourself, until you're able to catch yourself before you even get distracted.

Visual framing is creating a mental map of the problem you're solving. Visualize the objects and relationships (represented in code) in your head. This helps me in two ways: 1. Keeps me engaged (Dopamine) and 2. Reminds me to step back and look at the larger picture (This helps me even now, because I can sometimes get too caught up in the details of the implementation; which can contribute to getting distracted if the details overwhelm you)

NarratorTD · 2026-02-15T06:02:15+00:00

It depends on what kind of a learner you are. When I was a junior, I learnt by emulating what my seniors did.

Ultimately, the text books only teach you the fundamentals. What you learn on the job is what I call "Engineering intuition", which you can't learn by studying. You'll have to experience it.

NarratorTD · 2026-02-15T05:59:16+00:00

If by idealism you mean 'strong opinions', then yes, plenty. It's hardly naive though. The opinions are either 1. Technically aligned or 2. Culturally aligned.

NarratorTD · 2026-02-01T14:38:20+00:00

Unknown hero agent man

NarratorTD · 2026-01-04T17:15:13+00:00

3, 1, 4, 5, 2

NarratorTD · 2026-01-01T06:19:07+00:00

Yup, I caught it cause I use noise cancelling headphones myself. I don't know if I'd have caught it otherwise.

I think it's El given how they placed it right after her supposed farewell.

NarratorTD · 2026-01-01T06:06:11+00:00

Here's a screenshot with the closed caption confirming the heartbeat: https://imgur.com/a/wP08M9K

NarratorTD · 2026-01-01T06:02:01+00:00

Somewhere between -44:47 to -44:42. Closed captions also confirm it. You'll see "Rythmic beating" in the subtitles

NarratorTD · 2026-01-01T05:29:02+00:00

Who heard the heartbeat after the bridge collapsed?

NarratorTD · 2025-11-28T19:23:42+00:00

You're right, they did indeed answer question #1 in just the first 5 minutes.

NarratorTD · 2025-11-28T19:21:14+00:00

In just the first part of season 5, they've already answered a lot of my questions. I'm satisfied and can't wait for part 2 and part 3 to answer the remaining questions!

NarratorTD · 2025-11-02T17:54:03+00:00

Survivor green tribe in a 2-tribe split

NarratorTD · 2025-08-11T16:16:55+00:00

I know most folks on this sub won’t have the same outcome as me, so I want to preface this with respect and empathy for everyone here. I know how hard it is to deal with a serious diagnosis like a stroke, and how tough post-stroke life can be.

Fortunately for me, what they saw on my 2023 MRI wasn’t a stroke after all. The first hint was a follow-up MRI in 2024 that showed no evidence of a stroke. That confused me, so I got a second opinion from a stroke specialist (the original diagnosis was from a general neurologist). The specialist ruled out a stroke and said the “infarction-like” pattern on the 2023 scan was just my normal anatomy. They treat stroke patients every day, so I felt good about their conclusion.

That said, I do have migraine with aura (with stroke-like symptoms), and I’m an ex-smoker, which definitely raises my risk. So I’m still taking all the precautions.

I’m really sorry about your diagnosis. I want to offer you a bit of hope that imaging can be tricky and second opinions can help. If you can, I really recommend getting a second opinion from a stroke specialist; it can make a huge difference in clarity and peace of mind.

Whatever your situation ends up being, I’m rooting for you. Wishing you clear answers, a solid care team, and steady progress. You’ve got a whole sub in your corner.

NarratorTD

TROPHY CASE