Blog

Posts

Shall I Send a Postcard?

Building a user dashboard and a refactoring subagent with Claude Code.

Tags: Agentic AI, subagents, Claude Sonnet 4, Claude Code

Thursday, August 7, 2025 7:36 PM

This post is part of a series. Follow along with the development progress here: moodring-vibe repository. More to come!

Please note that this is not a tutorial. This is a documented first-time experience with a fully-enabled AI agent. Do not take this as professional advice. Always protect your data, use version control, and refer to documentation if you decide to follow any of these steps yourself.

We spent much of the last post making a plan to keep Claude accountable when it comes to using the proper subagents and pushing all changes to our origin repository.

But we were awarded with a pretty terrible looking UI theme in the process. Let's do some work to flesh it out.

Dashboard confessional

First, we'll replace the placeholder data with actual user listening data from Spotify.

Let's take a look at our listening activity!

We're not seeing any data yet.

We see an error in the logs.

We catch Claude forgetting to stage files again.

But the error is still ocurring.

And still...

So Claude provides more comprehensive logging...

...but forgets to stage all files again.

Did the changes fix our issues?

Great! We have current and past listening activity in our user dashboard.

The wrong kind of retro

I try giving another vague UI theme description to make this easier on our eyes.

My eyes don't bleed when I look at this. Let's apply it to the login page too.

Split shine

Now we need to make sure the data gets updated at a reasonable interval and on demand.

I asked Claude to remove the Now Playing card when the user stops listening.

About this time, I hit a rate limit. I used that time to try out a few web-based app agents. I tried the popular Lovable, but I didn't have enough free credits to do what I wanted.

But Builder.io allowed to me enough prompts to create a UI like this:

Let's see if Claude can just emulate it from an image.

But first, we have to deal with the image sharing issues.

For the time being, we'll just have to try whatever image sharing method works in that moment. Directing Claude to the file location seems like the most reliable among them.

Let's apply the theme across the app and remove any visual association with the actual Spotify app.

We can get the album covers for the songs as well.

I can give Claude the styles that Builder.io used for my prototype UI, but I want to see how Claude handles this prompt itself. We haven't settled on a final theme yet anyway.

We want to apply the expand-accordion action to all songs on the dashboard.

Now we have a much nicer looking dashboard using real Spotify user data!

Spaghetti factory

During this process, I noticed our codebase needed a little help. Our entire frontend app lived in App.tsx, which was 1700 lines long. Let's create another housekeeping subagent.

Again, the agent creation menu created our subagent somewhere other than the root directory.

Once I moved it into the root .claude/agents folder with the other subagents, we could push the changes.

...and use the new subagent for a little code refactoring.

And I hit another rate limit. In the next post, we'll see how the subagent improved our code organization, and we'll work on giving Claude some to-do lists for things we consider important.