mcpbeat

Theme Authoring

microsoft/theme-authoring

Add a new color theme to the Ontology Playground. Use when someone wants to create, author, or plug in a theme, palette, color scheme, dark mode, or light mode, or add an entry to the theme picker. Covers the appStore registration plus the CSS token block.

1k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
2320
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/microsoft/Ontology-Playground --skill theme-authoring

The instruction itself

9 sections, as written by the author

Theme Authoring Skill

Goal

Plug a new color theme into the Playground so it appears in the header theme

picker, is remembered across sessions, and themes every surface (main graph,

designer preview, learn pages) — with no component or graph-rendering edits.

Read First

  • docs/theme-authoring-guide.md — full architecture, token table, gotchas, worked example.
  • src/store/appStore.ts — ThemeId, THEME_OPTIONS, DARK_BASED_THEMES, isDarkTheme, themeClass.
  • src/styles/app.css — the :root / .light-theme / .theme-aurora / .theme-crimson token blocks (copy the nearest one).

Intake Questions

Ask the user:

  • Theme id (lowercase, e.g. indigo) and display label (e.g. Indigo)?
  • Dark-based or light-based? (Determines DARK_BASED_THEMES membership and which block to copy.)
  • Accent / signature color (used for the picker swatch and --ms-blue* / --info)?
  • Any specific surface, text, or graph colors, or should they be derived from the accent?

Procedure

Make all edits in src/store/appStore.ts and

src/styles/app.css. The guide's

"Add a theme in six steps" section has copy-paste snippets.

  • Add the id to the ThemeId union.
  • Add a THEME_OPTIONS entry: { id, label, swatch } (swatch = accent hex).
  • If dark-based, add the id to DARK_BASED_THEMES. If light-based, leave it out.
  • Add a themeClass() case:
  • dark-based → return 'theme-<id>';
  • light-based → return 'light-theme theme-<id>'; (layer over the light base).
  • Add a .theme-<id> block in app.css by copying .theme-aurora (dark) or

.theme-crimson (light) and retuning the tokens.

  • Verify (see below).

Critical Rules

  • Opaque canvas base for light themes. --chess-square-light is the graph

canvas's solid backdrop. The theme class sits on .app-container, not <body>,

and <body> stays dark (#1B1B1B). A translucent --chess-square-light lets

the dark body bleed through → dark canvas + unreadable labels. Use an opaque

light color (e.g. #FBF7F8), not rgba(..., 0.03). (Guide → Gotcha 1.)

  • Graph colors are CSS-driven. Define --graph-bg, --graph-node-text,

--graph-edge-color, --graph-edge-text, --graph-edge-label-bg in the

block; the graph and designer read them at runtime. No .tsx edits.

  • Meet WCAG 2.1 AA contrast. Text and labels need 4.5:1; graph edge lines and

other non-text need 3:1. Set --on-accent (label color on accent fills) to a

dark value for a light accent (white fails on Aurora's mint) and white

for a dark accent. Edge text must clear 4.5:1 against --graph-edge-label-bg.

Stat-tile icons/values (--stat-blue/green/purple) need 3:1 over the tint and

cascade automatically (bright from :root, dark from .light-theme). Amber

text/icons use --ms-yellow-fg (bright #FFB900 on dark, dark gold #8A6A00

on light); the .progress-fill stops --progress-from/--progress-to each

need 3:1 on the --bg-tertiary track.

npm run test:a11y enforces this for every theme. (Guide → Accessibility.)

  • Register dark themes in DARK_BASED_THEMES so darkMode is correct

(graph fallback, label backplate, PNG export bg).

  • Don't introduce brand names in ids, labels, comments, or commits. Use

generic palette names (e.g. Aurora, Crimson, Indigo, Sand).

Person Names

If any example data, docs, or sample instances need person names, use the

name-generator skill — do not invent names.

Validate

npm run dev          # switch to the theme in the header; check graph, designer, learn pages
npm run test:a11y    # WCAG 2.1 AA contrast for every theme (also a CI gate)
npx tsc --noEmit     # the ThemeId union change is type-checked here
npm run build        # full build

If npm run build only changed public/learn.json (a timestamp), revert it:

git checkout -- public/learn.json.

Done Criteria

  • New swatch + label appear in the picker; selection check mark tracks state.
  • Theme persists across reload (localStorage['theme']).
  • Main graph, designer preview, and learn pages are legible in the new theme;

the graph canvas backdrop matches the theme (Gotcha 1 satisfied).

  • Dark, Light, Aurora, Crimson unchanged.
  • npm run test:a11y passes (WCAG 2.1 AA contrast for the new theme).
  • tsc --noEmit and npm run build pass; no brand references introduced.

How to use it

Copy the folder

Take microsoft/theme-authoring from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.