Refactor CSS utility classes and update agent instructions across multiple steps

- Updated CSS utility classes in instructions for improved clarity and consistency.
- Removed unnecessary tools from UI Review agent configuration.
- Revised instructions for using Playwright and Copilot CLI sessions in various agents.
- Enhanced workshop documentation to reflect changes in agent workflows and setup processes.
- Adjusted commit messages for clarity and alignment with project goals.

Author: madebygps

.devcontainer/devcontainer.json

@@ -2,7 +2,8 @@
   "name": "Soc-Ops Python",
   "image": "mcr.microsoft.com/devcontainers/python:3.13",
   "features": {
-    "ghcr.io/va-h/devcontainers-features/uv": {}
+    "ghcr.io/va-h/devcontainers-features/uv": {},
+    "ghcr.io/devcontainers/features/node:1": {}
   },
   "customizations": {
     "vscode": {

.github/agents/pixel-jam.agent.md

@@ -22,7 +22,7 @@ Implement UI elements from the provided plan through small, focused iterations w
 - Make sure dev server task is running and browser preview is open.
 - Prioritize clarity, responsiveness, and visual alignment with intent.
 - Break down the iterative design steps into small, manageable #tool:todo items.
-- After each step, make sure the build task is OK, then visually review components and interactions.
+- After each step, make sure the build task is OK, then use Playwright to visually review components and interactions.
 - Keep tracking decisions and findings in the design spec file.
 - PAUSE for user feedback after each completed iteration.
 

.github/agents/ui-review.agent.md

@@ -2,7 +2,7 @@
 name: UI Review
 argument-hint: Optional review area to focus on (or just "start")
 model: Claude Haiku 4.5 (copilot)
-tools: ['search', 'search/usages', 'read/problems', 'web/fetch', 'todo', 'agent']
+tools: ['search', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'todo', 'agent']
 ---
 
 Your goal is to do an in-depth UI review of a website using Playwright and scope potential fixes.

.github/instructions/css-utilities.instructions.md

@@ -18,29 +18,43 @@ This project uses custom CSS utility classes (similar to Tailwind) defined in `a
 
 ### Spacing
 ```css
-.p-1 through .p-6, .px-*, .py-*
-.mb-2 through .mb-8, .mx-auto
+/* Padding */
+.p-1, .p-3, .p-4, .p-6
+.px-3, .px-4, .px-6, .px-8
+.py-1\.5, .py-2, .py-3, .py-4
+/* Margin */
+.mb-2, .mb-3, .mb-4, .mb-6, .mb-8, .mx-auto
+/* Gap */
 .gap-1, .space-y-2
 ```
 
 ### Sizing
 ```css
-.h-full, .w-full, .min-h-full
+.h-full, .w-full, .w-16, .min-h-full
 .max-w-xs, .max-w-sm, .max-w-md
 .aspect-square
+.min-h-[60px]
 ```
 
 ### Colors
 ```css
+/* Backgrounds */
 .bg-white, .bg-gray-50, .bg-gray-100
-.bg-accent (primary blue), .bg-marked (green for selected)
-.text-gray-500 through .text-gray-900
-.text-green-600, .text-amber-500
+.bg-amber-100, .bg-amber-200
+.bg-accent (primary blue: #2563eb)
+.bg-marked (light green: #dcfce7)
+.bg-black/50 (semi-transparent overlay)
+/* Text */
+.text-white
+.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900
+.text-green-600, .text-green-800
+.text-amber-500, .text-amber-800, .text-amber-900
 ```
 
 ### Typography
 ```css
-.text-xs through .text-5xl
+/* Size (only these exist — no text-base, text-xl, text-2xl, etc.) */
+.text-xs, .text-sm, .text-lg, .text-3xl, .text-4xl, .text-5xl
 .font-semibold, .font-bold
 .text-center, .text-left
 .leading-tight
@@ -49,14 +63,24 @@ This project uses custom CSS utility classes (similar to Tailwind) defined in `a
 ### Borders & Shadows
 ```css
 .border, .border-b
+.border-gray-200, .border-gray-300, .border-amber-400, .border-marked-border
 .rounded, .rounded-lg, .rounded-xl
 .shadow-sm, .shadow-xl
 ```
 
 ### Positioning
 ```css
 .fixed, .absolute, .relative
-.inset-0, .z-50
+.inset-0
+.top-0\.5, .right-0\.5
+.z-50
+```
+
+### Interactivity
+```css
+.select-none
+.wrap-break-word
+.hyphens-auto
 ```
 
 ### Animation

.solutions/README.md

@@ -9,17 +9,19 @@ This folder contains step-by-step checkpoints for the VS Code Agent Lab workshop
 
 ## Checkpoints Overview
 
-| Step | Description | Key Changes |
-|------|-------------|-------------|
-| `step-00-baseline` | Starting point | Clean Python app with basic bingo game |
-| `step-01-instructions` | Workspace instructions | Added `.github/copilot-instructions.md` |
-| `step-02-linting` | Linting rules | Ruff linting configured in `pyproject.toml` |
-| `step-03-readme-update` | Enhanced README | Made README more engaging as landing page |
-| `step-04-redesign-cyberpunk` | UI Redesign | Cyberpunk Neon theme applied |
-| `step-05-quiz-techlife` | Quiz Master | Tech Life Bingo questions |
-| `step-06-scavenger-hunt` | Scavenger Hunt mode | New game mode with progress tracking |
-| `step-07-card-deck` | Card Deck Shuffle | Random card draw mode |
-| `finished` | Complete workshop | All features combined |
+Solution steps are more granular than workshop parts — a single workshop part may produce multiple solution steps.
+
+| Step | Workshop Part | Description | Key Changes |
+|------|--------------|-------------|-------------|
+| `step-00-baseline` | — | Starting point | Clean Python app with basic bingo game |
+| `step-01-instructions` | [Part 1](../workshop/01-setup.md) — Task 1 | Workspace instructions | Added `.github/copilot-instructions.md` |
+| `step-02-linting` | [Part 1](../workshop/01-setup.md) — Task 2 | Linting rules | Ruff linting configured via Copilot CLI session |
+| `step-03-readme-update` | [Part 1](../workshop/01-setup.md) — Task 2 | Enhanced README | Made README more engaging via cloud agent |
+| `step-04-redesign-cyberpunk` | [Part 2](../workshop/02-design.md) — Task 1 | UI Redesign | Cyberpunk Neon theme applied |
+| `step-05-quiz-techlife` | [Part 3](../workshop/03-quiz-master.md) | Quiz Master | Tech Life Bingo questions |
+| `step-06-scavenger-hunt` | [Part 4](../workshop/04-multi-agent.md) — Task 1 | Scavenger Hunt mode | New game mode with progress tracking (TDD-built) |
+| `step-07-card-deck` | [Part 4](../workshop/04-multi-agent.md) — Task 2 | Card Deck Shuffle | Random card draw mode (Pixel Jam-built) |
+| `finished` | — | Complete workshop | All features combined |
 
 ## How to Use a Checkpoint
 

.solutions/finished/.github/agents/pixel-jam.agent.md

@@ -22,7 +22,7 @@ Implement UI elements from the provided plan through small, focused iterations w
 - Make sure dev server task is running and browser preview is open.
 - Prioritize clarity, responsiveness, and visual alignment with intent.
 - Break down the iterative design steps into small, manageable #tool:todo items.
-- After each step, make sure the build task is OK, then use #tool:playwright/* to visually review components and interactions.
+- After each step, make sure the build task is OK, then use Playwright to visually review components and interactions.
 - Keep tracking decisions and findings in the design spec file.
 - PAUSE for user feedback after each completed iteration.
 

.solutions/finished/.github/agents/ui-review.agent.md

@@ -2,7 +2,7 @@
 name: UI Review
 argument-hint: Optional review area to focus on (or just "start")
 model: Claude Haiku 4.5 (copilot)
-tools: ['search', 'execute/getTaskOutput', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'web/githubRepo', 'todo', 'agent']
+tools: ['search', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'todo', 'agent']
 infer: true
 ---
 

.solutions/finished/.github/instructions/css-utilities.instructions.md

@@ -18,29 +18,43 @@ This project uses custom CSS utility classes (similar to Tailwind) defined in `a
 
 ### Spacing
 ```css
-.p-1 through .p-6, .px-*, .py-*
-.mb-2 through .mb-8, .mx-auto
+/* Padding */
+.p-1, .p-3, .p-4, .p-6
+.px-3, .px-4, .px-6, .px-8
+.py-1\.5, .py-2, .py-3, .py-4
+/* Margin */
+.mb-2, .mb-3, .mb-4, .mb-6, .mb-8, .mx-auto
+/* Gap */
 .gap-1, .space-y-2
 ```
 
 ### Sizing
 ```css
-.h-full, .w-full, .min-h-full
+.h-full, .w-full, .w-16, .min-h-full
 .max-w-xs, .max-w-sm, .max-w-md
 .aspect-square
+.min-h-[60px]
 ```
 
 ### Colors
 ```css
+/* Backgrounds */
 .bg-white, .bg-gray-50, .bg-gray-100
-.bg-accent (primary blue), .bg-marked (green for selected)
-.text-gray-500 through .text-gray-900
-.text-green-600, .text-amber-500
+.bg-amber-100, .bg-amber-200
+.bg-accent (primary blue: #2563eb)
+.bg-marked (light green: #dcfce7)
+.bg-black/50 (semi-transparent overlay)
+/* Text */
+.text-white
+.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900
+.text-green-600, .text-green-800
+.text-amber-500, .text-amber-800, .text-amber-900
 ```
 
 ### Typography
 ```css
-.text-xs through .text-5xl
+/* Size (only these exist — no text-base, text-xl, text-2xl, etc.) */
+.text-xs, .text-sm, .text-lg, .text-3xl, .text-4xl, .text-5xl
 .font-semibold, .font-bold
 .text-center, .text-left
 .leading-tight
@@ -49,14 +63,24 @@ This project uses custom CSS utility classes (similar to Tailwind) defined in `a
 ### Borders & Shadows
 ```css
 .border, .border-b
+.border-gray-200, .border-gray-300, .border-amber-400, .border-marked-border
 .rounded, .rounded-lg, .rounded-xl
 .shadow-sm, .shadow-xl
 ```
 
 ### Positioning
 ```css
 .fixed, .absolute, .relative
-.inset-0, .z-50
+.inset-0
+.top-0\.5, .right-0\.5
+.z-50
+```
+
+### Interactivity
+```css
+.select-none
+.wrap-break-word
+.hyphens-auto
 ```
 
 ### Animation

.solutions/step-01-instructions/.github/agents/pixel-jam.agent.md

@@ -22,7 +22,7 @@ Implement UI elements from the provided plan through small, focused iterations w
 - Make sure dev server task is running and browser preview is open.
 - Prioritize clarity, responsiveness, and visual alignment with intent.
 - Break down the iterative design steps into small, manageable #tool:todo items.
-- After each step, make sure the build task is OK, then use #tool:playwright/* to visually review components and interactions.
+- After each step, make sure the build task is OK, then use Playwright to visually review components and interactions.
 - Keep tracking decisions and findings in the design spec file.
 - PAUSE for user feedback after each completed iteration.
 

.solutions/step-01-instructions/.github/agents/ui-review.agent.md

@@ -2,7 +2,7 @@
 name: UI Review
 argument-hint: Optional review area to focus on (or just "start")
 model: Claude Haiku 4.5 (copilot)
-tools: ['search', 'execute/getTaskOutput', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'web/githubRepo', 'todo', 'agent']
+tools: ['search', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'todo', 'agent']
 infer: true
 ---