TaskFlow — Copilot Customisation Demo

A React task management app used to demonstrate GitHub Copilot's four customisation primitives.

Quick Start

npm install
npm run dev      # Dev server on :5173
npm test         # Unit tests (Vitest)
npm run test:e2e # E2E tests (Playwright)

---

Demo Script — What to Show & Why

1. Custom Instructions (always-on guidance)

Where: .github/copilot-instructions.md

• Open the file — it's short and focused (project context, stack, structure, commands)
• Point out the progressive disclosure pattern: instead of cramming everything in, it links to docs/ files that Copilot reads only when needed
• Open docs/component-patterns.md as an example of a linked deep-dive doc

Key point: Instructions are injected into every chat automatically. Keep them concise and universally applicable — like onboarding a new team member.

Targeted instructions: .github/instructions/

• react-components.instructions.md — has applyTo: "src/components/**/*.tsx", only activates when editing components
• testing.instructions.md — activates only for test files
• e2e.instructions.md — activates only for Playwright specs

Key point: Targeted instructions scope rules to where they matter without bloating the global file.

---

2. Prompt Files (reusable slash commands)

Where: .github/prompts/

Command	What it does
/new-component	Scaffolds component + styles + test (asks for name)
/unit-test	Generates unit tests for any component
/e2e-test	Generates a Playwright spec for a user flow
/story-map	Generates a prioritised user story map

Demo flow:

1. Open chat, type /new-component, enter a name like SearchBar
2. Show how it creates three files following project conventions
3. Type /story-map, enter "task filtering" — show the structured output

Key point: Prompt files are named, on-demand tasks with variable inputs. Use for recurring work that always follows the same structure.

---

3. Custom Agents (specialist personas with tool boundaries)

Where: .github/agents/

Agent	Role	Tools
@reviewer	Code review — reads code, never edits	codebase, fetch
@planner	Implementation planning — designs approach, never codes	codebase, fetch
@tester	Testing specialist — writes and runs tests only	codebase, terminal

Demo flow:

1. Switch to @planner, ask "Plan adding a search/filter feature to the dashboard"
2. Show the structured plan output (summary, files, steps, testing plan)
3. Switch to @reviewer, ask "Review the Button component"
4. Show how it flags issues without touching code

Key point: Agents enforce role boundaries. A reviewer that can't edit. A planner that can't code. Maps well to approval gates and separation of concerns.

---

4. Skills (reusable multi-step workflows with bundled resources)

Where: .github/skills/

Skill	What it packages
story-map	SKILL.md + template.md — generates story maps from a standard template
component-suite	SKILL.md + component template + test template — full component scaffolding

Demo flow:

1. Open .github/skills/component-suite/ — show the folder structure
2. Point out how SKILL.md references templates and docs
3. Explain progressive loading: Copilot reads description first, loads full instructions only when relevant

Key point: Skills bundle instructions, templates, and scripts into a portable package. Same skill works in VS Code, CLI, and the coding agent.

---

When to Use What

Need	Use
"Always follow this rule"	Custom Instructions
"Do this specific task on demand"	Prompt File
"Act as this specialist role"	Custom Agent
"Run this reusable workflow with templates"	Skill

---

Repo Structure

.github/
  copilot-instructions.md             ← Global instructions (always-on)
  instructions/
    react-components.instructions.md  ← Component file rules (applyTo glob)
    testing.instructions.md           ← Test file rules
    e2e.instructions.md               ← E2E file rules
  prompts/
    new-component.prompt.md           ← /new-component slash command
    unit-test.prompt.md               ← /unit-test slash command
    e2e-test.prompt.md                ← /e2e-test slash command
    story-map.prompt.md               ← /story-map slash command
  agents/
    reviewer.agent.md                 ← Read-only code reviewer
    planner.agent.md                  ← Implementation planner
    tester.agent.md                   ← Testing specialist
  skills/
    story-map/                        ← Story map generator + template
    component-suite/                  ← Component scaffolder + templates
docs/                                ← Progressive disclosure docs
src/                                 ← React app source
e2e/                                 ← Playwright specs