Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In

Ostra's product hero: “Pre-flight checklist” to “Ship v2.4”

This 13-second clip is a product hero for Ostra with 4 rows under “Pre-flight checklist”, 4 choices under “Rollout” and a “Ship v2.4” button. The Cursor Tour Hero skill rendered it from examples/ostra/hero.json in its package. Every field of that file is listed below.

The brand and web addresses in this example are made up. The .example ending is a reserved name that never leads to a real site.

What is on the page

Ostra is a release desk for product teams, and its page opens on the badge “2.4 · Release desk for product teams” above the headline “Software that answers back.” The lede says every check, toggle and ship in Ostra confirms itself in under a quarter second. The buttons are “Start a release” and “Watch the tour”, and they are followed by the note “Free for teams of up to five. No card needed.” The bar holds four links (Release desk, Changelog, Rollouts and Pricing) and the button “Request access”.

The product window carries the words “Releases” and “Kestrel” in its title, with the small tag “v2.4”. Its list, “Pre-flight checklist”, has four rows, each with owner initials and a state: “Migrations reviewed” (MK, review), “Changelog copy approved” (AL RO, draft), “Feature flags staged” (JS, pending) and “Support macros updated” (TN MK, pending). Two switches follow: “Notify #launch”, set off, and “Auto-rollback”, set on.

Under the label “Rollout” are four choices: “5%” (64 workspaces · eu + us), “25%” (321 workspaces · eu + us), “50%” (642 workspaces · eu + us) and “100%” (1,284 workspaces · eu + us). The main button reads “Ship v2.4”, then “Shipping” while it works and “Shipped” when it is done, and a finished row reads “ready”. The toast says “v2.4 is live for 1,284 workspaces”, with the line “Swipe to dismiss · undo for 8s” and an “Undo” button, and a card titled “Event stream” is switched on.

Compared with Tallyhall

Tallyhall, the other hero from this skill, tells a different story. Ostra’s page is light, with a ground of #ffffff, ink #0a1024 and an accent of #1e4bff, and its copy is aligned left; Tallyhall’s is dark, with a ground of #0e1311 and an accent of #5ee08f, and its copy is aligned right. Ostra’s list is a pre-flight checklist for a release and its rollout has four choices; Tallyhall’s is a list of month-end tasks and its control, “Entities”, has three. Ostra’s main button reads “Ship v2.4” and Tallyhall’s reads “Close March”. Ostra sets its type in Inter, Tallyhall in Bricolage Grotesque and IBM Plex Sans. The finished state is held for 2 in one file and 2.2 in the other, and the dot grid is set to 0.6 against 0.5.

What the settings fix

The window is made from the settings in hero.json. The skill’s SKILL.md says the cursor ticks the rows from top to bottom, turns on the switches that start off, picks the last choice and presses the main button, and that the window is plain HTML and CSS, so changing the rows, labels, button words or toast text in the file changes what the window shows. In this file the last choice is “100%” and the toast names 1,284 workspaces, the same count as that choice.

Frames from the clip

  • Frame 1 of 3 from the Ostra Cursor Tour Hero example
  • Frame 2 of 3 from the Ostra Cursor Tour Hero example
  • Frame 3 of 3 from the Ostra Cursor Tour Hero example

Settings

Every field of examples/ostra/hero.json, as stored in the package.

Settings
SettingValue
brand.nameOstra
brand.logologo.svg
brand.href/
action.labelRequest access
action.href/access
hero.badge2.4 · Release desk for product teams
hero.titleSoftware that *answers* back.
hero.ledeEvery check, toggle and ship in Ostra confirms itself in under a quarter second. Your team always knows what just happened, and what happens next.
hero.actions[0].labelStart a release
hero.actions[0].href/start
hero.actions[1].labelWatch the tour
hero.actions[1].href/tour
hero.noteFree for teams of up to five. No card needed.
hero.alignleft
theme.modelight
theme.background#ffffff
theme.ink#0a1024
theme.accent#1e4bff
theme.fonts.displayInter
theme.fonts.bodyInter
theme.fonts.weight600
effect.crumbReleases
effect.projectKestrel
effect.versionv2.4
effect.listTitlePre-flight checklist
effect.listMetaowner · status
effect.rows[0].labelMigrations reviewed
effect.rows[0].whoMK
effect.rows[0].statusreview
effect.rows[1].labelChangelog copy approved
effect.rows[1].whoAL RO
effect.rows[1].statusdraft
effect.rows[2].labelFeature flags staged
effect.rows[2].whoJS
effect.rows[2].statuspending
effect.rows[3].labelSupport macros updated
effect.rows[3].whoTN MK
effect.rows[3].statuspending
effect.doneStatusready
effect.counterLabelready
effect.toggles[0].labelNotify #launch
effect.toggles[0].onfalse
effect.toggles[1].labelAuto-rollback
effect.toggles[1].ontrue
effect.segmentLabelRollout
effect.segments[0].label5%
effect.segments[0].meta64 workspaces · eu + us
effect.segments[1].label25%
effect.segments[1].meta321 workspaces · eu + us
effect.segments[2].label50%
effect.segments[2].meta642 workspaces · eu + us
effect.segments[3].label100%
effect.segments[3].meta1,284 workspaces · eu + us
effect.buttonShip v2.4
effect.busyLabelShipping
effect.doneLabelShipped
effect.toastTitlev2.4 is live for 1,284 workspaces
effect.toastDetailSwipe to dismiss · undo for 8s
effect.toastActionUndo
effect.streamtrue
effect.streamTitleEvent stream
effect.size1
effect.hold2
effect.grid0.6
motion.speed1
motion.pointertrue
meta.titleOstra: the release desk that answers back
meta.descriptionChecklists, switches and rollouts that confirm themselves in under a quarter second. Ostra 2.4 is the release desk for product teams.
meta.urlhttps://ostra.example/
meta.langen
nav[0]
SettingValue
labelRelease desk
href/desk
nav[1]
SettingValue
labelChangelog
href/changelog
nav[2]
SettingValue
labelRollouts
href/rollouts
nav[3]
SettingValue
labelPricing
href/pricing