Behind the Scenes

Built Entirely with Copilot CLI

This entire site — every line of HTML, CSS, every researched link, the GitHub repo, GitHub Pages — was created in a single Copilot CLI session without ever opening an editor or browser.

1
CLI Session
3
HTML Pages
2,600+
Lines of Code
100+
Curated Links
10+
Docs Researched
4
Git Commits
⚡ TL;DR

One natural language conversation in the terminal produced a fully deployed, 3-page reference site with deep research, premium styling, 100+ curated documentation links, GitHub Pages hosting, and this very page you're reading. The human typed prompts; Copilot CLI did everything else.

📖 The Story, Step by Step

1

The Ask

Turn 0 · Plan Mode

The session started with a single natural language request in plan mode (Shift+Tab):

Human I'm prepping for a demo I will be giving for GitHub Copilot CLI. I want a one pane of glass HTML file in Primer styling... one page showing all areas where GitHub Copilot comes up like Copilot CLI, coding agent, VS Code, other IDEs (make it dense). Then scroll down for configuration elements... Then a quick starter guide... Let's do a lot of research, plan it well.

No mockups. No wireframes. No spec doc. Just a plain English description of the vision.

2

Deep Research Phase

Automatic · Parallel tool calls

Before writing a single line of code, Copilot CLI dove into research — fetching and analyzing 10+ official documentation pages in parallel:

web_fetch × 10 exa_web_search × 2 fetch_copilot_docs
📚 Documentation Sources Analyzed
  • About Copilot CLI — modes, use cases, security
  • Using Copilot CLI — all features walkthrough
  • CLI Command Reference — every command and flag
  • About Agent Skills — open standard spec
  • Creating Skills — SKILL.md format
  • About Hooks — all hook types and JSON schemas
  • Hooks Configuration Reference — complete examples
  • Custom Instructions — all file types and locations
  • Comparing CLI Features — decision table
  • Plugin Reference — plugin.json and marketplace.json
  • Creating Plugins — directory structure
  • Plugin Marketplace — how to create and distribute
  • Autopilot Mode — autonomous operation
  • Best Practices — expert tips and workflows
  • Customization Cheat Sheet — IDE support matrix

This research happened via parallel tool calls — the CLI fetched multiple docs simultaneously, then synthesized all findings into the plan.

3

Structured Plan Created

plan.md + SQL todos

Copilot created a detailed plan.md with three sections mapped out, plus SQL-tracked todos:

Section 1
12 Ecosystem Cards
Section 2
14 Config Features
Section 3
Commands + Flow
Design System
Primer Dark Theme
Copilot Created plan with 3 todos tracked in SQL: create-repo → build-html → push-to-github, with dependencies enforced.
4

One-Shot HTML Generation

1,340 lines · Single create call

The entire index.html — 1,340 lines of hand-crafted HTML and CSS — was generated in a single tool call. No templates, no frameworks, no copy-paste. Pure generation from the researched context.

create index.html (61KB) create README.md git init git commit
🎨 What Was Generated
  • Complete CSS design system (20+ CSS custom properties, dark theme)
  • 12 ecosystem cards with unique icons, colors, and feature tags
  • 14 configuration cards with file paths, descriptions, and scope indicators
  • "When to use what?" decision table
  • 4 installation methods with copy-ready commands
  • 3 mode cards (Interactive, Plan, Autopilot)
  • 7-step flow diagram
  • 12 keyboard shortcuts, 19 slash commands, 14 CLI flags
  • Programmatic usage examples with syntax highlighting
  • Full repository config file structure (tree view)
  • Sticky nav, smooth scroll, responsive layout, IntersectionObserver
5

GitHub Repo + Pages

2 commands

Copilot created the GitHub repo, pushed to it, enabled GitHub Pages, and created the deploy workflow — all from the CLI:

gh repo create htekdev/copilot-cli-reference git push gh api (enable Pages) create pages.yml workflow
Copilot ✓ Created repository htekdev/copilot-cli-reference on github.com
✓ Pushed commits to https://github.com/htekdev/copilot-cli-reference.git
✓ Site live at https://htekdev.github.io/copilot-cli-reference/
6

Screenshot → Fix

1 screenshot · 1-line fix

The human sent a screenshot showing the repo structure tree rendering as a single horizontal line. Copilot analyzed the image, identified the missing white-space: pre CSS rule, and fixed it:

Human 📷 [screenshot] I don't like how this is formatted
Copilot Added `white-space: pre` to `.code-block` CSS to fix the Repository Configuration Structure tree rendering as a single horizontal line.

One screenshot. One CSS property. Fixed, committed, pushed, deployed.

7

100+ Link References Page

1,229 lines · 72KB

Next ask: "Create sub-pages for references... extremely verbose... links only from github.com or microsoft.com." Copilot researched additional docs, then generated a comprehensive reference page:

Categories
11
Links
100+
Sources
github.com only
File Size
72 KB

Each link card includes: title, detailed description, URL, and tags (Essential, New, Reference, Tutorial). Also sprinkled doc links throughout the home page.

8

This Page (Meta!)

You are here

The final ask: "Get a full summary of this session and make a page for how this was made." Copilot queried its own session history from the session store database, reconstructed the timeline, and generated this very page.

SQL: session_store queries git log create how-it-was-made.html

💡 Key Copilot CLI Features Demonstrated

🔬
Deep Research Before Code

Copilot fetched and analyzed 15+ official documentation pages before writing any code. It used parallel tool calls to fetch multiple docs simultaneously, then synthesized all findings into a structured plan. This ensured accuracy and completeness — the generated content reflects the actual state of the product.

📋
Plan Mode for Complex Tasks

The session started in plan mode (Shift+Tab). Copilot created a structured plan with SQL-tracked todos and dependencies. The plan was reviewed before implementation began. This "plan before you code" pattern is a Copilot CLI best practice for complex, multi-step tasks.

🖼️
Visual Feedback via Screenshots

When the human spotted a formatting issue, they simply sent a screenshot. Copilot analyzed the image, identified the CSS bug (white-space: pre missing), and fixed it in one edit. No need to describe the bug in words — the image was the prompt.

🚀
End-to-End Delivery from Terminal

From repo creation to GitHub Pages deployment — everything happened in the terminal. git init, gh repo create, git push, GitHub Pages API, GitHub Actions workflow — all orchestrated by Copilot CLI without the human needing to open a browser or switch windows.

🧠
Session Continuity

This entire site was built across multiple turns in a single CLI session. Each follow-up request ("make it a GitHub Page", "create sub pages", "make a how-it-was-made page") built on the prior context. Copilot's infinite sessions with automatic context management made this seamless.

📊 Final Tally

3
HTML Pages Created
~145 KB
Total Code Generated
100+
Curated Doc Links
15+
Docs Researched
1
Bug Fixed (Screenshot)
1
GitHub Repo Created
1
GitHub Pages Deployed
0
Editors Opened
🎯
The Point

GitHub Copilot CLI isn't just for code edits and bug fixes. It's a full-stack development partner that can research, plan, design, build, deploy, and iterate — all from your terminal, in a single conversation.