I wanted to test a simple claim: you can ship maintainable software by vibe-coding end to end. I set strict constraints:

• New platform (I haven’t built a browser extension/add-on)
• Language I’m no longer proficient in (JavaScript)
• Zero manual code editing

In about a day¹ I had a working Firefox add-on I could submit for review. The code meets my bar for readability and long‑term change. Even the icon came from an image model².

Introducing Container Traffic Control.

On the vibe-coding process

It’s in vogue to share horror stories of decimated vibe-coded repos³. But I’m convinced that with the right fundamentals, you can vibe-code a codebase you’d comfortably hand to another engineer.

This was my experiment to vet my feelings on the subject. Granted, this was a small and arguably very simple repository, but I’ve also seen success with moderately larger codebases personally.

It comes down to scrupulous pruning: updating system instructions, diligent prompting, and code review. I plan to write much more about this later, but let’s talk about some of the mechanics of how it went:

I didn’t write a single line of JavaScript by hand. When I needed changes, better structure, reusable patterns, small refactors — I asked the agent. The goal throughout was simple: keep the codebase readable and maintainable. It now has a lot of the things we consider important for a decent codebase:

• Tests (for the important parts)
• Well-organized code
• Clear, useful logging
• Code comments (uses a style called space-shuttle style programming, which I think is increasingly valuable with vibe-coding)

The best part: most of this came together over two days⁴. Some example pull requests from the repository with the exact prompt I used and the plan that was generated:

Here’s the very first prompt I used to generate the guts of the code:

# Role/Persona:
- you are an expert java developer who is well versed with making firefox add-ons and extensions.
- you have a strong propensity to write clearly legible code with simple to understand code comments.

# Task/Goal:
- write the functionality for the firefox add-on "Container Traffic Control" (CTC). I will provide you with the
requirements
- work on first task which is adding the rules, running the validation check, then outputting clear debug logs


# Details:
- the container takes in rules from the preferences panel; it does it similarly to how the extension (see
screenshot)
    - you can find all the relevant code for the extension "conductor" that does something similar
https://github.com/mcortt/Conductor - this is where the screenshot is from
- where CTC is different from conductor is that CTC takes in a rule with 4 possible fields (each rule will have 4
fields)
  - 1. container name (name of firefox container)
  - 2. allow/block (drop down that says this rule should either "block" or "allow"
  - 3. url pattern (regex pattern that will match the website url someone is about to navigate to)
  - 4. high prioirty (is this rule a high prioirty rule)
- CTC will build a redirectRules object similar to Conductor based on the rules that a user inputs

[Image #1]

- on attempting to save a rule, CTC will always run a "validation check" on all rules:
  - same url pattern cannot have more than one high priority container
  - same url pattern cannot have both allow and block
  - Allow Only + `*`  - invalid rule

in a future task i will provide how to process these rules. but for now, i would like to achieve the following:
- allow a user to input rules
- rule is saved if validated
- on each save, print an output log showing the table or list of rules object

the code must be extremely legible, simple and clean
- avoid overly nesting or including too many classes of fancy javascript

# Context:

- https://github.com/mcortt/Conductor/blob/6daa9ce23f2de0dc43f9e07378da03f141195fec/background.js is the main file
from conductor that you cna draw inspiration from
- i also like the addon https://github.com/kemayo/firefox-sticky-containers/blob/master/background.js which has a
clean style of code commenting and details - use this for inspiration in terms of how to write the code, add
comments, and debug logs
- container-redirect is an advanced add-on which provides almost the same set of complexity/functionality that CTC
will eventually achieve - code can be found here
https://github.com/max-dw-i/container-redirect/blob/master/src/index.js ; you may use this to figure out how
containers in firefox work, differnet functionality that can be achieved etc.

you are allowed to search the codebases of these plugins if necessary.

# Output Format:
- i want you to go through the asks
- if there are things that are unclear, raise them and ask me questions
- propose a set of tasks or plan on how you intend to go about achieving this feature first.

once i agree to the plan, i want you to write down a detailed checkpoint document in @.ai/plans/ctc-add-rule.md

I captured my prompts but wasn’t diligent about surfacing them in pull requests; here are a few I did capture:

• Here’s a PR where midway I captured a major feature change: the original version of the add-on used a very different way of capturing the rules. It wasn’t as intuitive, so I decided to change it up.
• This was more a fun one where I asked it to critique the code as an HN reader would. Some good suggestions came out of it, but the explicit persona callout didn’t generate anything helpful in this specific case.

The code is open source, so go ahead and check it out.

About the add-on itself

In my last post, How to Firefox, I covered “Privacy power-up: Containers”⁵. “Containers” let you log in to multiple Gmail accounts without separate browser profiles. Add Total Cookie Protection and you get strong isolation.

That’s great, but managing it automatically gets tedious fast. Examples:

• Keep google.com searches in one container, but open result links in my default container.
• From work Gmail, clicking a GitHub link: if it’s github.com/instacart, open in Work; if it’s github.com/kaushikgopal, open in Personal.
• In Google Docs (Personal), clicking a Sheets or Drive link should stay in Personal — even though my default for Sheets is Work.

You can’t achieve this level of control with default containers unless you micromanage every case — and even then, some are impossible. I tried various add-ons but kept hitting cases that just wouldn’t work.

So I built my own. I also prefer how this add-on asks you to set up rules:

Overall, I enjoyed the experiment. I’ve been happily using my add-on, and I feel confident that if I needed to make changes, I could do it in what I consider a maintainable codebase.

Stay tuned for my tips on how you can use AI coding more constructively.