How ncool89/skills-create-applications-with-the-copilot-cli works
1. Repository purpose
- This is a GitHub Skills training repository, not a production application.
- The architecture is split between a tiny JavaScript codebase and a set of GitHub-hosted exercise orchestration assets.
2. Core application logic
- src/calculator.js is the main domain module.
- It contains the calculator behavior the exercise is built around, so this is the only real runtime/business logic boundary in the repo.
3. Test layer
- src/tests/calculator.test.js is the verification boundary for the code.
- The test suite exercises the calculator module and is the primary quality gate for changes.
4. Node.js project boundary
- package.json defines the JavaScript runtime contract: dependencies, scripts, and test execution entry points.
- The repository is therefore centered on a Node.js toolchain rather than a server, UI, or service architecture.
5. Exercise orchestration in GitHub Actions
- .github/workflows/0-start-exercise.yml and 1-step.yml through 4-step.yml encode the staged learning flow.
- These workflows likely enforce progression, validate each step, and guide the learner through the exercise lifecycle.
6. Instruction/content subsystem
- .github/steps/ contains the step-by-step exercise content.
- .github/instructions/ contains agent or copilot CLI guidance used to steer the learner through the task.
- This is a documentation/control plane separate from the code under src/.
7. Issue-driven interaction
- .github/ISSUE_TEMPLATE/feature_request.md suggests the exercise is anchored around GitHub Issues for feedback or task initiation.
- The repo uses GitHub’s collaboration features as part of the learning workflow, not as an application dependency.
8. Developer environment
- .devcontainer/ provides a reproducible development environment for Codespaces or local container-based editing.
- postCreate.sh and postStart.sh are lifecycle hooks that prepare and start the workspace environment.
9. Assets and presentation
- images/ and the README’s embedded badges/images are presentation-only assets.
- README.md is a completion/celebration page, indicating the exercise has been finished.
10. Data flow
- The practical flow is: edit calculator code in src/, run tests, and have GitHub Actions validate step completion.
- There is no evidence of persistent storage, external APIs, messaging, or network-backed runtime services.
11. Architectural boundaries
- Code execution stays local to the Node.js project.
- Progress tracking and instruction delivery happen in GitHub infrastructure via workflows, steps, and issues.
- Environment setup is isolated in the devcontainer layer.
12. Overall structure
- Think of this repo as three layers: src/ for the small application, .github/ for exercise automation and guidance, and .devcontainer/ for environment reproducibility.
- That separation is the key architectural feature to capture in a diagram.
Main entry points: calculator.test.js Calculator test · 1-step.md Step guides · package.json package.json · 4-step.yml Step 4
Components 17
Node.js app
Core runtime and verification boundary
- package.json · Defines scripts, dependencies, and the Node.js runtime contract
package.json - Calculator · Main application logic for the exercise
src/calculator.js - Calculator test · Primary verification boundary for calculator behavior
src/tests/calculator.test.js
GitHub exercise plane
Workflows, instructions, and step content that drive the training flow
- Start flow · Initial exercise orchestration in GitHub Actions
.github/workflows/0-start-exercise.yml - Step 1 · First staged exercise validation workflow
.github/workflows/1-step.yml - Step 2 · Second staged exercise validation workflow
.github/workflows/2-step.yml - Step 3 · Third staged exercise validation workflow
.github/workflows/3-step.yml - Step 4 · Final staged exercise validation workflow
.github/workflows/4-step.yml - Step guides · Markdown step content that guides the learner through the exercise
.github/steps/1-step.md - Review guide · Final review or wrap-up guidance for the exercise
.github/steps/x-review.md - Copilot guide · Instructions for the Copilot CLI or agent workflow
.github/instructions/copilot-cli-ref.instructions.md - Issue template · GitHub issue entry point for feedback or task initiation
.github/ISSUE_TEMPLATE/feature_request.md
Dev environment
Containerized workspace setup and lifecycle hooks
- Devcontainer · Reproducible workspace definition for Codespaces or local containers
.devcontainer/devcontainer.json - Post-create · Workspace setup hook run after container creation
.devcontainer/postCreate.sh - Post-start · Workspace startup hook run when the container begins
.devcontainer/postStart.sh
Connections 20
- package.json → Calculator: runs · Node scripts and runtime config execute the application module
- package.json → Calculator test: tests · Package scripts invoke the verification suite
- Calculator test → Calculator: verifies · Tests exercise the calculator behavior
- Start flow → Step guides: boots · The first workflow begins the guided exercise flow
- Start flow → Issue template: tracks · Exercise entry and feedback can originate through GitHub issues
- Step 1 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 2 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 3 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 4 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 1 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 2 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 3 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 4 → Review guide: closes · Final workflow leads into review or completion guidance
- Copilot guide → Step guides: aligns · Agent instructions support the guided exercise material
- Devcontainer → Post-create: hooks · Container definition wires workspace initialization
- Devcontainer → Post-start: hooks · Container definition wires workspace startup behavior
- Post-create → package.json: prepares · Setup hook readies the Node project environment
- Post-start → package.json: activates · Startup hook helps make the project ready to use
- README → Images: embeds · Completion page uses repository presentation assets
- README → Step 4: references · Repository completion content reflects the staged exercise outcome