Part 5: Polish & Parallel Work

Now that the app works and looks great, it’s time to polish. This part is about splitting work up so you can improve responsiveness, error handling, and quality without doing everything in a single serial loop.

Task 1: Split the Work with `/fleet`

In Copilot CLI, use /fleet to split the work across parallel subagents, then review the combined output:

/fleet Improve the app in parallel:
1. Add responsive CSS media queries so the comparison collapses to one column at 1024px and the inputs stack on small screens.
2. Improve keyboard accessibility and focus visibility.
3. Improve the error experience with stronger validation feedback and arcade-style neon error states.

Let the CLI orchestrate the work, then inspect the combined result with /diff before approving anything.

Task 2: Delegate a Variation (Optional)

If you want to try an asynchronous cloud workflow, delegate a design variation:

/delegate Create an alternative color theme for the battle page that keeps the retro arcade look but swaps in blue (#00f5ff) and orange (#ff6b35). Make it easy to toggle.

That delegated task should create a pull request you can review separately while you keep working locally.

Task 3: Run an Agentic Review

Before you wrap up, ask Copilot CLI for a review pass:

/review Focus on potential bugs, accessibility issues, and UX regressions in the current branch.

For extra quality gates, run the other built-in review agents too:

/rubber-duck Critique my battle logic and error handling for edge cases I may have missed.

📝 The rubber duck agent is currently only available if the main agent is using a Claude or GPT large language model.

/security-review

Review the findings, fix anything you agree with, then run /diff again so you’re clear on what changed.

💡 /review, /rubber-duck, and /security-review are all built-in agents — you’ll learn to build your own specialized agents in Part 6.

Task 4: Verify Everything

⚠️ Not seeing changes? If any of the polish updates aren’t showing up, stop the dev server (Ctrl+C) and restart with npm run dev, then do a hard refresh (Ctrl+Shift+R) in your browser.

Run through these test scenarios to make sure everything works:

Test	Expected Result
Empty fields, click Battle	Styled error with shake animation
Valid usernames	Contribution graphs displayed
Invalid username	Error from API with retro styling
Enter key in input	Triggers battle
Mobile width	Single-column responsive layout
Hover contribution squares	Tooltip with date and count

Build for production and confirm there are no errors:

npm run build && npm run preview

Once everything looks good, commit your working code.

✅ Part 5 Complete!

What you learned:

Break polish work into smaller parallel tasks
Review generated changes before merging them into your main branch
Use Copilot for quality passes and optional explorations, not just implementation