Continuing the vibe coding journey I started in the previous post. If you missed the first chapter, you can catch up here: "Vibe Coding with AI-Generated Forms in React Using GPT-4.1"
Let's level up the infrastructure a bit. We'll kick things off by setting up Yarn in the repo. The goal is to have a project-specific Yarn version, making it independent from whatever global version might be installed. While it's not critical for this solo project (no team collaboration, no CI/CD planned), it's still a good habit to practice.
Currently I'm using the default yarn on my system (which is version 1), I need you to install the latest Yarn 4 in this project.
Here's what I got back:
corepack enable && corepack prepare yarn@stable --activate && yarn set version stable
Not exactly what I had in mind. This installs Yarn globally, but I wanted a project-specific setup. It was clear the agent got a bit tangled up here.
Rather than fighting it, I moved on and manually created the .yarn folder. I did ask the agent to help update the .gitignore file, though—and after a little nudging, it nailed it. Always nice when I don't have to remember small things like that.
Previously, I loaded styles globally without touching CSS Modules. Time to fix that.
It turned out to be trickier than expected—the agent struggled quite a bit:
None of this was rocket science, but the agent couldn’t connect the dots by itself.
On the bright side, it did successfully rename ./App.css to ./App.module.css. For some reason, that small win was oddly satisfying.
This task was refreshingly smooth:
I need you to format date in the table so it will be in the following format: day as a number, month, year, for example: "12 Dec, 2025". Use the date-fns library for that.
First, the agent prompted me to install the library:
yarn add date-fns
I approved it, and the rest was handled correctly. No hiccups!
Adding internationalization turned into a deeper exercise than I anticipated.
I kicked it off with:
I want to add internationalization to my app. Default language will be English; in the future, I will add more.
The agent took care of installing react-i18next and i18next, extracted most of the text into an i18n.ts file, and wired up the initialization. It missed a couple of components, but a quick follow-up prompt got things sorted.
Next challenge: loading translations asynchronously. I asked for a simple setup where translations are bundled and loaded via promises. The agent handled that nicely too.
The real struggle came when I asked it to handle the loading state while translations were being fetched. This requires wrapping the app in <Suspense>, but the agent couldn't figure that part out. No biggie—I added it manually.
And just like that, internationalization was live.
To save myself from repeating guidelines over and over, I added a .github/copilot-instructions.md file. Here's what I wrote:
In this project, I’m developing a user-facing application.
The following technologies are used:
- Rspack
- React
- TypeScript
Design Guidelines
- Minimal, clear, and consistent design
- Friendly UI and UX experience
General Guidelines
- Keep code concise and readable.
- Adhere to the existing code style and formatting.
- Use modern TypeScript and functional programming practices.
- Prefer clearly defined types over "any".
- Use CSS modules.
- Use named functions and descriptive variable names instead of short or generic ones.
- Prefer named exports over default exports.
- Prettier is used for formatting—follow its conventions.
The results were immediately noticeable—the agent genuinely "listened" and adapted future prompts accordingly.
Of course, some older code was still misaligned. Instead of fixing it manually, I prompted the agent to self-audit:
Using instructions, look into the codebase and see what can be improved for better alignment with instructions
And it was fruitful. The agent scanned the repo, spotted misalignments (mostly around type definitions), and proposed fixes.
Honestly, this is one of the most useful tools I've worked with. I'm excited to see how it handles a larger, more complex codebase next.
You might also be interested in the following posts:
MCP is a powerful piece of tech. The idea of an API for AI unlocks a whole new world of possibilities. While it still feels a bit distant from our everyday workflows, we’re actively exploring how to make it fit—and whether a simpler alternative might work just as well.
OpenAI recently released a series of videos showcasing different use cases for ChatGPT. I wanted to summarize them here, because otherwise I'd have to dig through each video again to find those useful examples—and that would be annoying.