How I Build Presentations in the Browser with GitHub Copilot | Present

Section 01 / 05The Request

I start with the article and one request: read this, find the idea readers need to remember, and create a visual that makes it easier to understand.

The only manual starting point

I start with the article and one request.

The article gives Copilot the story. My request gives it the idea readers should remember.

ARTICLE DRAFTWhy this story mattersThe idea readers should remember

THOR TO COPILOT

Read this article. Find the idea readers need to remember. Create a visual that makes it clear.

OUTPUTVisual briefteaching point + concept + proof

Configured once in Markdown

The repository already knows how to work.

Copilot reads the workspace rules and uses the saved prompt, standards, and specialist roles needed for my request.

ALWAYS APPLIEScopilot-instructions.mdwhere to look, safety, approval

PROMPTSReusable playbooksvisual-storytelling.prompt.mdarticle-pass.prompt.md

INSTRUCTIONSStanding standardsvisual-system.instructions.mdeditorial-system.instructions.md

AGENTSDefined specialistsPresentation ReviewerNarrative Strategist

INSIGHTSLessons from earlier workwhat workedwhat to inspect next

VISUAL SYSTEM OUTPUTstagepapersignalmomentdepthpalette + composition + motion + interaction + access

Selected for this request Copilot uses only the files and roles needed for this job.

The roles for this request

Each role has one clear job.

One role builds the visual. Another reviews it. I make the final call.

INPUTThorarticle + request

CHOOSES ROLESCopilotuses the saved rules

DESIGN RULESVisual Systemlook, layout, motion, access

BUILDSVisual Storytellingbrief, build, test, repair

REVIEWSPresentation Reviewerchecks the work and returns a verdict

DECIDESThorkeep, change, or publish

Eight sizes, different risks

The browser checks every screen size.

Desktop, laptop, snapped windows, and both phone orientations can each expose a different layout problem.

VISUAL BRIEFone teaching pointfirst view → change → final viewphone + reduced motion

BUILDSVisual Storytellingone shared Astro visual

ARTICLEPRESENT

EIGHT BROWSER CHECKS

Desktop1920 · 1440

Laptops1366 · 1214

Snapped960 · 720

Phones844L · 390P

8 frames ✓ fit ✓ controls ✓ motion

My approval stays in the process

Problems go back. Finished work comes to me.

With approved tools, Copilot can read, design, build, check, and repair. I still decide what is ready to publish.

FIXESVisual Storytellingaffected + nearby screens

REVIEWER CHECKSPresentation Reviewerbrief + source8 screenshots + measurementsinteractions + checks

REVISEphone landscape · browser checks · clipped labelThe problem goes back to the builderupdated screenshots return to review

ACCEPTall eight sizes passThe finished visual returns to Thorvisual + verdict + screenshots

MY APPROVALI make the call.

COMMITPUSHPUBLISH

These actions require my approval.