🎯 Purpose
Visual representation of our Software Development Lifecycle (SDLC) showing:
- 10 development stages from issue creation to production
- 8 AI sub-agents that assist in the workflow
- Tools and technologies used at each stage
- Clear visual flow with minimal narrative
🤖 Sub-Agents in the Workflow
Requirements Agent (Stage 2)
- When: Planning & Documentation phase
- Purpose: Creates and updates requirement documents
- Location:
.github/agents/requirements.agent.md
- Updates:
Requirements/*.md files
Implementation Summaries Agent (Stage 2)
- When: Planning & Documentation phase
- Purpose: Documents completed features, bug fixes, and system changes
- Location:
.github/agents/implementation-summaries.agent.md
- Updates:
Implementation Summaries/*.md files
Design System Agent (Stage 3)
- When: Development phase
- Purpose: Manages design tokens, mixins, and global styles
- Location:
.github/agents/design-system.agent.md
- Updates:
src/styles/*.scss and DESIGN_SYSTEM.md
Firestore Rules Agent (Stage 3)
- When: Development phase
- Purpose: Creates and updates Firestore security rules
- Location:
.github/agents/firestore-rules.agent.md
- Updates:
firestore.rules
Migration Scripts Agent (Stage 3)
- When: Development phase (data model changes)
- Purpose: Creates data migration scripts for schema changes
- Location:
.github/agents/migration-scripts.agent.md
- Updates:
scripts/*.ts migration files
Online Help Agent (Stage 6)
- When: Help Documentation phase
- Purpose: Creates and updates online help documentation
- Location:
.github/agents/online-help.agent.md
- Updates:
src/assets/help/*.md files
GitHub Pages SDLC Agent (Stage 8)
- When: Pull Request / Documentation phase
- Purpose: Updates SDLC workflow visualization and GitHub Pages
- Location:
.github/agents/github-pages.agent.md
- Updates:
docs/*.html and docs/*.md files
GitHub Workflows Agent (Stage 9)
- When: CI/CD Pipeline phase
- Purpose: Creates and updates GitHub Actions workflows
- Location:
.github/agents/github-workflows.agent.md
- Updates:
.github/workflows/*.yml files
📊 The 10 Stages
Stage Details
- Issue Creation - GitHub Issues
- Planning & Documentation - Requirements Agent 🤖, Implementation Summaries Agent 🤖
- Development - Angular, Firebase, TypeScript; Design System Agent 🤖, Firestore Rules Agent 🤖, Migration Scripts Agent 🤖
- Testing & Validation - npm build, emulators
- E2E Testing - Playwright, automated tests
- Help Documentation - Online Help Agent 🤖
- Code Review - Automated tools, codeql_checker
- Pull Request - GitHub PR; GitHub Pages SDLC Agent 🤖
- CI/CD Pipeline - GitHub Actions; GitHub Workflows Agent 🤖
- Production Deployment - Firebase Hosting
💻 Most Common Commands
Start Development Server
npm start
Starts Angular dev server on port 4200
Start Firebase Emulators
npm run emulator
Runs Firebase emulators locally
Development Mode
npm run dev
Runs both emulators and dev server
Build for Production
npm run build:prod
Creates optimized production build
Deploy to Firebase
npm run deploy
Builds and deploys to Firebase Hosting
Docker Development
npm run docker:dev
Runs app in Docker containers
🎨 Visual Design
- Purple gradient background
- Numbered stages with circular badges
- Pink badges for AI sub-agents
- Teal badges for tools and technologies
- Arrows showing flow direction
- Hover effects for interactivity
📱 Features
- Responsive design (mobile & desktop)
- Smooth animations
- Accessibility support
- Print-friendly
- No dependencies (pure HTML/CSS)
🔧 Maintenance
To Update the Workflow:
- Edit
docs/index.html
- Test locally:
cd docs && python -m http.server 8000
- Commit and push to main branch
- GitHub Pages auto-deploys within 2 minutes
To Add New Stage:
- Copy an existing stage section in
docs/index.html
- Update stage number, title, description, and tools
- Adjust arrow placement if needed
- Test locally before committing
To Modify Sub-Agent Information:
- Update the agent badge and description in the relevant stage
- Ensure consistency with
.github/agents/*.agent.md files
- Test visual appearance
💡 Use Cases
- Onboarding: Show new team members the development process
- Stakeholder Updates: Visual representation for non-technical audiences
- Process Documentation: Quick reference for the SDLC
- Training: Explain how AI sub-agents integrate into workflow
- Presentations: Professional visual for demos
🎨 Most Used Design Tokens
/* Colors */
$color-primary: #667eea;
$color-secondary: #764ba2;
$color-success: #48bb78;
$color-warning: #ed8936;
$color-error: #f56565;
/* Spacing */
$spacing-base: 1rem;
$spacing-small: 0.5rem;
$spacing-large: 2rem;
/* Typography */
$font-size-base: 1rem;
$font-size-large: 1.5rem;
$font-size-small: 0.875rem;
📞 Questions?
See the full README in docs/README.md or the setup guide in docs/GITHUB_PAGES_SETUP.md