메뉴
Monitor app conventions — routing, queries, components, core/monitor boundary. Load when working in monitor/.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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/.