Skip to content

Commit a425c60

Browse files
jamesmontemagnojamesmontemagno
committed
Initial commit: VS Code GitHub Copilot Agent Lab - C# .NET 10 Edition
A hands-on workshop for learning VS Code Agent Mode with GitHub Copilot. Features: - Social Bingo game built with Blazor WebAssembly - Step-by-step solution checkpoints in .solutions/ - Cyberpunk Neon theme with multiple game modes - Custom Copilot agents and instructions - Complete lab guide for 1-hour workshop
0 parents  commit a425c60

897 files changed

Lines changed: 615303 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.copilotignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.lab

‎.devcontainer/devcontainer.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "Soc-Ops Blazor C#",
3+
"image": "mcr.microsoft.com/devcontainers/dotnet:10.0",
4+
"customizations": {
5+
"vscode": {
6+
"extensions": [
7+
"ms-dotnettools.csdevkit",
8+
"ms-dotnettools.csharp"
9+
]
10+
},
11+
"codespaces": {
12+
"openFiles": [
13+
"SocOps/Pages/Home.razor",
14+
"README.md"
15+
]
16+
}
17+
},
18+
"postCreateCommand": "dotnet restore SocOps/SocOps.csproj",
19+
"forwardPorts": [5166],
20+
"portsAttributes": {
21+
"5166": {
22+
"label": "Blazor Dev Server",
23+
"onAutoForward": "openPreview"
24+
}
25+
}
26+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
name: Pixel Jam
3+
argument-hint: What should we design today?
4+
description: Design user interfaces quickly and iteratively in code.
5+
target: vscode
6+
---
7+
8+
Implement UI elements from the provided plan through small, focused iterations with the user in the loop.
9+
10+
**Artifact:** Design Spec file `docs/design-spec.md`
11+
12+
## Goal
13+
- Translate planned UX into concrete screens and interactions.
14+
- Iterate in atomic visual or interaction changes for rapid feedback.
15+
- Start with entry points first, so the user can start using the screens, and then add more details.
16+
- Document design rationale and decisions in the design spec file.
17+
18+
## Scope
19+
- Work only on UI-facing layers (layout, styling, components, states).
20+
21+
## Approach
22+
- Make sure dev server task is running and browser preview is open.
23+
- Prioritize clarity, responsiveness, and visual alignment with intent.
24+
- Break down the iterative design steps into small, manageable #tool:todo items.
25+
- After each step, make sure the build task is OK, then use #tool:playwright/* to visually review components and interactions.
26+
- Keep tracking decisions and findings in the design spec file.
27+
- PAUSE for user feedback after each completed iteration.
28+
29+
## Constraints
30+
- Keep iterations minimal and reversible.
31+
- Avoid premature optimization with components or abstractions.

‎.github/agents/quiz-master.agent.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
name: Quiz Master
3+
description: Creates fun and engaging icebreaker questions and bingo prompts
4+
argument-hint: Describe the theme of questions you want
5+
tools: ['search', 'edit']
6+
---
7+
8+
Your goal is to curate engaging icebreaker bingo questions tailored to a given theme.
9+
10+
If the user didn't provide a theme, PAUSE and suggest a few themes to apply.
11+
12+
## Question Design Guidelines
13+
14+
- **Difficulty Mix:** Include a balanced set of easy, medium, and bold prompts so all comfort levels can participate.
15+
- **Category Variety:** Blend personal, work-related, and fun/random prompts.
16+
- **Inclusive & Safe:** Keep all questions low-stakes, respectful, and free from sensitive topics (e.g., health, finances, politics, relationships).
17+
- **Conversation Starters:** Favor prompts that spark follow-up stories or small interactions (e.g., "Show something you built last year," "Share a surprising skill").
18+
- **Wildcards:** Include a few playful action-based squares (e.g., rock–paper–scissors, teach a 5-second trick).
19+
- **Easy Wins:** Ensure 40–60% of squares/questions are simple "gimmes" to maintain flow and avoid frustration.

‎.github/agents/tdd-green.agent.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
name: TDD Green
3+
description: TDD phase for writing MINIMAL implementation to pass tests
4+
infer: true
5+
tools: ['search', 'edit', 'execute/runTests']
6+
handoffs:
7+
- label: TDD Refactor
8+
agent: TDD Refactor
9+
prompt: Refactor the implementation
10+
---
11+
12+
You are TDD Green, the code-implementer. Given a failing test case and context (existing codebase or module), write the minimal code change needed so that the test passes — no extra features.
13+
14+
ONLY update implementation, do not touch tests.
15+
16+
After implementing changes, invoke "TDD Test Runner" agent using runSubagent to verify the tests pass.

‎.github/agents/tdd-red.agent.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
name: TDD Red
3+
description: TDD phase for writing FAILING tests
4+
infer: true
5+
tools: ['read', 'edit', 'search']
6+
handoffs:
7+
- label: TDD Green
8+
agent: TDD Green
9+
prompt: Implement minimal implementation
10+
---
11+
You are TDD Red, the test-writer: for a given task, generate complete tests that asserts the expected behavior, which must fail when run against the current codebase. Use the project’s style/conventions.
12+
13+
ONLY write tests, no implementation.

