[DRAFT] feat: add browserbase brand skill by Kylejeong2 · Pull Request #85 · browserbase/skills

Kylejeong2 · 2026-04-28T19:08:09Z

Summary

Browserbase Brand Skill to help us generate code, videos, slides, images, etc with our refreshed brand.

DRAFT

Note

Low Risk
Low risk since it primarily adds documentation and static brand assets (tokens and SVG logos) plus .gitignore rules, with no runtime logic changes. Main concern is repo size/asset management due to new binary-oriented directories and large markdown.

Overview
Adds a new browserbase-brand skill that codifies Browserbase’s brand guidelines (voice/tone, color and typography rules, logo usage, and do/don’t checks) for generating on-brand copy and visuals.

Includes reusable brand token files in both references/brand-tokens.css and references/brand-tokens.json, plus checked-in SVG logo assets and an assets/README.md describing how to use them.

Updates .gitignore to exclude the skill’s font binaries (assets/Fonts/) and a temporary references/positioning.md file from version control.

^{Reviewed by Cursor Bugbot for commit e037904. Bugbot is set up for automated code reviews on this repo. Configure here.}

cursor · 2026-04-28T19:11:37Z

+      "grey":  { "value": "#C5D3E8", "token": "--bb-grey",  "pantone": "657 C", "cmyk": "C21 M11 Y2 K0", "usage": "Core grey. Interface/layout backgrounds, charts, diagrams." }
+    },
+    "secondary": {
+      "staghandGreen":  { "value": "#00C851", "token": "--bb-stagehand-green", "pantone": "2420 C", "cmyk": "C73 M0 Y92 K0",   "usage": "Stagehand product signature. Small accents only." },


Typo in JSON key: staghandGreen missing letter

Medium Severity

The JSON key staghandGreen is missing the letter "e" — it needs to be stagehandGreen. Any code or tooling consuming this token file by key name (e.g., to look up the Stagehand product color) will fail to find it. The token field inside the value correctly says --bb-stagehand-green, making the mismatch easy to miss.

^{Reviewed by Cursor Bugbot for commit e037904. Configure here.}

cursor · 2026-04-28T19:11:37Z

+
+## Identity & positioning
+
+Full positioning detail — brand idea, mission, product archetypes, positioning statements, messaging ladder, taglines, and value props — lives in `references/positioning.md`. Read it when writing copy or building brand narratives.


Referenced positioning.md is gitignored and missing

High Severity

SKILL.md instructs the AI to "Read" references/positioning.md for brand copy and messaging, but that file is added to .gitignore and doesn't exist in the repository. Anyone cloning the repo and using this skill will hit a missing-file error whenever the agent tries to follow the skill's own instructions. The file needs to either be committed or the references to it removed.

Additional Locations (2)

.gitignore#L56-L58

skills/browserbase-brand/SKILL.md#L236-L237

^{Reviewed by Cursor Bugbot for commit e037904. Configure here.}

fosmond · 2026-04-28T22:11:54Z

+      "blue":           { "value": "#0000CD", "token": "--bb-blue",            "pantone": "Blue 072 C", "cmyk": "C93 M86 Y0 K0", "usage": "Supporting accent." },
+      "magenta":        { "value": "#FF00FF", "token": "--bb-magenta",         "pantone": "Real Purple C", "cmyk": "C27 M81 Y0 K0", "note": "Does not translate easily to CMYK — recommend specialty inks.", "usage": "Expressive accent only." },
+      "pink":           { "value": "#FFC0CB", "token": "--bb-pink",            "pantone": "182 C",   "cmyk": "C0 M34 Y7 K0",    "usage": "Supporting accent." },
+      "paleYellow":     { "value": "#FFFACD", "token": null,                   "pantone": "2001 C",  "cmyk": "C1 M0 Y24 K0",    "usage": "IMAGE TOOL ONLY — do not use in layouts." }


we should remove paleYellow globally to avoid usage

fosmond · 2026-04-28T22:14:34Z

+
+Official logo lockups. Pick variant by background:
+- **Light bg** → `browserbase-logo-color.svg` or `browserbase-logo-black.svg`
+- **Dark bg** → `Browserbase-logo-white.svg`


follow up from slack thread - let's delete all mentions of dark bg so we can reinforce light/red bg

fosmond · 2026-04-28T22:15:11Z

+Official logo lockups. Pick variant by background:
+- **Light bg** → `browserbase-logo-color.svg` or `browserbase-logo-black.svg`
+- **Dark bg** → `Browserbase-logo-white.svg`
+- **Orange bg** → `Browserbase-logo-white.svg` or `browserbase-logo-black.svg`


inconsistent verbiage globally: change orange -> red

fosmond · 2026-04-28T22:15:45Z

+
+All assets are checked in. Reference by relative path — do not hotlink Notion S3 URLs.
+
+## `logos/`


follow up from slack thread - let's delete black logo/logomark

fosmond · 2026-04-28T22:45:37Z

+  --bb-leading-body: 1.5;
+
+  /* Shape */
+  --bb-radius-sm: 4px;


we can delete sm and md radius. all shapes have sharp corners, unless its a label which would use pill

fosmond · 2026-04-28T22:47:20Z

+  --bb-radius-sm: 4px;
+  --bb-radius-md: 8px;
+  --bb-radius-pill: 999px;
+  --bb-hairline: 1px;


if no conflict, can we globally change "hairline" to "border" pls and ty

fosmond · 2026-04-28T22:53:00Z

+|---|---|
+| GT Planar (Light, Regular, Medium) | Display, UI, headings, navigation |
+| GT Standard Mono (Regular, Bold) | Code blocks, inline code, uppercase labels |
+| GT Standard L/M/S (Regular, Bold) | Body text at optical sizes |


we can remove this line - no longer using GT standard L/M/S as body text

fosmond · 2026-04-28T22:53:24Z

+| GT Planar (Light, Regular, Medium) | Display, UI, headings, navigation |
+| GT Standard Mono (Regular, Bold) | Code blocks, inline code, uppercase labels |
+| GT Standard L/M/S (Regular, Bold) | Body text at optical sizes |
+| Plain (Thin – Bold) | Role TBD |


replace "role TBD" with "Body text at optical sizes"

fosmond · 2026-04-28T22:54:51Z

+
+| Family | Role |
+|---|---|
+| GT Planar (Light, Regular, Medium) | Display, UI, headings, navigation |


remove "light" and "regular"

fosmond · 2026-04-28T22:55:42Z

+| Family | Role |
+|---|---|
+| GT Planar (Light, Regular, Medium) | Display, UI, headings, navigation |
+| GT Standard Mono (Regular, Bold) | Code blocks, inline code, uppercase labels |


we can remove "bold," because were only really using regular

fosmond · 2026-04-28T22:57:21Z

+  --bb-white: #FFFFFF;
+  --bb-grey: #C5D3E8;      /* Grey 500 Core — Pantone 657 C */
+  /* Legacy alias */
+  --bb-orange: var(--bb-red);


this line looks extra

fosmond · 2026-04-28T22:59:51Z

+  /* Type scale (tight display, 1.5 body) */
+  --bb-font-display: "GT Planar", ui-sans-serif, system-ui, sans-serif;
+  --bb-font-mono: "GT Standard Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
+  /* Legacy alias — use --bb-font-display for new work */


question - are lines in legacy alias important? i feel like the specifics are covered in typography in skill.md

cursor

Cursor Bugbot has reviewed your changes and found 3 potential issues.

There are 5 total unresolved issues (including 2 from previous reviews).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a854493. Configure here.}

