Storyboard · Nebius Academy test assignment

Git Commit Message Generator

feat(learning): teach juniors to write, check and fix commit messages

AudienceJunior developers, 0–2 years

Duration~4 minutes, 6 screens

FormatShort interactive lesson with narration

PrerequisiteAlready uses Git and makes commits

Learning objective

After this lesson, a junior developer can generate a commit message with Git Commit Message Generator, check it against the Conventional Commits format, and correct it when the tool gets it wrong.

Design approach

Merrill's First Principles, applied at micro scale.

Following Merrill's First Principles, the lesson opens with a failure the learner has caused themselves rather than with a definition, so the standard arrives as a solution to a problem they have just felt. Practice occupies 2 minutes 20 seconds of the 4 minutes, and the longest screen is the hardest one, not the demo. Support is withdrawn progressively, with a fresh example on every screen so no answer appears before it is asked for: recognise a good message, then choose between generated options, then correct a flawed one unaided. Narration explains while the screen carries only keywords and code, avoiding the redundancy of reading on-screen text aloud. Product promotion is deliberately limited to two touches — the demo and the closing install prompt — because a lesson that sells throughout loses the credibility that makes the recommendation worth anything.

Timeline · 240 seconds

Learner acts · 140 sLearner watches or reads · 100 s

SCREEN 1

Find what broke it

40 sTask · Activation

Before

a3f9c21more fixes

7b2e440wip

c81d0f5fix

2d47a19update

9e0b3c7stuff

f52a8ddasdf

Which commit broke the payment button?

Reveal

Same six commits, same order.

a3f9c21test(cart): add coverage for empty basket

7b2e440docs(readme): update local setup steps

c81d0f5refactor(api): extract request validation

2d47a19feat(checkout): switch payment button to new endpoint

9e0b3c7style(nav): align header icons

f52a8ddchore(deps): bump lodash to 4.17.21

Now find it.

Narration: "Tuesday's release broke the payment button. Six commits went out. Pick the one that caused it."
Learner action: Clicks any commit.
Feedback: "You couldn't have known. Neither could the developer who wrote these — and that developer was probably you, three weeks ago."
Narration: "Same six commits. Now find it."
Learner action: Clicks 2d47a19.
Correct: "Two seconds. The difference isn't the code. It's the message."
Incorrect: "Close — look for the one that touches the payment button itself."

SCREEN 2

How a good message is built

40 sDemonstration of the rule

fix(search): ignore extra spaces in queries

TypeWhat kind of change: feat, fix, docs, refactor, test, chore, style.

ScopeWhich part of the product it touches.

DescriptionWhat's different afterwards, in plain words.

Say what changed and why it matters, not which line you edited
One commit, one purpose
Write it as a command: "add", not "added"

On screen: This format is called Conventional Commits.
Why line: Why this matters: find the change that broke something · build release notes without digging through code · help a new teammate read the project's history
Narration: "Type, scope, description. The type tells you what kind of change. The scope tells you where. The description tells you what's different afterwards — not which line you touched."
Learner action: Clicks each segment to reveal its explanation. All three required to continue.

SCREEN 3

The tool, and where it stops

40 sProduct demonstration

VS Code mockup: two staged files, checkout.js and errors.js, highlighted. — **Beat 1 · Stage your changes**~6 s

The cursor clicks the Generate icon inside the empty message field. — **Beat 2 · Generate**~6 s

The tool proposes fix(payment): show an error when a card is declined. — **Beat 3 · Read what it proposes**~6 s

The developer replaces payment with checkout and clicks Commit. — **Beat 4 · Adjust, then commit**~6 s

Limit card: three unrelated files produce a bundled commit message the tool cannot split. — **Limit card · What it can't do**~12 s

Visual: Simplified VS Code mockup, dark theme. Message field with a Generate icon inside; blue Commit button below. Staged changes: checkout.js, errors.js. The message types out character by character in Beat 3, so it reads as generated.
Narration: "Stage, generate, read, adjust. Note the third step — the developer reads the suggestion before accepting it. Here the tool picked the wrong scope: the error appears on the checkout page. The tool proposes; you decide."
Limit card: Slides in over the code area. Three unrelated files, one generated message marked Bundled commit. The tool describes your changes. It can't separate them. One commit, one purpose — that part is still yours.
Narration: "One thing it won't do for you. If you've bundled three unrelated changes into one commit, it will faithfully describe all three. Splitting the work is still your job."

SCREEN 4

Choose the best message

40 sGuided practice

cart.js

- const maxItems = 10;

+ const maxItems = 20;

The tool offered three messages for this change. Which one would you commit?

fix(cart): update maxItems

Feedback"Two problems. This isn't a fix — nothing was broken, a limit was raised, so it's a feat. And 'update maxItems' names the variable, not what changed."

feat(cart): allow up to 20 items per order

Correct"Right type, clear scope, and the description says what customers can now do."

feat: change the maxItems constant in cart.js from 10 to 20 as agreed with product

Feedback"Right type, but it describes the line you edited rather than what changed, it's missing the scope, and it carries context that belongs in the pull request, not the commit title."

Narration: "All three describe the same edit. Only one still makes sense next year."

SCREEN 5

Fix the message

60 sIndependent practice

auth/login.js

+ <input type="checkbox" id="remember-me" />

+ if (rememberMe) setSessionDuration(30 * DAY);

The tool got one part wrong. Click it.

fix(auth): let users stay signed in for 30 days

Clicks scope: "The scope is right — this change lives in authentication. Look again."
Clicks description: "The description is good — it says what users can now do. Look again."
Clicks type: "Found it. Nothing was broken — this adds a capability that didn't exist. Now correct it."
Second step: Learner picks the corrected type: feat · refactor · chore

✓

feat

Correct"New capability, so feat. Final message: feat(auth): let users stay signed in for 30 days."

refactor

Feedback"A refactor changes how code is organised without changing behaviour. Behaviour changed here — users can now stay signed in."

chore

Feedback"chore covers maintenance that users never notice. This one they'll notice."

Narration: "Nothing was broken — a capability was added. Check the type before you accept."

SCREEN 6

Try it on your own code

20 sTransfer to the job

Reference card · designed to be screenshotted

type(scope): what changed

featnew capability fixsomething broken refactorsame behaviour, different code docsdocumentation testtests styleformatting only choremaintenance

Say what changed and why it matters, not which line you edited
One commit, one purpose
Write it as a command: "add", not "added"

Before you commit: check the type the tool chose.

Add to VS CodeAdd to IntelliJor try it in the browser

Narration: "Install it, and use it on your next commit. Read what it proposes before you accept — that habit is the whole point."

Accessibility

Colour is never the only carrier of meaning: the segments in screens 2 and 5 are distinguished by label as well as colour, and the warning on the limit card pairs its icon with text. All interactive elements are reachable and operable by keyboard, with a focus order that follows reading order. Narration is captioned, and the lesson is fully usable with sound off, since every narrated point also appears on screen as a keyword or code sample. Code samples are real text rather than images, so they are available to screen readers and can be enlarged without loss.

Production

Estimated build: 6–8 hours in Rise or Storyline, with an animated mockup for screen 3. The VS Code sequence is the only asset needing custom animation; everything else is built from text, code blocks and states. Screen 3 frames made in Figma; mockup palette follows VS Code Dark+.

#1E1E1E #252526 #CCCCCC #0E639C #81B88B #D7BA7D

Storyboard by Mariia Mukhina · Product and scenario per the assignment brief · Drafted with AI assistance; learning design decisions, review and Figma frames by the author.