Claude Code tutorial videos I've watched recently

First video is of a quick overview of getting set up. Though most of it didn’t enhance Claude Code for me, so meh, maybe I misunderstood how it works.

I used the same methods mentioned in this second video of dragging a screenshot into Claude Code and letting the AI figure out the styling and fixes. Seemed to work pretty well.

The creator of Flask talks about using Gemini CLI within Claude Code lol. Also talks about using only one MCP, the PlayWright MCP.

I was having trouble getting Claude Code to install Playwright. It kept insisting on installing Chrome and would just stall out. It wouldn’t recognize the escape key signal, so I had to close the terminal window. The for me was to configure Playwright MCP to use a WebKit browser. The commands are specified in this GitHub comment.

In your terminal type:

claude mcp list

This will show you what tools you have already configured.

claude mcp remove playwright

This will remove your existing Playwright install.

claude mcp add-json "playwright" '{
    "type": "stdio",
    "command": "npx",
    "args": ["@playwright/mcp@latest", "--browser", "webkit"]
}'

This will install a WebKit based headless browser, so you can avoid installing Chrome, and avoid the timeouts like I was getting.

This is the plugin mentioned in the video where client side console logging gets sent to the server console for Claude Code to read. Avoids the copy pasting from browser console.

Armin shows how he uses the plugin in this recorded livestream:

Damn, Claude Code is as good as they say.

I started playing with vibe coding by typing out requirements in ChatGPT and pasting the code it output into VS Code. It did a great job early on, but seemed to have lost context pretty quickly. It was able to come up with a working backend in SvelteKit and a basic front end without much work. Pretty impressive.

However, as the site got a few more lines of code, it started to become more frustrating, and many friends told me to sign up for Claude Code. Glad I took their advice.

Below are the before and after screenshots of the site I created, LA Home Win.

Before Claude Code. Using ChatGPT 4o

After, using Claude Code Sonnet

How I started

I wanted to create a site to let me know if the Dodgers had won a home game yesterday. Them winning unlocks a bunch of discounts from fast food joints in the Los Angeles area. I have a hard time deciphering if the last game was a home game and what day that game was played. I wanted something to tell me if there was deals available or not, so I decided to make a page to track it.

Luckily the MLB has an amazing free API that doesn’t need registration. Their documentation can be found here and looks to have been released thanks to a Google Cloud x MLB hackathon.

Panda Express has one of the best Dodgers win deals around. You can get a 2 item plate for nearly 50% off. A $11 plate costs $6 when the Dodgers win a home game the day before, so that’s the first thing I wanted to see displayed on the site.

I first started asking ChatGPT about the MLB stats API. The prompts were all pretty naive. I didn’t do any hard core planning and didn’t bother reading any API documentation.

And then I asked for it to get me data about yesterday’s game. I was surprised to see accurate data. I’ve been so used to Google’s AI Overview hallucinations, that I’ve become pretty skeptical, but this was a nice change.

I then ask ChatGPT to create an app with SvelteKit using the information we had already discussed. It suggests some good additional content to enhance the page. I end up with the first version of the site as seen above. The very first version worked on the first shot, and it took me about two hours of fiddling around with prompts to get the screenshot version above. I didn’t have to spend anytime figuring out styling or API specs.

Really low cognitive load with this vibe coding, until the context window seemed to slip. That’s when Claude Code came into play.

Claude Code to finalize the site

I wanted the site to look a bit nicer, so I took components from TailwindPlus (which used to be called TailwindUI), pasted them into a file in VS Code. I then pasted the content I wanted to use in a markdown file and told Claude Code to fill in the component with the appropriate content from the markdown file. It did a fantastic job figuring out what to do.

It turned this markdown file:

And it took the code from this template: And turned it into this section: Sure, spacing is a little off from the original, but it took me zero brain juice.

Feeding Claude Code screenshots instead of text

I was told that I could drag in images into the terminal and Claude Code would be able to use them. So I ended up taking some screenshots from Figma, dragging them into the terminal, so that Claude Code would know the path they were stored in, and asked it to create a component using the appropriate data. No fancy prompt, it just figured it out on its own.

Here is the screenshot I gave it: Here is what the resulting component looks like with a few added enhancements: I like what Claude came up with better than what I fed into it.

Here is another example of an image I uploaded to Claude Code. It is a screenshot of a card component that I took a screenshot of and cut up in Photoshop to get the layout I wanted.

I asked Claude Code to use the screenshot as an example and create a component that would have the corresponding data. It produced a nice result that shows when the next game is occurring. Amazing stuff.

So far I’ve been using Claude Code with very basic prompts and it’s been able to do what I expect on the first shot.