Agent skill

Bb Theme Authoring

by get-bb in get-bb/bb

Create or edit BB color themes and inspect them in the Theme Preview panel.

MITAuto-check passed

Install Bb Theme Authoring

skills CLI
$ npx skills add get-bb/bb --skill bb-theme-authoring -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install get-bb/bb bb-theme-authoring --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/get-bb/bb.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/theme-preview/skills/bb-theme-authoring .claude/skills/bb-theme-authoring && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
bb-theme-authoring
GitHub stars
4.2k
Token cost
~1.2k tokens
SKILL.md length
573 words
Files
2 (incl. references)
Skills in repo
33
Repo updated
First seen
Licence
MIT

At a glance

Create or edit BB color themes and inspect them in the Theme Preview panel.

  • SKILL.md covers Where themes live, File shape, Apply and iterate and Verify before you call it done
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Bb Theme Authoring is an agent skill from get-bb/bb. Create or edit BB color themes and inspect them in the Theme Preview panel.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/plugin-themes.md`).

The repository describes itself as: The agent IDE that builds itself. The licence is MIT.

Example prompts

  • “/bb-theme-authoring”

What it can do on your machine

Read from SKILL.md and the folder at commit 68a1e8b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash and css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Bb Theme Authoring loads about 1.2k tokens when it runs, and up to ~1.3k if it reads all its reference files. Until then it costs about 24 tokens; SKILL.md has 573 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~24
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from get-bb/bb at commit 68a1e8b, republished under its MIT licence (© get-bb). 573 words, ~1,188 tokens.

Download SKILL.mdSave it as .claude/skills/bb-theme-authoring/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
bb-theme-authoring
description
Create or edit BB color themes and inspect them in the Theme Preview panel.

Authoring a bb theme

A bb theme is one CSS file that overrides the app's CSS custom properties. bb discovers custom themes on disk and the Theme Preview panel shows every resolved token, its validation state, and an app mock that repaints as you edit. Work in a split: your agent thread on one side, Theme Preview on the other. Nothing needs a restart.

Theme Preview is visualization and validation only. It never creates, writes, forks, repairs, or deletes a theme resource. Create and update theme.css from the separate agent thread; use the existing bb theme commands to locate, inspect, and activate themes. Validation reports inconsistent or inaccessible results, but it never changes authored values.

Where themes live

sh
bb theme dir          # the custom-theme directory, e.g. ~/.bb/theme

One directory per theme, one file inside it:

<theme dir>/<name>/theme.css

<name> is the theme id: lowercase, letters, digits and dashes, a single path segment. Create the directory and the file and it is listed immediately — the Theme Preview dropdown picks it up on its next catalog refresh while the panel is open, and bb theme list shows it at once.

File shape

Two top-level blocks. Light values in :root, .light, dark values in .dark. Every declaration is a --token: value; custom property.

css
:root, .light {
  --canvas: #f4f4f4;
  --ink: #0a0a0a;
  --primary: #2e6f95;
  --primary-foreground: #ffffff;
}

.dark {
  --canvas: #1a1a1a;
  --ink: #dbd8d1;
  --primary: #9db6c6;
  --primary-foreground: #0a0a0a;
}

You only need to declare what you change; everything else derives from bb's base theme. The anchors that drive the most are --canvas, --ink, --primary and --sidebar.

Tokens worth knowing
grouptokens
Surfaces--canvas --sidebar --card --popover --secondary --muted --surface-recessed-solid --surface-scrim
Ink--ink (body) --foreground --muted-foreground --subtle-foreground --readback-foreground --sidebar-foreground
Accent and state--primary --primary-foreground --file-accent --timeline-accent --surface-selected --state-hover --state-active --sidebar-accent
Status--success --warning --warning-text --destructive --destructive-text --pr-merged --diff-added --diff-removed
Lines--border --border-hairline --border-seam --sidebar-border --input --ring
Type--font-sans --font-mono --font-terminal (declare once in :root)

How bb uses them (from bb's own components, so you can predict the result): sidebar rows hover with --sidebar-accent, the open thread's row is --state-active, the default button is --foreground on --background (bb has no primary-filled button; --primary is links, focus and accents), the composer sits on the canvas with a 1px --border, code blocks and message bubbles are a faint recessed wash with --border-seam. The integrated terminal uses --font-terminal, independently of --font-mono.

Element-scoped blocks are allowed — for example .dark .fixed.bg-sidebar { … } to give only the sidebar a different value — but keep palette values in the two top-level blocks so tooling can read them.

Show full SKILL.md (188 more words)Show less

Apply and iterate

sh
bb theme set <name>   # activate it app-wide
bb theme show         # what is active now

Or activate it from the Theme Preview dropdown and use the adjacent mode control to check light and dark. Once active, every save of theme.css repaints the app and the preview automatically while the panel is open (the plugin watches the active theme's file and re-applies it). Edit in the agent thread, glance at the split, edit again.

Verify before you call it done

In Theme Preview, read the Style sheet measurements:

  • Ink rows show a WCAG ratio against the surface they sit on; the floor is 4.5:1 for body text. The ratios are representative measurements, not a theme-level accessibility verdict.
  • Status rows show their ratio against the tinted surface where they are painted.
  • Surfaces with an amber outline are overridden inside the sidebar scope — make sure that is intentional.
  • Check both modes with the dropdown, and the Split and Settings views, not just Thread.

Treat failures as authoring guidance. Fix them in theme.css from the agent thread; Theme Preview does not block or automatically adjust the theme.

Keep dark-mode text below ~12:1 on near-black surfaces; higher blooms on OLED.

For manifest-contributed themes, read references/plugin-themes.md.

© get-bb, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/theme-preview/skills/bb-theme-authoring of get-bb/bb.

  • SKILL.md
  • references/plugin-themes.md

Open the folder on GitHubat commit 68a1e8b

Compare with similar skills

Bb Theme Authoring next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Bb Theme Authoring compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Bb Theme Authoring this skillget-bb/bb4.2k—~1.2kAutomated safety check: PassMIT
Theme Factoryanthropics/skills180k47 repos~781Automated safety check: PassApache-2.0
Theme Factorynexu-io/open-design100k—~329Automated safety check: PassApache-2.0
DaisyUI 5 Color Rulessaadeghi/daisyui43k—~1.7kAutomated safety check: PassMIT
Pierre Theme Packagepierrecomputer/pierre6.2k—~352Automated safety check: PassApache-2.0
Pierre Theming Librarypierrecomputer/pierre6.2k—~661Automated safety check: PassApache-2.0

Similar skills

  • Theme Factory

    anthropics/skills

    Official

    Applies one of ten preset color and font themes to slide decks, documents or HTML pages, or creates a new theme on the fly after you choose from a showcase.

    180k GitHub starsUsed in 47 repos~781 tokens
    Frontend & DesignAuto-check passed
  • Theme Factory

    nexu-io/open-design

    Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages.

    100k GitHub stars~329 tokensUpdated today
    Frontend & DesignAuto-check passed
  • DaisyUI 5 Color Rules

    saadeghi/daisyui

    Rules for using daisyUI 5's semantic color names, such as primary and base-100, so interfaces stay readable across themes.

    43k GitHub stars~1.7k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • Pierre Theme Package

    pierrecomputer/pierre

    Shows an agent how to install and use the @pierre/theme package, which ships ten Pierre light and dark color themes for Shiki and VS Code.

    6.2k GitHub stars~352 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Pierre Theming Library

    pierrecomputer/pierre

    Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.

    6.2k GitHub stars~661 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Hermes Agent Skill Authoring

    NousResearch/hermes-agent

    Author in-repo SKILL.md files: frontmatter and structure. An agent skill from NousResearch/hermes-agent.

    252k GitHub stars~3.6k tokensUpdated today
    Agent WorkflowsAuto-check passed

More from get-bb/bb

All 33 skills in this repo
  • Bb CLI

    get-bb/bb

    Inspect or manage BB state with the bb CLI; use for BB commands and configuration.

    4.2k GitHub stars~3.4k tokensUpdated today
    Auto-check passed
  • Skill Creator

    get-bb/bb

    Create or improve BB skills, including their triggers, instructions, and supporting resources.

    4.2k GitHub stars~702 tokensUpdated today
    Auto-check passed
  • Prepare and submit a BB plugin to the Community marketplace when publication or a marketplace PR is requested.

    4.2k GitHub stars~873 tokensUpdated today
    Auto-check passed
  • Workflows

    get-bb/bb

    Author or run durable BB workflows when the user requests workflow execution or multi-agent orchestration.

    4.2k GitHub stars~890 tokensUpdated today
    Auto-check passed
  • Verify Bb

    get-bb/bb

    Verify BB user journeys in an isolated source dev app using dev-browser@next and the matching source CLI.

    4.2k GitHub stars~3.2k tokensUpdated today
    Auto-check passed
  • Tasks

    get-bb/bb

    Work on or manage records in BB Tasks, including task keys such as ABC-12.

    4.2k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Questions about Bb Theme Authoring

What does Bb Theme Authoring do?

Create or edit BB color themes and inspect them in the Theme Preview panel. Bb Theme Authoring is an agent skill from get-bb/bb. Create or edit BB color themes and inspect them in the Theme Preview panel.

How do I install Bb Theme Authoring in Claude Code?

Run `npx skills add get-bb/bb --skill bb-theme-authoring -a claude-code`. Or copy the skill folder (plugins/theme-preview/skills/bb-theme-authoring in get-bb/bb) into .claude/skills/bb-theme-authoring in your project. Claude Code loads it when a task matches its description.

How do I install Bb Theme Authoring in Codex?

Run `npx skills add get-bb/bb --skill bb-theme-authoring -a codex`. Or copy the skill folder (plugins/theme-preview/skills/bb-theme-authoring in get-bb/bb) into .agents/skills/bb-theme-authoring in your project. Codex loads it when a task matches its description.

Can I use Bb Theme Authoring in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add get-bb/bb --skill bb-theme-authoring -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/bb-theme-authoring, .gemini/skills/bb-theme-authoring, .github/skills/bb-theme-authoring and .opencode/skills/bb-theme-authoring in your project.

What does Bb Theme Authoring need to run?

SKILL.md names no scripts, command-line tools or credentials: Bb Theme Authoring is instructions for the agent only.

Does Bb Theme Authoring access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Bb Theme Authoring safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Bb Theme Authoring use?

Bb Theme Authoring is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Bb Theme Authoring use?

About 1.2k tokens (SKILL.md is roughly 4.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 113 tokens, read only when the agent opens those files.

What are the alternatives to Bb Theme Authoring?

Skills that share tags, products or a category with Bb Theme Authoring: Theme Factory (anthropics/skills, 180k stars), Theme Factory (nexu-io/open-design, 100k stars), DaisyUI 5 Color Rules (saadeghi/daisyui, 43k stars) and Pierre Theme Package (pierrecomputer/pierre, 6.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Bb Theme Authoring?

get-bb (a GitHub organization) maintains it in get-bb/bb, which has 4,155 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on October 7, 2026.

Source: get-bb/bb on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.