cursor · 2026-04-29T07:01:38Z

+.bb-surface {
+  background: var(--bb-bg);
+  color: var(--bb-fg);
+  font-family: var(--bb-font-display);


CSS tokens missing body font, applies wrong family

Medium Severity

brand-tokens.css defines --bb-font-display (GT Planar) and --bb-font-mono but has no --bb-font-body token for the Plain font. The .bb-surface class applies var(--bb-font-display) to all text, meaning body copy renders in GT Planar instead of Plain — contradicting SKILL.md's font roles table which specifies body copy uses Plain.

^{Reviewed by Cursor Bugbot for commit a854493. Configure here.}

cursor · 2026-04-29T07:01:38Z

+.bb-surface h3 {
+  letter-spacing: var(--bb-tracking-display);
+  line-height: var(--bb-leading-display);
+}


CSS heading styles omit h4 through h6 elements

Low Severity

The .bb-surface heading selector only targets h1, h2, h3 for display tracking and leading, but SKILL.md defines heading styles H1 through H7. Any h4–h6 inside .bb-surface inherits body values (letter-spacing: 0, line-height: 1.5) instead of display values (-0.02em, 1.1), producing visually off-brand headings with incorrect spacing.

^{Reviewed by Cursor Bugbot for commit a854493. Configure here.}

cursor · 2026-04-29T07:01:38Z

+<path d="M832.416 146.52C819.448 146.52 808.864 135.958 808.864 123.079V103.526C808.864 90.5088 819.476 80.0842 832.416 80.0842H842.501L853.363 87.3924V80.0842H866.441V146.52H853.363V139.212L842.501 146.52H832.416ZM821.942 123.079C821.942 128.815 826.652 133.503 832.416 133.503H838.428L853.335 123.465V103.14L838.428 93.1011H832.416C826.652 93.1011 821.942 97.7894 821.942 103.526V123.079Z" fill="black"/>
+<path d="M901.504 146.52C888.865 146.52 879.483 138.302 879.483 127.243V124.651H892.508V127.243C892.508 131.407 895.902 134.413 901.504 134.413H913.37C919.496 134.413 922.504 131.931 922.504 128.153C922.504 113.426 880.394 122.941 880.394 97.6791C880.394 87.1166 888.865 80.0842 901.256 80.0842H912.459C924.187 80.0842 933.321 88.5507 933.321 99.4992V100.685H920.296V99.4992C920.296 95.3349 917.04 92.191 912.487 92.191H901.283C895.819 92.191 893.474 94.3973 893.474 97.6515C893.474 108.214 935.584 101.568 935.584 128.125C935.584 139.074 926.588 146.492 913.425 146.492H901.559L901.504 146.52Z" fill="black"/>
+<path d="M969.369 146.52C956.457 146.52 945.918 135.847 945.918 122.941V103.526C945.918 90.5088 956.485 80.0842 969.369 80.0842H979.798C992.434 80.0842 1002.61 89.8469 1003.25 102.229V116.294H958.94V122.941C958.94 128.677 963.63 133.365 969.369 133.365H979.798C985.537 133.365 990.227 128.677 990.227 122.941V121.644H1003.25V122.941C1003.25 135.847 992.82 146.52 979.798 146.52H969.369ZM958.94 105.897H990.227V103.553C990.227 97.6791 985.675 93.1287 979.798 93.1287H969.369C963.492 93.1287 958.94 97.817 958.94 103.553V105.897Z" fill="black"/>
+</svg>


Black logo files committed but unreferenced everywhere

Low Severity

browserbase-logo-black.svg and Browserbase-logomark-black.svg are committed to the repo but are not listed in SKILL.md's logo table, assets/README.md, or brand-tokens.json's logo variants. These are orphaned assets with no documentation pointing to them, and the PR reviewer explicitly requested their deletion.

Additional Locations (1)

skills/browserbase-brand/assets/logos/Browserbase-logomark-black.svg#L1-L5

^{Reviewed by Cursor Bugbot for commit a854493. Configure here.}

charlypoly · 2026-04-29T07:46:43Z

+
+## Voice & tone
+
+**Goal:** Inspire more people to take on ambitious automation on the web.


"automation" 👀 👀

@bbclanker can you update this

feat: add browserbase brand skill

e037904

cursor Bot reviewed Apr 28, 2026

View reviewed changes

fosmond reviewed Apr 28, 2026

View reviewed changes

update skill based on flora updates

a854493

cursor Bot reviewed Apr 29, 2026

View reviewed changes

charlypoly reviewed Apr 29, 2026

View reviewed changes


		## Identity & positioning

		Full positioning detail — brand idea, mission, product archetypes, positioning statements, messaging ladder, taglines, and value props — lives in `references/positioning.md`. Read it when writing copy or building brand narratives.


		All assets are checked in. Reference by relative path — do not hotlink Notion S3 URLs.

		## `logos/`


		## Voice & tone

		Goal: Inspire more people to take on ambitious automation on the web.

Conversation

Kylejeong2 commented Apr 28, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

cursor Bot Apr 28, 2026

Choose a reason for hiding this comment

Typo in JSON key: staghandGreen missing letter

Uh oh!

cursor Bot Apr 28, 2026

Choose a reason for hiding this comment

Referenced positioning.md is gitignored and missing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fosmond Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fosmond Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fosmond Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fosmond Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Apr 29, 2026

Choose a reason for hiding this comment

CSS tokens missing body font, applies wrong family

Uh oh!

cursor Bot Apr 29, 2026

Choose a reason for hiding this comment

CSS heading styles omit h4 through h6 elements

Uh oh!

cursor Bot Apr 29, 2026

Choose a reason for hiding this comment

Black logo files committed but unreferenced everywhere

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Kylejeong2 commented Apr 28, 2026 •

edited by cursor Bot

Loading

Typo in JSON key: `staghandGreen` missing letter

Referenced `positioning.md` is gitignored and missing

fosmond Apr 28, 2026 •

edited

Loading

fosmond Apr 28, 2026 •

edited

Loading

fosmond Apr 28, 2026 •

edited

Loading

fosmond Apr 28, 2026 •

edited

Loading