Theme Authoring Agent Skill

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

files

instructions only

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.

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

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.