This is part of a series of blog posts that stemmed from my first experiences with “vibe coding”. For more on what I did and where you can find the rest of the posts, please refer to the first post.
One of the fundamental game changers of AI assisted coding is that individual developers will be able to complete more tasks on their own. It won’t be the end of specialization (e.g. “Your Front End Developer”), but it will mean that for small, low-leverage portions of user stories or even features… individual team members should be able to do more stories on their own.
This became clear to me when I was working with the user interface in my application. I am NOT good at developing user interfaces. I have no artistic capabilities, no patience for complex javascript frameworks with weird syntax, and a tendency to make things very wordy. Unfortunately, I really needed to update from Angular 6 to Angular 18. In the past, if I had to do a major UI change I would ask a friend to help, slap something together quickly, or procrastinate / give up (how do you think I got 12 versions behind on Angular?).
Fortunately, this is a perfect use case for AI Assisted Development! Without doing much research at all, Claude helped me perform most of the upgrade. It even caught a number of places where upgrading would require me to change my syntax or load new versions of plugins. It didn’t “do it all for me” though. Interestingly, it missed some of the issues that would have been most obvious to a human (for example that Google’s newly mandated “Sign In With Google” button would not work in a collapsible navigation bar). I cover these limitations in more detail in this blog post.
For now though, I want to show off how powerful Claude is in helping us with areas that we’re not deep in. For that, let me show you what happened once one of my beta testers alerted me that the mobile version of the app wasn’t working (because the button was too big). I simply pointed the problem out to Claude and asked for his recommendations to fix it:
We switched to using the Google Sign-In Button and it works great on the desktop version of the site… but on the mobile version there is a hamburger that you click and it used to show the text “Login” but now it doesn’t work. I suspect this is because the button can’t be loaded that way. Can you suggest changes that I could make so the mobile version will work?
Amazingly Claude read through all of my code and supplied three options to fix the problem:
I ended up going with solution 2 and the problem was fixed in just a few minutes. This is a perfect example of a task that in a corporate setting I would have had to pass off to a developer with more UI experience but I can complete it with Claude Code quickly.
This has really powerful implications for development in a corporate setting, all of them making the development process more efficient:
- Obviously, you can limit the number of different types of development skills that you have to source.
- It’s very powerful for the Agile concept of self-managed and self-reliant teams. I’ve been a part of many development projects where “Team A” and “Team B” had a shared UI resource (or other specialty skill)… this makes sprint planning and creating accountability around commitments difficult. Where this can be removed because everyone has access to Claude, development will be much smoother.