Menu
Monitor app conventions — routing, queries, components, core/monitor boundary. Load when working in monitor/.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when navigating the core codebase, understanding component structure, theme definitions, color utilities, or the type system.
Use when creating a new adapter for a platform to support Black Atom themes. Covers research, token mapping, template creation, and verification.
Use when creating a new theme in an existing collection. Covers collaborative design, palette extraction, core definition, adapter configs, and generation.
Use when renaming a theme across all repositories. Handles core type updates, adapter configs, file renames, generation, and coordinated commits.
Use when developing new theme concepts, researching color inspiration, or refining existing themes. Covers color research, palette development, and collection fit assessment.
Use when linking generated Black Atom themes to Nik's dotfiles via theme-link.sh, or after adding a new adapter that needs dotfile integration.
| name | core-monitor |
| description | Monitor app conventions — routing, queries, components, core/monitor boundary. Load when working in monitor/. |
| user-invocable | false |
Core (src/) owns data and computation. Monitor (monitor/) owns display.
ThemeDefinition is the single source of truth type — never create subsets like ThemeSummaryculori, WCAG contrast, stats) live in core at src/lib/@core/lib/stats.ts, @core/lib/wcag.tsculori directlyRoutes live in monitor/src/routes/. Route components are defined inline:
export const Route = createFileRoute("/preview/ui")({
component: Component,
});
function Component() {
// data fetching, orchestration, rendering
}
containers/ directory — routes ARE the containers__root.tsx is the app shell layout with nav, sidebar, and stats bar__root.tsxLocated in monitor/src/queries/ (not hooks/).
apiClient from monitor/src/lib/api-client.ts["themes", "all"], ["themes", "detail", key]Omit<UseQueryOptions, "queryKey" | "queryFn"> for options passthroughThemeDefinitionFour roles (see dev:react skill):
components/) — styling via CSS Modules, data-component attributepartials/) — compose components, zero styling*Layout suffix (AppLayout, StatsBarLayout)themeToCssVars(theme) in monitor/src/lib/theme-css-vars.ts programmatically converts any ThemeDefinition into CSS custom properties (--ba-primaries-d10, --ba-ui-bg-default, --ba-syntax-keyword-default, etc.).
Used in two scopes:
__root.tsx) — global theme for the monitor UI itselfReusable transformations in tested lib files:
groupByCollection(themes) → Map<ThemeCollectionKey, ThemeDefinition[]>themeToCssVars(theme) → Record<string, string> of CSS custom propertiesBoth have unit tests in monitor/src/lib/.