# UI Themer > Analyze and standardize theme class usage in Frictionless UI apps Use when this capability is needed. - Skill: `tomevault-io/ui-themer` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-themer` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-themer/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-themer --- # UI Themer Workflow for auditing and standardizing semantic CSS class usage across UI apps. ## Commands | Command | Description | |---------|-------------| | `mcp theme list` | List available themes and current theme | | `mcp theme classes [THEME]` | Show semantic classes with descriptions | | `mcp theme audit APP [THEME]` | Audit an app's CSS class usage | ## Workflow: Standardize an App 1. **Audit the app** ```bash {cmd} theme audit my-app ``` This returns: - `undocumented_classes`: Classes used but not in theme (may need documenting) - `unused_theme_classes`: Theme classes not used by this app (OK - not all apps use all classes) - `summary`: Counts of documented vs undocumented 2. **Review undocumented classes** For each undocumented class, decide: - **Document it**: Add to the theme CSS metadata block and implement the styles - **Replace it**: Use an existing theme class if one fits - **Keep it**: App-specific classes are fine (e.g., `chat-message` in a chat app) 3. **Add new theme classes** (if needed) Edit `{ui_dir}/html/themes/lcars.css` — add to the metadata block: ```css /* @theme lcars @description LCARS-inspired design @class new-class-name @description What it does visually @usage When/where to use it @elements div, header */ ``` Then add the CSS rules: ```css .theme-lcars .new-class-name { /* styling */ } ``` ## Theme CSS Format Theme files are CSS with `@` metadata annotations in a comment block: ```css /* @theme lcars @description Subtle Star Trek LCARS-inspired design @class panel-header @description Header bar with bottom accent @usage Panel/section headers with title and action buttons @elements div, header @class section-header @description Collapsible section header with hover effects @usage Collapsible sections within panels @elements div */ .theme-lcars { --term-bg: #0a0a0f; --term-accent: #E07A47; /* ... */ } .theme-lcars .panel-header { border-bottom: 3px solid var(--term-accent); } ``` Metadata fields: - `@theme`: Theme identifier (matches filename without .css) - `@description`: One-line theme description - `@class`: Start a semantic class definition - `@description`: What the class does visually - `@usage`: When/where to use it - `@elements`: HTML elements it's typically applied to ## Class Naming Conventions - **Structural**: `panel-header`, `section-header`, `input-area` - **State modifiers**: `selected`, `expanded`, `active` - **Compound**: Use with base class, e.g., `.item.selected` Avoid: - Overly specific names: `chat-message-header` (use `panel-header`) - Presentation-focused names: `orange-border` (describe purpose, not appearance) ## Current Theme The active theme is stored in localStorage and applied via an HTML class: ```html ``` Users switch themes in the **Prefs** app. The selection persists across sessions. All apps inherit styles from the active theme automatically. ## Example Audit Output ```json { "app": "app-console", "theme": "lcars", "undocumented_classes": [ {"class": "chat-message", "file": "AppConsole.Chat.html", "line": 15}, {"class": "app-item", "file": "AppConsole.AppInfo.list-item.html", "line": 3} ], "unused_theme_classes": ["input-area"], "summary": { "total": 12, "documented": 10, "undocumented": 2 } } ``` This app uses 12 distinct CSS classes, 10 match documented theme patterns, and 2 are app-specific. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/zot) — claim your Tome and manage your conversions.