🔄 Living Project – Continuously updated with the latest AI-assisted development practices, patterns, and learnings.
Vue 3 Todo Dashboard – A reference implementation demonstrating multi-agent AI development with GitHub Copilot.
This project showcases how professional teams use AI to boost productivity while maintaining quality, safety, and developer control.
AI is a co-pilot, not an autopilot. You are responsible for code quality, security, and compliance.
| Responsibility | Action | |
|---|---|---|
| 👁️ | Review | Read and understand all AI-generated code before committing |
| ✅ | Validate | Check against requirements and project standards |
| 🧪 | Test | Run full test suite before merging |
| 🔒 | Security | Verify auth, credentials, and data handling |
| 💡 | Understand | Know what changed and why it changed |
📖 Read the full guide → – detailed checklists on developer accountability and AI-assisted workflows (see SECURITY.md for security and incident response)
New to this project? Begin with the AI Development Guide for a complete overview of agents, instructions, MCP, and how everything works together.
In This README:
- Developer Responsibilities – Your accountability when working AI-Assisted
- Getting Started – Run locally in 3 steps
- System Architecture – Visual overview
- Tech Stack – Technologies used
- Documentation – All learning resources
┌──────────────────────────────────────────────────────────────────────────────┐
│ GitHub Copilot Agent Mode │
├──────────────────────────────────────────────────────────────────────────────┤
│ Agents (6) │ Instructions (10) │ Skills (11) │
│ ├── Implement │ ├── Global │ ├── Architectural Docs │
│ ├── Specify │ ├── Backend Routes │ ├── Backend Routes │
│ ├── Test Unit │ ├── Pinia Stores │ ├── Code Documentation │
│ ├── Test E2E │ ├── Prisma Database │ ├── E2E Testing │
│ ├── Onboarding │ ├── Styling │ ├── Pinia Stores │
│ └── Socratic Mentor │ ├── Testing Backend │ ├── Prisma Database │
│ │ ├── Testing E2E │ ├── Security Review │
│ │ ├── Testing Frontend │ ├── Styling │
│ │ ├── Vue Components │ ├── Unit Testing │
│ │ └── Vue Composables │ ├── Vue Components │
│ │ │ └── Vue Composables │
├──────────────────────────────────────────────────────────────────────────────┤
│ Prompts (10) │
│ ├── Generate API Endpoint ├── Generate Pinia Store │
│ ├── Generate Component ├── Generate Unit Test │
│ ├── Generate E2E Test ├── Review Security │
│ ├── Specify ├── Implement │
│ ├── Onboard └── Mentor │
├──────────────────────────────────────────────────────────────────────────────┤
│ MCP Integrations (4) │
│ ├── Atlassian (Jira/Confluence) ├── Chrome DevTools │
│ ├── Figma Desktop └── Playwright │
└──────────────────────────────────────────────────────────────────────────────┘
| Layer | Stack | Details |
|---|---|---|
| Frontend | Vue 3 + TypeScript + Vite | frontend/README.md |
| Backend | Express + Prisma + PostgreSQL | backend/README.md |
| Testing | Vitest, Playwright | Unit & E2E |
| AI | GitHub Copilot, Custom Agents, MCP | See docs/ |
- Node.js
>=22.12.0 - Docker (for PostgreSQL)
- VS Code with GitHub Copilot Extension
For a secure, isolated development environment, use Dev Containers:
- Install the Dev Containers extension
- Open Command Palette (
Cmd+Shift+P) → "Dev Containers: Reopen in Container" - Wait for container to build (first time takes ~2 minutes)
- Run
whoamiin terminal to verify non-root user (should shownode)
The container automatically installs dependencies, starts PostgreSQL, and runs migrations.
# Clone and install all dependencies
git clone <repository-url>
cd todo_app
npm run install:all
# Start backend (requires Docker)
cd backend
docker compose up -d
npm run db:migrate && npm run db:seed
npm run dev # API → http://localhost:3000
# Start frontend (new terminal)
cd frontend
npm run dev # App → http://localhost:5173| Command | Description |
|---|---|
npm run dev |
Start frontend & backend concurrently |
npm run install:all |
Install all dependencies |
npm run test |
Run all tests |
npm run test:e2e |
Run Playwright E2E tests |
📖 See frontend/README.md and backend/README.md for full command reference.
| Resource | Purpose |
|---|---|
| What is GitHub Copilot? | Overview and capabilities |
| Response Customization | Examples and best practices |
| Customization Cheat Sheet | Compare all customization features (instructions, agents, prompts, skills, MCP) |
| Trust Center | Security, privacy, and compliance |
| Resource | Purpose |
|---|---|
| MCP Official Site | Introduction and core concepts |
| MCP Architecture | How MCP works under the hood |
| Building MCP Servers | Create custom MCP integrations |
| Resource | Purpose |
|---|---|
| Awesome Copilot | Community examples and best practices |
| Customization Library | Official curated examples of customization features |
🎓 Reference Implementation – This is a showcase project demonstrating professional practices for AI-assisted software development. It's designed for learning and as a template for your own AI-powered development workflows.
Skill-Level Awareness – The project includes training agents (@Onboarding, @socratic-mentor) that adapt to different developer skill levels, from juniors learning through Socratic questioning to seniors orchestrating full agent workflows. See the Skill Levels Guide for details.
Not for Production Use – This is a demonstration project. For production use, customize the agents, instructions, and security policies to match your organization's standards.
Code Quality Notice – While we strive to maintain the code quality standards expected at slashwhy, the experimental and educational nature of this project means quality cannot be guaranteed. Code in this repository does not necessarily reflect the production code quality expectations of slashwhy.
🧑
You remain responsible for your output, code quality, security, and compliance.