DEV Community

Bhargav Patel
Bhargav Patel

Posted on

Building an Agentic Angular Copilot Workflow (Production Blueprint)

#agents #ai #angular #productivity

🧭 Overview

This document defines a complete production system for using GitHub Copilot in Angular projects as an agentic engineering assistant.

It standardizes:

  • Feature development
  • Bug investigation
  • Refactoring
  • Testing
  • Code review

The system is built on 4 layers:

Copilot Instructions → Behavior rules
Prompt Library       → Engineering knowledge
Task Files           → Working memory per ticket
VS Code Snippets     → Command triggers
Enter fullscreen mode Exit fullscreen mode

📁 1. COMPLETE REPOSITORY STRUCTURE

This is the full working setup:

.github/
  copilot-instructions.md

docs/
  copilot-prompts/
    00-core.md
    01-feature.md
    02-bug.md
    03-refactor.md
    05-ngrx.md
    09-testing.md
    10-pr-review.md

  ai/
    feature-map.md
    patterns.md
    review-checklist.md

    tasks/
      ABC-123.md
      ABC-456.md

.vscode/
  snippets.code-snippets
Enter fullscreen mode Exit fullscreen mode

⚙️ 2. COPILOT INSTRUCTIONS (GLOBAL BRAIN)

📄 .github/copilot-instructions.md

This file defines how Copilot behaves in every request.

You are a senior Angular engineer working in a large enterprise codebase.

You MUST follow these workflows strictly.

---

## FEATURE WORKFLOW

1. Analyze existing implementation in the codebase
2. Identify similar features already implemented
3. Map dependencies (components, services, NgRx store)
4. Identify missing or unclear requirements
5. Create a step-by-step implementation plan BEFORE coding
6. Wait for confirmation before implementation
7. Implement incrementally
8. Add unit tests
9. Ensure Angular best practices:
   - Standalone components
   - OnPush change detection
   - Reuse NgRx patterns

---

## BUG WORKFLOW

1. Identify root cause
2. Trace full flow:
   UI → Component → Service → Store → API
3. Compare with working implementation
4. Propose minimal fix
5. Do NOT modify code until root cause is confirmed

---

## REFACTOR WORKFLOW

1. Analyze existing structure
2. Identify duplication and technical debt
3. Suggest incremental refactor plan
4. Do NOT apply changes immediately

---

## ARCHITECTURE RULES

- Prefer standalone components
- Use OnPush by default
- Avoid `any`
- Reuse NgRx actions/effects/selectors
- Do not introduce new architecture without approval
- Keep services single responsibility

## When working on a feature or bug:

- Always create or update a task file under:
  docs/ai/tasks/<TICKET_ID>.md

- Store:
  - analysis
  - affected files
  - implementation plan
  - decisions
  - risks

- Continuously update this file during the work
Enter fullscreen mode Exit fullscreen mode

📚 3. PROMPT LIBRARY (DOMAIN KNOWLEDGE)

These files define reusable Angular engineering rules.

📄 00-core.md 

You are working in an Angular enterprise application.

Always follow:

- Reuse existing patterns
- Prefer consistency over innovation
- Break work into small steps
- Always validate against existing codebase
Enter fullscreen mode Exit fullscreen mode

📄 01-feature.md 

FEATURE IMPLEMENTATION RULES:

Before coding:

1. Scan existing implementation
2. Identify similar features
3. Map affected modules
4. Identify missing requirements
5. Create implementation plan

During implementation:

- Use existing services
- Follow NgRx patterns if present
- Keep components thin
- Avoid duplication

After implementation:

- Add unit tests
- Validate UI flow
Enter fullscreen mode Exit fullscreen mode

📄 02-bug.md 

BUG INVESTIGATION RULES:

1. Identify root cause (do not guess)
2. Trace full data flow:
   UI → Component → Service → Store → API
3. Compare with working flow
4. Identify minimal fix

Constraints:

- Do not refactor while fixing bug
- Do not change architecture
- Only fix root cause
Enter fullscreen mode Exit fullscreen mode

📄 03-refactor.md 

REFACTOR RULES:

1. Identify issues:
   - duplication
   - performance problems
   - bad separation of concerns

2. Propose:
   - incremental changes
   - safe refactor steps

Do NOT:
- rewrite full modules
- change architecture
Enter fullscreen mode Exit fullscreen mode

📄 05-ngrx.md 

NGRX RULES:

- Actions = events only
- Reducers = pure functions
- Effects = side effects only
- Selectors = read-only access

Always:

- reuse existing actions
- avoid duplicate state
- keep effects minimal
Enter fullscreen mode Exit fullscreen mode

📄 09-testing.md 

TESTING RULES:

- Cover happy path
- Cover edge cases
- Mock services properly
- Avoid testing implementation details
- Follow existing test structure
Enter fullscreen mode Exit fullscreen mode

📄 10-pr-review.md 

PR REVIEW CHECKLIST:

Check:

- Angular best practices
- NgRx correctness
- RxJS memory leaks
- OnPush usage
- Code duplication
- Missing tests
- Performance issues
Enter fullscreen mode Exit fullscreen mode

🧠 4. TASK MEMORY SYSTEM (CRITICAL)

Each ticket gets a dedicated AI memory file.

📄 Example: ABC-123.md 

# ABC-123 — Suspend User Feature

## STATUS
In Progress

---

## SUMMARY
Add ability to suspend a user from user details page.

---

## AFFECTED FILES

- user-details.component.ts
- user.actions.ts
- user.effects.ts
- user.reducer.ts

---

## SIMILAR IMPLEMENTATION

Reference:
- delete-user feature

Same flow:
- confirmation dialog
- API call
- state refresh

---

## DECISIONS

- reuse SharedConfirmDialogComponent
- no new UI components
- NgRx-based state update

---

## IMPLEMENTATION PLAN

### Step 1
Create suspendUser action

### Step 2
Create NgRx effect

### Step 3
Call backend API

### Step 4
Update store state

### Step 5
Refresh UI state

### Step 6
Add unit tests

---

## RISKS

- stale state if refresh fails
- incorrect selector mapping
Enter fullscreen mode Exit fullscreen mode

📄 Example: ABC-456.md (Bug) 

# ABC-456 — Login Failure Issue

## STATUS
Investigating

---

## ROOT CAUSE
Pending analysis

---

## AFFECTED FLOW

LoginComponent → AuthService → API → Store

---

## NOTES

- Issue occurs only in production build
- Suspected token handling issue

---

## FIX PLAN

1. Identify failing API response handling
2. Check interceptor logic
3. Compare with working environment
4. Apply minimal fix
Enter fullscreen mode Exit fullscreen mode

⚡ 5. VS CODE SNIPPETS (COMMAND SYSTEM)

📄 .vscode/snippets.code-snippets

FEATURE 

{
  "Angular Feature": {
    "prefix": "feat",
    "body": [
      "Implement feature: ${1:TICKET_ID}",
      "",
      "${2:Paste Jira description here}"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

BUG 

{
  "Angular Bug": {
    "prefix": "bug",
    "body": [
      "Investigate defect: ${1:TICKET_ID}",
      "",
      "${2:Paste bug description here}"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

REFACTOR 

{
  "Angular Refactor": {
    "prefix": "refactor",
    "body": [
      "Review component/service: ${1:NAME}",
      "",
      "Identify issues:",
      "- duplication",
      "- performance issues",
      "- architecture improvements"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

REVIEW 

{
  "Angular Review": {
    "prefix": "review",
    "body": [
      "Review PR changes",
      "",
      "Check:",
      "- Angular best practices",
      "- NgRx correctness",
      "- RxJS memory leaks",
      "- OnPush usage",
      "- missing tests"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

🚀 6. DAILY WORKFLOW (REAL USAGE)

🟢 FEATURE FLOW

Step 1 

feat ABC-123
Enter fullscreen mode Exit fullscreen mode

Add Jira description.

Step 2

Copilot:

  • analyzes codebase
  • finds similar implementation
  • identifies dependencies
  • creates plan

Step 3

Creates task file:

docs/ai/tasks/ABC-123.md
Enter fullscreen mode Exit fullscreen mode

Step 4

Implementation:

Use ABC-123 task file → implement step-by-step
Enter fullscreen mode Exit fullscreen mode

Step 5

Finalize:

  • tests added
  • PR review done
  • task updated

🐞 BUG FLOW

Step 1 

bug ABC-456
Enter fullscreen mode Exit fullscreen mode

Step 2

Copilot:

  • traces full flow
  • identifies root cause
  • suggests fix

Step 3

Stores in task file

Step 4

Apply minimal fix

♻️ REFACTOR FLOW 

refactor UserDetailsComponent
Enter fullscreen mode Exit fullscreen mode

Output:

  • issues
  • plan
  • risks
  • stepwise execution

🧪 TEST FLOW 

test
Enter fullscreen mode Exit fullscreen mode

Generates:

  • unit tests
  • edge cases
  • Angular patterns

🔍 REVIEW FLOW 

review
Enter fullscreen mode Exit fullscreen mode

Produces:

  • architecture feedback
  • NgRx validation
  • performance issues

🧠 7. SYSTEM MODEL 

Snippets        → commands
Copilot Rules   → behavior engine
Prompt Library  → domain knowledge
Task Files      → memory per ticket
Enter fullscreen mode Exit fullscreen mode

🔥 FINAL OUTCOME

This system ensures:

  • predictable Angular architecture
  • reusable patterns across team
  • structured AI behavior
  • no repeated prompting
  • faster delivery cycles
  • scalable onboarding

📌 FINAL PRINCIPLE

Developers only do:

feat ABC-123
bug ABC-456
refactor ComponentName
Enter fullscreen mode Exit fullscreen mode

Everything else is handled by the system.

Top comments (0)