⚙️ Copilot Collections

Opinionated GitHub Copilot setup for delivery teams – with shared workflows, agents, prompts, and MCP integrations.

Focus on building features – let Copilot handle the glue.
Built by The Software House.

🚀 What This Repo Provides

🧠 Shared workflows – a 4‑phase delivery flow: Research → Plan → Implement → Review.
🧑‍💻 Specialized agents – Architect, Business Analyst, Software Engineer, Code Reviewer.
💬 Task prompts – /research, /plan, /implement, /review with consistent behavior across projects.
🔌 MCP integrations – Atlassian, Figma Dev Mode, Context7, Playwright, Sequential Thinking.
🧩 VS Code setup – ready‑to‑plug global configuration via VS Code User Settings.

⚠️ Copilot License Requirement

This configuration requires GitHub Copilot Pro license (or higher) to use custom agents and MCP integrations.

⚠️ VS Code Version Requirement

This configuration requires VS Code version 1.109 or later.

🧭 Supported Workflow

Our standard workflow is always:

Research → Plan → Implement → Review

1. 🔍 Research

Builds context around a task using Jira, Figma and other integrated tools.
Identifies missing information, risks, and open questions.
Produces a concise summary and a list of unknowns.

2. 🧱 Plan

Translates the task into a structured implementation plan.
Breaks work into phases and executable steps.
Clarifies acceptance criteria and technical constraints.

3. 🛠 Implement

Executes against the agreed plan.
Writes or modifies code with a focus on safety and clarity.
Keeps changes scoped to the task, respecting existing architecture.

4. ✅ Review

Performs a structured code review against:
- Acceptance criteria
- Security and reliability
- Maintainability and style
Surfaces risks and suggested improvements.

Example End‑to‑End Usage

1️⃣ /research <JIRA_ID or task description>
   ↳ 📖 Review the generated research document
   ↳ ✅ Verify accuracy, iterate if needed

2️⃣ /plan     <JIRA_ID or task description>
   ↳ 📖 Review the implementation plan
   ↳ ✅ Confirm scope, phases, and acceptance criteria

3️⃣ /implement<JIRA_ID or task description>
   ↳ 📖 Review code changes after each phase
   ↳ ✅ Test functionality, verify against plan

4️⃣ /review   <JIRA_ID or task description>
   ↳ 📖 Review findings and recommendations
   ↳ ✅ Address blockers before merging

You can run the same flow with either a Jira ticket ID or a free‑form task description.

⚠️ Important: Each step requires your review and verification. Open the generated documents, go through them carefully, and iterate as many times as needed until the output looks correct. AI assistance does not replace human judgment – treat each output as a draft that needs your approval before proceeding.

Example Frontend Flow (with Figma designs)

For UI-heavy tasks with Figma designs, use the specialized frontend workflow:

1️⃣ /research     <JIRA_ID or task description>
   ↳ 📖 Review research doc – verify Figma links, requirements
   ↳ ✅ Iterate until context is complete and accurate

2️⃣ /plan         <JIRA_ID or task description>
   ↳ 📖 Review plan – check component breakdown, design references
   ↳ ✅ Confirm phases align with Figma structure

3️⃣ /review-ui    Prepare UI verification checklist (optional)
   ↳ 📖 Review checklist – verify it covers all design aspects
   ↳ ✅ Add missing items before implementation

4️⃣ /implement-ui <JIRA_ID or task description>
   ↳ 📖 Review code changes and UI Verification Summary
   ↳ ✅ Manually verify critical UI elements in browser

5️⃣ /review       <JIRA_ID or task description>
   ↳ 📖 Review findings – code quality, a11y, performance
   ↳ ✅ Address all blockers before merging

⚠️ Important: The automated Figma verification loop helps catch visual mismatches, but it does not replace manual review. Always visually inspect the implemented UI in the browser, test interactions, and verify responsive behavior yourself.

What makes /review-ui useful:

Uses Figma MCP to extract design specifications (layout, spacing, typography, colors, states)
Uses Playwright MCP to capture the current implementation (accessibility tree, screenshots)
Compares EXPECTED (Figma) vs ACTUAL (implementation) automatically
Produces a structured verification report with mismatches categorized by severity (Critical, Major, Minor)
Can be used before implementation to create verification criteria, or during/after to validate progress
Reports exactly what needs to be fixed with specific expected vs actual values

What makes /implement-ui special:

Runs an iterative verification loop after each UI component
Captures current state with Playwright (accessibility tree, screenshots)
Compares with Figma MCP specifications (spacing, typography, colors, tokens)
Automatically fixes mismatches and re-verifies until perfect
Produces a UI Verification Summary with iteration counts and design gaps