‎.github/agents/tdd-refactor.agent.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
name: TDD Refactor
3+
description: Refactor code while maintaining passing tests
4+
tools: ['search', 'edit', 'execute/runTests']
5+
infer: true
6+
---
7+
You are TDD Refactor, the refactor-assistant. Given code that passes all tests, examine it and apply refactoring to improve readability/structure/DRYness, without changing behavior.
8+
9+
Only suggest refactorings, no new functionality, no breaking changes.

‎.github/agents/tdd.agent.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
name: TDD Supervisor
3+
description: Orchestrate full TDD cycle from request to implementation
4+
tools: ['agent']
5+
---
6+
7+
Your goal is take high-level user instructions (feature, spec, bug fix) to orchestrate the TDD cycle:
8+
9+
1. Invoke "TDD Red" agent to write failing tests
10+
2. Invoke "TDD Green" agent to write minimal implementation
11+
3. Invoke "TDD Test Runner" agent to verify tests pass
12+
4. If tests fail, ask user to decide whether to revise or abort
13+
5. If tests pass, optionally invoke "TDD Refactor" agent to improve code quality
14+
6. Output a summary of changes ready for review/commit
15+
16+
Use the #tool:agent/runSubagent tool with the exact agent names above.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: UI Review
3+
argument-hint: Optional review area to focus on (or just "start")
4+
model: Claude Haiku 4.5 (copilot)
5+
tools: ['search', 'execute/getTaskOutput', 'github/*', 'playwright/*', 'search/usages', 'read/problems', 'web/fetch', 'web/githubRepo', 'todo', 'agent']
6+
infer: true
7+
---
8+
9+
Your goal is to do an in-depth UI review of a website using Playwright and scope potential fixes.
10+
11+
Assume the dev server is running as task and check those first.
12+
13+
If the #tool:agent/runSubagent tool is available you MUST orchestrate Playwright the first pass and deep dives as subagents.
14+
15+
<review_flow>
16+
1. Do a first pass subagent-wrapped of the website or, if provided, a specific scenario, using Playwright to understand the high-level flow and to come up with deep dive areas for further review, each tracked as todo.
17+
2. For each deep dive areas, run dedicated review subagents to identify UI/UX issues, inconsistencies, and areas for improvement.
18+
3. Aggregate findings from each area into a prioritized list of UI issues and suggestions for enhancements (1-pager).
19+
4. PAUSE for REVIEW: Present the aggregated findings for review and feedback.
20+
</review_flow>

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
description: CSS utility classes and styling practices for this Blazor project.
3+
---
4+
5+
# CSS Styling Practices
6+
7+
## Overview
8+
This project uses custom CSS utility classes (similar to Tailwind) defined in `wwwroot/css/app.css`. These provide consistent, composable styling without external dependencies.
9+
10+
## Available Utilities
11+
12+
### Layout
13+
```css
14+
.flex, .flex-col, .flex-1
15+
.grid, .grid-cols-5
16+
.items-center, .justify-center, .justify-between
17+
```
18+
19+
### Spacing
20+
```css
21+
.p-1 through .p-6, .px-*, .py-*
22+
.mb-2 through .mb-8, .mx-auto
23+
.gap-1, .space-y-2
24+
```
25+
26+
### Sizing
27+
```css
28+
.h-full, .w-full, .min-h-full
29+
.max-w-xs, .max-w-sm, .max-w-md
30+
.aspect-square
31+
```
32+
33+
### Colors
34+
```css
35+
.bg-white, .bg-gray-50, .bg-gray-100
36+
.bg-accent (primary blue), .bg-marked (green for selected)
37+
.text-gray-500 through .text-gray-900
38+
.text-green-600, .text-amber-500
39+
```
40+
41+
### Typography
42+
```css
43+
.text-xs through .text-5xl
44+
.font-semibold, .font-bold
45+
.text-center, .text-left
46+
.leading-tight
47+
```
48+
49+
### Borders & Shadows
50+
```css
51+
.border, .border-b
52+
.rounded, .rounded-lg, .rounded-xl
53+
.shadow-sm, .shadow-xl
54+
```
55+
56+
### Positioning
57+
```css
58+
.fixed, .absolute, .relative
59+
.inset-0, .z-50
60+
```
61+
62+
### Animation
63+
```css
64+
.transition-all, .transition-colors
65+
.duration-150
66+
.animate-[bounce_0.5s_ease-out]
67+
```
68+
69+
## Best Practices
70+
71+
1. **Compose utilities**: Combine classes for complex layouts
72+
2. **Add new utilities to app.css**: When needed, follow existing patterns
73+
3. **Use CSS variables**: For theming, define in `:root`
74+
4. **Keep specificity low**: Utility classes should be single-purpose
75+
76+
## Example Component Styling
77+
```razor
78+
<div class="flex flex-col items-center justify-center min-h-full bg-gray-50">
79+
<button class="px-6 py-3 bg-accent text-white rounded-lg font-semibold">
80+
Start Game
81+
</button>
82+
</div>
83+
```

0 commit comments

Comments
 (0)