This ensures the implemented UI matches the Figma design before code review.

🧑‍🤝‍🧑 Agents

These are configured as Copilot agents / sub‑agents.

🧱 Architect

Focus: solution design and implementation proposals.
Helps break down complex tasks into components and interfaces.
Produces architecture sketches, trade‑off analyses, and integration strategies.

📝 Business Analyst

Focus: requirements, context and domain understanding.
Extracts and organizes information from Jira issues and other sources.
Identifies missing requirements, stakeholders, edge cases, and business rules.

💻 Software Engineer

Focus: implementing the agreed plan.
Writes and refactors code in small, reviewable steps.
Follows repository style, tests where available, and avoids over‑engineering.

🎨 Frontend Software Engineer

Focus: implementing UI components and frontend features.
Specialized in design systems, accessibility, and responsive behavior.
Uses iterative Figma verification loop to ensure pixel-perfect implementation.
Verifies implementation against Figma designs using Playwright and Figma MCP.

🔎 UI Reviewer

Focus: verifying UI implementation against Figma designs.
Prepares verification checklists before implementation.
Compares rendered UI with design specifications.
Reports mismatches categorized by severity (Critical, Major, Minor).

🔍 Code Reviewer

Focus: structured code review and risk detection.
Checks changes against acceptance criteria, security and reliability guidelines.
Suggests concrete improvements, alternative designs, and missing tests.

Each agent is designed to be used together with the workflow prompts below.

💬 Prompts & Chat Commands

All commands work with either a Jira ID or a plain‑text description.

`/research <JIRA_ID | description>`

Gathers all available information about the task.
Pulls context from Jira, design artifacts, and code (via MCPs where applicable).
Outputs: task summary, assumptions, open questions, and suggested next steps.

`/plan <JIRA_ID | description>`

Creates a multi‑step implementation plan.
Groups work into phases and tasks aligned with your repo structure.
Outputs: checklist‑style plan that can be executed by the Software Engineer agent.

`/implement <JIRA_ID | description>`

Implements the previously defined plan.
Proposes file changes, refactors, and new code in a focused way.
Outputs: concrete modifications and guidance on how to apply/test them.

`/implement-ui <JIRA_ID | description>`

Implements UI features with iterative Figma verification.
Extends /implement with a verification loop after each component.
Uses Playwright to capture current UI state and Figma MCP to compare with designs.
Automatically fixes mismatches and re-verifies until implementation matches design.
Outputs: code changes + UI Verification Summary with iteration counts.

`/review-ui`

Prepares a UI verification checklist based on Figma designs.
Analyzes design structure, tokens, responsive behavior, and component variants.
Best used before implementation to define verification criteria.
Outputs: structured checklist grouped by area (layout, typography, colors, states, a11y).

`/review <JIRA_ID | description>`

Reviews the final implementation against the plan and requirements.
Highlights security, reliability, performance, and maintainability concerns.
Outputs: structured review with clear “pass/blockers/suggestions”.

🧩 Installation in VS Code

1. Clone the repository

cd ~/Projects
git clone <this-repo-url> copilot-configuration

The important part is that VS Code can see the .github/prompts and .github/agents folders from this repository.

2. Configure global Copilot locations (User Settings)

You can configure this once at the user level and reuse it across all workspaces.

Open the Command Palette: CMD + Shift + P.
Select “Preferences: Open User Settings (JSON)”.
Add or merge the following configuration:

{
  "chat.promptFilesLocations": {
    "~/projects/copilot-collections/.github/prompts": true
  },
  "chat.agentFilesLocations": {
    "~/projects/copilot-collections/.github/agents": true
  },
  "chat.agentSkillsLocations": {
    "~/projects/copilot-collections/.github/skills": true
  },
  "chat.useAgentSkills": true,
  "github.copilot.chat.searchSubagent.enabled": true,
  "chat.experimental.useSkillAdherencePrompt": true,
  "chat.customAgentInSubagent.enabled": true,
  "github.copilot.chat.agentCustomizationSkill.enabled": true
}

Adjust the path (~/projects/copilot-collections/...) if your folder layout differs.
Once set, these locations are available in all VS Code workspaces.

3. Enable Copilot experimental features (UI)

If you prefer the UI instead of editing JSON directly:

Open Settings (CMD + ,).
Search for "promptFilesLocations" and add entry pointing to the ~/projects/copilot-collections/.github/prompts directory.
Search for "agentFilesLocations" and add entry pointing to the ~/projects/copilot-collections/.github/agents directory.
Search for "agentSkillsLocations" and add entry pointing to the ~/projects/copilot-collections/.github/skills directory.
Search for "chat.useAgentSkills" and enable it, this will allow Copilot to use Skills
Search for "chat.customAgentInSubagent.enabled" and enable it, this will allow Custom Agents to be used in Subagents
Search for "github.copilot.chat.searchSubagent.enabled" and enable it, this will allow Copilot ot use special search subagent for better codebase analysis
Search for "chat.experimental.useSkillAdherencePrompt" and enable it, this will force Copilot to use Skills more often
Search for "github.copilot.chat.agentCustomizationSkill.enabled" and enable it, this will enable a special Skill to help you build custom agents, skills, prompts

🔌 MCP Server Configuration

To unlock the full workflow (Jira, Figma, code search, browser automation), you need to configure the MCP servers. We provide a ready-to-use template in .vscode/mcp.json.

You have two options for installation:

Option 1: User Profile (Recommended)

This is the best option as it enables these tools globally across all your projects.

Open the Command Palette: CMD + Shift + P.
Type and select “MCP: Open User Configuration”.
This will open your global mcp.json file.
Copy the contents of .vscode/mcp.json from this repository and paste them into your user configuration file.

Option 2: Workspace Configuration

Use this if you want to enable these tools only for a specific project.

Copy the .vscode/mcp.json file from this repository.
Paste it into the .vscode folder of your target project (e.g., my-project/.vscode/mcp.json).

Official Documentation

To learn more about configuring these servers, check their official documentation:

Configuring Context7 API Key

To get higher rate limits and access to private repositories, you can provide a Context7 API key. You can get your key at context7.com/dashboard.

We use VS Code's inputs feature to securely prompt for the API key. When you first use the Context7 MCP, VS Code will ask for the key and store it securely.

To enable this, modify your mcp.json configuration (User or Workspace) to use the --api-key CLI argument with an input variable:

{
  "servers": {
    "Context7": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp@latest",
        "--api-key",
        "${input:context7-api-key}"
      ]
    }
  },
  "inputs": [
    {
      "id": "context7-api-key",
      "description": "Context7 API Key (optional, for higher rate limits)",
      "type": "promptString",
      "password": true
    }
  ]
}

What each MCP is used for

🧩 Atlassian MCP – access Jira issues for /research, /plan, /implement, /review.
🎨 Figma MCP Server – pull design details, components, and variables for design‑driven work.
📚 Context7 MCP – semantic search in external docs and knowledge bases.
🧪 Playwright MCP – run browser interactions and end‑to‑end style checks from Copilot.
🧠 Sequential Thinking MCP – advanced reasoning tool for complex problem analysis.

Some MCPs require API keys or local apps running. Configure auth as described in each MCP’s own documentation.

🧠 Sequential Thinking MCP

We use the Sequential Thinking MCP to handle complex logic, reduce hallucinations, and ensure thorough problem analysis. It allows agents to:

Revise previous thoughts when new information is found.
Branch into alternative lines of thinking.
Track progress through a complex task.

🛠 Using This Repository in Your Projects

Once the repo is cloned and .vscode/settings.json is configured:

Open your project in VS Code.
Open GitHub Copilot Chat.
Switch to one of the configured agents (Architect, Business Analyst, Software Engineer, Code Reviewer).
Use the workflow prompts:
- /research <JIRA_ID>
- /plan <JIRA_ID>
- /implement <JIRA_ID>
- /review <JIRA_ID>
For frontend tasks with Figma designs:
- /research <JIRA_ID> – gather requirements including design context
- /plan <JIRA_ID> – create implementation plan
- /review-ui – prepare UI verification checklist (optional)
- /implement-ui <JIRA_ID> – implement with iterative Figma verification
- /review <JIRA_ID> – final code review

All of these will leverage the shared configuration from copilot-configuration while still respecting your project’s own code and context.

📌 Summary

Central place for shared Copilot agents, prompts, and workflows.
Optimized for teams working with Jira, Figma, MCPs, and VS Code.
Designed to be plug‑and‑play – clone next to your projects, configure it once in VS Code User Settings, and start using /research → /plan → /implement → /review immediately in any workspace.

📄 License

This project is licensed under the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 92 Commits
.github		.github
.husky		.husky
.vscode		.vscode
.editorconfig		.editorconfig
.gitignore		.gitignore
.lintstagedrc.json		.lintstagedrc.json
.mise.toml		.mise.toml
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

License

TheSoftwareHouse/copilot-collections

Folders and files

Latest commit

History

Repository files navigation