@yottagraph-app/aether-instructions 1.1.24 → 1.1.25

package/commands/update_branding.md

@@ -1,123 +1,71 @@
 # Update Branding
 
-Refresh the Lovelace Brand R2 files from the canonical source repository.
+Sync the project's branding implementation with the latest Lovelace branding skill guidelines.
 
 ## Overview
 
-Aether's branding files are wholesale copies from the `moongoose/ui/news-ui` directory of the Lovelace repo. This command copies the latest versions and checks for new dependencies.
-
-**Do not hardcode any local paths.** Always ask the user for the Lovelace repo location.
+The `lovelace-branding` skill (`skills/lovelace-branding/`) is the single source of truth for Lovelace brand identity. This command reviews the project's branding implementation files and updates them to align with the skill.
 
 ---
 
-## Step 1: Ask for the Lovelace Repo Path
-
-```
-AskQuestion({
-  title: "Lovelace Repository Path",
-  questions: [
-    {
-      id: "repo-path",
-      prompt: "Where is your local clone of the Lovelace repository?",
-      options: [
-        { id: "home-lovelace", label: "~/lovelace" },
-        { id: "custom", label: "Other location (I'll specify)" }
-      ]
-    }
-  ]
-})
-```
+## Step 1: Read the Branding Skill
 
-If the user selects "Other location", ask them to provide the full path.
-
-Expand `~` to the user's home directory. Store the result as `{repo}`.
+Read the skill starting from `skills/lovelace-branding/SKILL.md`. It contains a file index that will direct you to the relevant reference files.
 
 ---
 
-## Step 2: Validate the Source Path
-
-Confirm the branding source directory exists:
+## Step 2: Review Implementation Files
 
-```bash
-ls {repo}/moongoose/ui/news-ui/BRANDING.md
-```
+Read each of the project's branding implementation files and compare against the skill guidelines:
 
-**If the file does not exist:** Tell the user the path doesn't contain the expected branding files and ask them to double-check. Stop.
+| File                              | What to check                                                                     |
+| --------------------------------- | --------------------------------------------------------------------------------- |
+| `assets/brand-globals.css`        | `:root` CSS variables match the skill's color and typography values               |
+| `assets/fonts.css`                | `@font-face` declarations match the skill's font setup                            |
+| `assets/theme-styles.css`         | Theme utility classes align with the skill's CSS patterns                         |
+| `composables/useLovelaceTheme.ts` | `themeColors` object matches the skill's color palette                            |
+| `composables/useThemeClasses.ts`  | Theme-aware utilities consistent with skill patterns                              |
+| `nuxt.config.ts`                  | Vuetify theme colors match the skill; CSS array includes all branding stylesheets |
 
-Also verify the other expected source files exist:
-
-```bash
-ls {repo}/moongoose/ui/news-ui/composables/useNewsTheme.ts
-ls {repo}/moongoose/ui/news-ui/composables/useThemeClasses.ts
-ls {repo}/moongoose/ui/news-ui/assets/theme-styles.css
-ls {repo}/moongoose/ui/news-ui/assets/fonts.css
-ls {repo}/moongoose/ui/news-ui/public/fonts/README.md
-ls {repo}/moongoose/ui/news-ui/public/LL-logo-full-wht.svg
-```
-
-Report any missing files. If critical files are missing (BRANDING.md, useNewsTheme.ts, theme-styles.css), stop. If optional files are missing (logo, fonts README), warn but continue.
+For each file, note any discrepancies between the current implementation and the skill guidelines.
 
 ---
 
-## Step 3: Copy the Branding Files
+## Step 3: Update Implementation
 
-The base source path is `{repo}/moongoose/ui/news-ui`.
+For each discrepancy found in Step 2, update the project file to align with the skill:
 
-Copy these files to their Aether destinations:
+- **CSS variables**: Update hex values, add missing variables, remove obsolete ones
+- **Color palette**: Update `themeColors` in `useLovelaceTheme.ts` to match
+- **Typography**: Update font families, weights, and fallbacks as specified by the skill
+- **Patterns**: Update theme utility classes to match the skill's CSS patterns
+- **Vuetify theme**: Update `lovelaceDark` theme colors in `nuxt.config.ts` if needed
 
-| Source (relative to base)        | Destination (relative to Aether root) |
-| -------------------------------- | ------------------------------------- |
-| `BRANDING.md`                    | `branding/BRANDING.md`                |
-| `composables/useNewsTheme.ts`    | `composables/useNewsTheme.ts`         |
-| `composables/useThemeClasses.ts` | `composables/useThemeClasses.ts`      |
-| `assets/theme-styles.css`        | `assets/theme-styles.css`             |
-| `assets/fonts.css`               | `assets/fonts.css`                    |
-| `public/fonts/README.md`         | `public/fonts/README.md`              |
-| `public/LL-logo-full-wht.svg`    | `public/LL-logo-full-wht.svg`         |
+If the skill introduces new concepts not yet implemented in the project (new CSS variable namespaces, new utility classes, new patterns), add them.
 
-For `app.vue`, extract only the `<style>` block contents (not the `<style>` tags themselves) and write them to `assets/brand-globals.css`. Read the source `app.vue`, find the content between `<style>` and `</style>`, and overwrite `assets/brand-globals.css` with that content.
+If the project has customizations that intentionally diverge from the skill (e.g., project-specific semantic colors), preserve them but note the divergence.
 
 ---
 
-## Step 4: Dependency Audit
-
-After copying, read through each copied file and check for new references that weren't present before:
+## Step 4: Check Assets
 
-1. **TypeScript imports**: Check `useNewsTheme.ts` and `useThemeClasses.ts` for any new `import` statements referencing files that don't exist in Aether.
+Compare logo and asset files in `public/` against the skill's `assets/` directory (`skills/lovelace-branding/assets/`).
 
-2. **CSS references**: Check `theme-styles.css`, `fonts.css`, and `brand-globals.css` for:
-    - `url()` paths pointing to files not in `public/`
-    - `@import` statements referencing files not in `assets/`
-
-3. **Documentation references**: Check `BRANDING.md` for references to new files (logos, assets, CSS files) that should be copied.
-
-**If new dependencies are found:**
-
-- Static assets (images, SVGs, fonts) -> copy to `public/` in the equivalent subdirectory
-- CSS files -> copy to `assets/`
-- TypeScript/JS files -> copy to `composables/` or the equivalent directory
-- Report what was copied to the user
+- Copy any new or updated SVGs/assets from the skill to `public/`
+- If existing assets differ, update them to the skill's versions
 
 ---
 
-## Step 5: Verify Integration
-
-Check that the adapter (`composables/useCustomTheme.ts`) is still compatible:
-
-1. Read `composables/useNewsTheme.ts` and check what it exports.
-2. Read `composables/useCustomTheme.ts` and confirm it re-exports the expected interface.
-3. If `useNewsTheme.ts` has added new named exports that aren't re-exported by the adapter, tell the user:
-
-> `useNewsTheme.ts` has new exports that aren't exposed through `useCustomTheme.ts`: [list them]. You may want to add these to the adapter if components need them.
-
-4. Check that `nuxt.config.ts` still includes the three CSS files:
+## Step 5: Verify
 
-```typescript
-css: ['~/assets/fonts.css', '~/assets/brand-globals.css', '~/assets/theme-styles.css'],
-```
+1. Confirm `nuxt.config.ts` CSS array still includes all branding stylesheets:
+    ```typescript
+    css: ['~/assets/fonts.css', '~/assets/brand-globals.css', '~/assets/theme-styles.css'];
+    ```
+2. Run `npm run build` to verify no compilation errors
 
 ---
 
 ## Step 6: Commit
 
-Follow the `git-support.mdc` workflow to commit the change.
+Follow the `git-support.mdc` workflow to commit the changes.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yottagraph-app/aether-instructions",
-    "version": "1.1.24",
+    "version": "1.1.25",
     "description": "Cursor rules, commands, and skills for Aether development",
     "files": [
         "rules",

package/rules/branding.mdc

@@ -3,41 +3,33 @@ description: Apply when working on visual styling, colors, typography, theming,
 alwaysApply: false
 ---
 
-# Lovelace Brand R2
+# Lovelace Branding
 
-The app follows Lovelace Brand R2 guidelines. For the full specification (color ramps, accessibility, visual effects), read `branding/BRANDING.md`.
+The `lovelace-branding` skill (`skills/lovelace-branding/`) is the single source of truth for all brand specifics -- colors, typography, patterns, assets, and usage guidelines. Read the skill before making branding decisions. Start with `SKILL.md` for the file index.
 
-## Quick Reference
+## Theme
 
-- **Theme**: Single dark theme. No light mode, no theme switching.
-- **Core colors**: Jet Black `#0A0A0A`, Pure White `#FFFFFF`, Cyber Green `#3FEA00`, Sonic Silver `#757575`
-- **Secondary colors**: Electric Blue `#003BFF`, Blaze Orange `#FF5C00`
-- **Semantic**: Amber `#FF9F0A` (warnings), Red `#EF4444` (errors)
-- **Fonts**: FK Grotesk (body), FK Grotesk Mono (headlines, buttons, code). Falls back to Inter / system-ui. See `public/fonts/README.md` for setup.
-- **Icons**: Material Design Icons (mdi) via Vuetify
+Single dark theme. No light mode, no theme switching.
 
-## Branding Files
+## Implementation Files
 
-These files are copied wholesale from the canonical branding source (`moongoose/ui/news-ui`). Update them by running `/update_branding`. Do **not** edit them in place.
+These files are project-owned. Consult the branding skill for the values and patterns they should implement.
 
-| File | Purpose |
-|---|---|
-| `branding/BRANDING.md` | Full brand specification |
-| `composables/useNewsTheme.ts` | Theme colors and CSS variable application |
-| `composables/useThemeClasses.ts` | Theme-aware class utilities |
-| `assets/theme-styles.css` | Theme CSS classes |
+| File | Role |
+|------|------|
+| `assets/brand-globals.css` | `:root` CSS variables and global typography/layout |
 | `assets/fonts.css` | `@font-face` declarations |
-| `assets/brand-globals.css` | Global CSS variables, typography, utilities |
-| `public/fonts/README.md` | Font setup instructions |
-| `public/LL-logo-full-wht.svg` | Primary logo (white, for dark backgrounds) |
+| `assets/theme-styles.css` | Theme-aware CSS utility classes |
+| `composables/useLovelaceTheme.ts` | Theme color palette and Vuetify theme activation |
+| `composables/useThemeClasses.ts` | Theme-aware class combination utilities |
 
-## Vuetify Theme
+## Integration
 
-The `lovelaceDark` Vuetify theme is defined in `nuxt.config.ts` under `vuetify.vuetifyOptions.theme`. This is the same theme used by the Broadchurch Portal. It provides Brand R2 colors to all Vuetify components automatically (primary = Cyber Green, secondary = Electric Blue, etc.). Component defaults (rounded buttons, outlined cards, etc.) are also set in `nuxt.config.ts` under `vuetify.vuetifyOptions.defaults`.
+- Use `useLovelaceTheme()` or `useThemeClasses()` in components for theme colors and class utilities.
+- The `lovelaceDark` Vuetify theme is defined in `nuxt.config.ts` under `vuetify.vuetifyOptions.theme`. It provides brand colors to all Vuetify components automatically. Component defaults are set under `vuetify.vuetifyOptions.defaults`.
+- CSS variables (`--lv-*`) and theme classes (`.theme-*`) are available globally via the stylesheets listed above.
+- `useLovelaceTheme` calls `theme.change('lovelaceDark')` to activate the Vuetify theme. This must match the theme name in `nuxt.config.ts`.
 
-## Integration
+## Updating
 
-- `composables/useCustomTheme.ts` is a thin adapter around `useNewsTheme`. Use `useCustomTheme()` or `useThemeClasses()` in components.
-- CSS variables (`--lv-green`, `--lv-black`, etc.) and theme classes (`.theme-card`, `.theme-text-primary`, etc.) are available globally.
-- `useNewsTheme` calls `theme.change('lovelaceDark')` to activate the Vuetify theme. This must match the theme name in `nuxt.config.ts`.
-- If you need to change how the branding integrates with Aether, modify the adapter -- not the branding files.
+Run `/update_branding` to sync these files with the latest branding skill guidelines. The command reads the skill, compares each implementation file against the guidelines, and updates as needed.

package/rules/design.mdc

@@ -20,7 +20,8 @@ When building from a project brief or user request, feel free to:
 
 - **Replace** `pages/index.vue` with the app's real home page
 - **Remove** any pages that don't fit the app
-- **Restructure** the navigation, layout, and branding entirely
+- **Restructure** the navigation and layout entirely
+- **Check** the branding is up to date with the `lovelace-branding` skill, and update as needed
 - **Keep** the infrastructure: `composables/`, `server/api/kv/`, `agents/`
 
 Do NOT treat the existing UI as something to preserve. Build what the

package/skills/lovelace-branding/BRANDING.md

@@ -0,0 +1,176 @@
+# Lovelace Brand R2 Guidelines
+
+This document defines the visual identity for all Lovelace UI products (News UI, Ada Demo, etc.). It is derived from the Brand R2 review and serves as the single source of truth for colors, typography, iconography, and usage patterns.
+
+## Color Palettes
+
+### Core Palette
+
+Jet Black, Pure White, Sonic Silver, and Cyber Green are Lovelace's core brand colors.
+
+| Name         | Hex       | Usage                          |
+|--------------|-----------|--------------------------------|
+| Jet Black    | `#0A0A0A` | Primary backgrounds            |
+| Pure White   | `#FFFFFF` | Primary text on dark surfaces  |
+| Sonic Silver | `#757575` | Muted text, secondary elements |
+| Cyber Green  | `#3FEA00` | Primary accent, CTAs, success  |
+
+The palette can be extended with neutral greyscale tones ranging from Pure White `#FFF` to True Black `#000`. We use Jet Black `#0A0A0A` as our primary black for most purposes.
+
+### Secondary Colors
+
+Electric Blue and Blaze Orange are secondary colors to extend the branding.
+
+| Name          | Hex       | Usage                               |
+|---------------|-----------|-------------------------------------|
+| Electric Blue | `#003BFF` | Accent, links, finance/data         |
+| Blaze Orange  | `#FF5C00` | Warnings, highlights, secondary CTA |
+
+### Semantic Colors
+
+| Name   | Hex       | Usage    |
+|--------|-----------|----------|
+| Amber  | `#FF9F0A` | Warnings |
+| Red    | `#EF4444` | Errors   |
+
+### Color Ramps
+
+Each color has a ramp from 50 (lightest) to 950 (darkest). The `/500` value is the base brand color. Colors go lighter (lower numbers) or darker (higher numbers) depending on context.
+
+**Neutrals:**
+
+| 50      | 100      | 200      | 300      | 400      | 500      | 600      | 700      | 800      | 900      | 950      |
+|---------|----------|----------|----------|----------|----------|----------|----------|----------|----------|----------|
+| #FFFFFF | #F8F8F8  | #E6E6E6  | #D5D5D6  | #B1B1B1  | #757575  | #6C6C6C  | #464646  | #222222  | #0A0A0A  | #000000  |
+
+**Green:**
+
+| 50      | 100      | 200      | 300      | 400      | 500      | 600      | 700      | 800      | 900      | 950      |
+|---------|----------|----------|----------|----------|----------|----------|----------|----------|----------|----------|
+| #DDFFD1 | #BBFFA3  | #99FF75  | #78FF47  | #57FF19  | #3FEA00  | #30BC00  | #238E00  | #166100  | #0B3300  | #010500  |
+
+**Blue:**
+
+| 50      | 100      | 200      | 300      | 400      | 500      | 600      | 700      | 800      | 900      | 950      |
+|---------|----------|----------|----------|----------|----------|----------|----------|----------|----------|----------|
+| #E6EBFF | #BBC7FF  | #8AA3FF  | #6C80FF  | #2E5DFF  | #003BFF  | #0230D0  | #0326A1  | #031B73  | #021146  | #010819  |
+
+**Orange:**
+
+| 50      | 100      | 200      | 300      | 400      | 500      | 600      | 700      | 800      | 900      | 950      |
+|---------|----------|----------|----------|----------|----------|----------|----------|----------|----------|----------|
+| #FFF0E6 | #FFD4B8  | #FFB78A  | #FF989C  | #FF7B2E  | #FF5C00  | #D04E02  | #A13F03  | #732F03  | #461E02  | #190801  |
+
+### Usage Proportions
+
+The proportional usage of each color to the whole (approximate):
+- Jet Black + Pure White: ~70% of surface area (dark backgrounds, white text)
+- Cyber Green: ~15% (accents, interactive elements, success states)
+- Sonic Silver: ~10% (muted text, borders, secondary elements)
+- Electric Blue + Blaze Orange: ~5% (sparingly, for specific semantic purposes)
+
+### Accessibility
+
+All color pairings must meet WCAG AA contrast ratio at a minimum. Use the color ramps to find appropriate pairings:
+- White text on Jet Black: passes AAA
+- Cyber Green on Jet Black: passes AA
+- Electric Blue on Jet Black: passes AA
+
+Reference: https://accessibleweb.com/color-contrast-checker/
+
+## Typography
+
+### Font Families
+
+| Role              | Font                | Fallbacks                              |
+|-------------------|---------------------|----------------------------------------|
+| Body / Primary    | FK Grotesk          | Inter, system-ui, sans-serif           |
+| Headlines         | FK Grotesk SemiMono | Inter, system-ui, sans-serif           |
+| Subheaders        | FK Grotesk SemiMono | Inter, system-ui, sans-serif           |
+| Buttons/Elements  | FK Grotesk Mono     | JetBrains Mono, Fira Code, monospace   |
+| Brand wordmark    | Inter               | system-ui, sans-serif                  |
+| Code/Data         | FK Grotesk Mono     | JetBrains Mono, Fira Code, monospace   |
+
+FK Grotesk is a commercial font (licensed). Font files are **not committed to git**. See `public/fonts/README.md` for setup instructions.
+
+### Type Hierarchy
+
+| Level                    | Font              | Weight  | Style      |
+|--------------------------|-------------------|---------|------------|
+| Headlines (h1)           | FK Grotesk SemiMono | Regular | Normal     |
+| Subheaders (h2, h3)      | FK Grotesk SemiMono | Regular | Normal     |
+| Body Copy                | FK Grotesk        | Regular | Normal     |
+| Body Strong / Highlighted | FK Grotesk       | Strong (700) | Normal  |
+| Buttons & UI Elements    | FK Grotesk Mono   | Regular | UPPERCASE, letter-spacing 0.05em |
+
+### CSS Variables
+
+```css
+:root {
+    --font-primary: 'FK Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
+    --font-headline: 'FK Grotesk Mono', 'Inter', system-ui, sans-serif;
+    --font-brand: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'FK Grotesk Mono', 'JetBrains Mono', 'Fira Code', monospace;
+}
+```
+
+## Iconography
+
+We use the **IBM Carbon Design** icon kit -- an open-source, free icon kit with over 2,000 icons available.
+
+Library: https://carbondesignsystem.com/elements/icons/library/
+
+In practice, we currently use Material Design Icons (mdi) via Vuetify. Carbon icons can be adopted incrementally.
+
+## Logo
+
+The primary logo is the Lovelace wordmark with the circular green-dot badge:
+- **White version** (for dark backgrounds): `LL-logo-full-wht.svg`
+- Located in `public/LL-logo-full-wht.svg`
+
+## Visual Effects (Optional)
+
+These effects can be applied sparingly for branded sections:
+
+- **Grid pattern**: Subtle grid lines at 20px intervals
+- **Dot pattern**: Punch-card aesthetic with radial dots at 16px intervals
+- **Glow effects**: Colored box-shadows (green, orange, blue) at 0.3 opacity
+- **Text glow**: Green text-shadow for emphasis
+
+## CSS Variable Reference
+
+All Brand R2 CSS variables are defined in `app.vue` under `:root`:
+
+```css
+:root {
+    /* Core */
+    --lv-black: #0A0A0A;
+    --lv-surface: #141414;
+    --lv-surface-light: #1E1E1E;
+    --lv-white: #FFFFFF;
+    --lv-silver: #757575;
+
+    /* Primary */
+    --lv-green: #3FEA00;
+    --lv-green-dim: #30BC00;
+    --lv-green-light: #57FF19;
+
+    /* Secondary */
+    --lv-orange: #FF5C00;
+    --lv-orange-dim: #D04E02;
+    --lv-blue: #003BFF;
+    --lv-blue-dim: #0230D0;
+    --lv-blue-light: #2E5DFF;
+
+    /* Semantic */
+    --lv-yellow: #FF9F0A;
+    --lv-finance-blue: #003BFF;
+}
+```
+
+## Implementation Notes
+
+- The News UI uses a single dark theme ("brand") defined in `composables/useNewsTheme.ts`
+- Theme-aware CSS utility classes are in `assets/theme-styles.css`
+- The `useThemeClasses` composable provides pre-built class combinations for components
+- Vuetify is configured with `defaultTheme: "dark"` in `nuxt.config.ts`

package/skills/lovelace-branding/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: lovelace-branding
+description: Implement Lovelace brand identity in any UI project. Use for colors, typography, patterns, and visual guidelines.
+---
+
+# Lovelace Branding Skill
+
+Lovelace brand guidelines for implementing consistent visual identity across any UI project.
+
+## When to Use This Skill
+
+- Implementing Lovelace visual identity in a new project
+- Styling UI components to match Lovelace branding
+- Setting up colors, fonts, or CSS variables
+- Looking up brand guidelines or constraints
+
+## Files
+
+| File | Contents |
+|------|----------|
+| [overview.md](overview.md) | Quick reference: colors, fonts, CSS variables, key principles |
+| [BRANDING.md](BRANDING.md) | Full brand guidelines with rationale and color ramps |
+| [patterns.md](patterns.md) | Framework-agnostic CSS patterns (cards, buttons, tables) |
+| [fonts.md](fonts.md) | FK Grotesk font setup and fallbacks |
+| [assets/](assets/) | Logo SVGs, icons, and other brand assets |

package/skills/lovelace-branding/assets/LL-logo-full-white-green.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 643.71 84.78">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3fea00;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-2" d="M108.53,69.1V5.86h18.75v56.13h34.92v16.48h-44.08c-6.08,0-9.58-3.19-9.58-9.37Z"/>
+      <path class="cls-2" d="M198.24,4.42c23.59,0,38.01,16.27,38.01,37.7s-14.42,37.8-38.01,37.8-38.21-16.27-38.21-37.8,14.52-37.7,38.21-37.7ZM198.24,62.92c12.57,0,18.75-7.62,18.75-20.81s-6.28-20.7-18.75-20.7-18.85,7.62-18.85,20.7,6.28,20.81,18.85,20.81Z"/>
+      <path class="cls-2" d="M229.96,5.86h19.88l20.6,65.82,20.6-65.82h19.67l-23.28,72.61h-34.3L229.96,5.86Z"/>
+      <path class="cls-2" d="M313.7,5.86h57.78v16.38h-38.93v12.15h33.78v15.45h-33.78v12.26h38.93v16.38h-57.78V5.86Z"/>
+      <path class="cls-2" d="M376.01,69.1V5.86h18.75v56.13h34.92v16.48h-44.08c-6.08,0-9.58-3.19-9.58-9.37Z"/>
+      <path class="cls-2" d="M455.94,5.86h34.3l23.17,72.61h-19.88l-6.8-21.94h-27.6l-6.8,21.94h-19.67l23.28-72.61ZM481.59,40.16l-8.65-27.71-8.65,27.71h17.3Z"/>
+      <path class="cls-2" d="M507.54,42.11c0-21.42,14.73-37.7,38.52-37.7,20.81,0,34.61,11.23,36.77,29.46h-19.26c-1.54-7.83-8.24-12.46-17.41-12.46-11.23,0-19.26,6.39-19.26,20.7s8.03,20.81,19.26,20.81c9.17,0,15.86-4.74,17.41-12.57h19.26c-2.16,18.33-15.96,29.56-36.77,29.56-23.79,0-38.52-16.27-38.52-37.8Z"/>
+      <path class="cls-2" d="M585.92,5.86h57.78v16.38h-38.93v12.15h33.78v15.45h-33.78v12.26h38.93v16.38h-57.78V5.86Z"/>
+    </g>
+    <path class="cls-1" d="M84.78,42.39h0c0,23.41-18.98,42.39-42.39,42.39h0C18.98,84.78,0,65.8,0,42.39h0C0,18.98,18.98,0,42.39,0h0c23.41,0,42.39,18.98,42.39,42.39Z"/>
+    <g>
+      <circle cx="67.39" cy="50.72" r="6.4"/>
+      <circle cx="67.39" cy="34.05" r="6.4"/>
+      <circle cx="50.72" cy="50.72" r="6.4"/>
+      <circle cx="34.05" cy="34.05" r="6.4"/>
+      <circle cx="17.39" cy="34.05" r="6.4"/>
+      <circle cx="17.39" cy="50.72" r="6.4"/>
+    </g>
+  </g>
+</svg>

package/skills/lovelace-branding/assets/LL-logo-full-wht.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 643.71 84.78">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e6e6e6;
+      }
+
+      .cls-2 {
+        fill: #3fea00;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-3" d="M108.53,69.1V5.86h18.75v56.13h34.92v16.48h-44.08c-6.08,0-9.58-3.19-9.58-9.37Z"/>
+      <path class="cls-3" d="M198.24,4.42c23.59,0,38.01,16.27,38.01,37.7s-14.42,37.8-38.01,37.8-38.21-16.27-38.21-37.8,14.52-37.7,38.21-37.7ZM198.24,62.92c12.57,0,18.75-7.62,18.75-20.81s-6.28-20.7-18.75-20.7-18.85,7.62-18.85,20.7,6.28,20.81,18.85,20.81Z"/>
+      <path class="cls-3" d="M229.96,5.86h19.88l20.6,65.82,20.6-65.82h19.67l-23.28,72.61h-34.3L229.96,5.86Z"/>
+      <path class="cls-3" d="M313.7,5.86h57.78v16.38h-38.93v12.15h33.78v15.45h-33.78v12.26h38.93v16.38h-57.78V5.86Z"/>
+      <path class="cls-3" d="M376.01,69.1V5.86h18.75v56.13h34.92v16.48h-44.08c-6.08,0-9.58-3.19-9.58-9.37Z"/>
+      <path class="cls-3" d="M455.94,5.86h34.3l23.17,72.61h-19.88l-6.8-21.94h-27.6l-6.8,21.94h-19.67l23.28-72.61ZM481.59,40.16l-8.65-27.71-8.65,27.71h17.3Z"/>
+      <path class="cls-3" d="M507.54,42.11c0-21.42,14.73-37.7,38.52-37.7,20.81,0,34.61,11.23,36.77,29.46h-19.26c-1.54-7.83-8.24-12.46-17.41-12.46-11.23,0-19.26,6.39-19.26,20.7s8.03,20.81,19.26,20.81c9.17,0,15.86-4.74,17.41-12.57h19.26c-2.16,18.33-15.96,29.56-36.77,29.56-23.79,0-38.52-16.27-38.52-37.8Z"/>
+      <path class="cls-3" d="M585.92,5.86h57.78v16.38h-38.93v12.15h33.78v15.45h-33.78v12.26h38.93v16.38h-57.78V5.86Z"/>
+    </g>
+    <path class="cls-1" d="M84.78,42.39h0c0,23.41-18.98,42.39-42.39,42.39h0C18.98,84.78,0,65.8,0,42.39h0C0,18.98,18.98,0,42.39,0h0c23.41,0,42.39,18.98,42.39,42.39Z"/>
+    <g>
+      <circle class="cls-2" cx="67.39" cy="50.72" r="6.4"/>
+      <circle class="cls-2" cx="67.39" cy="34.05" r="6.4"/>
+      <circle class="cls-2" cx="50.72" cy="50.72" r="6.4"/>
+      <circle class="cls-2" cx="34.05" cy="34.05" r="6.4"/>
+      <circle class="cls-2" cx="17.39" cy="34.05" r="6.4"/>
+      <circle class="cls-2" cx="17.39" cy="50.72" r="6.4"/>
+    </g>
+  </g>
+</svg>

package/skills/lovelace-branding/assets/LL-mark-green.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.78 84.78">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3fea00;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path class="cls-1" d="M84.78,42.39h0c0,23.41-18.98,42.39-42.39,42.39h0C18.98,84.78,0,65.8,0,42.39h0C0,18.98,18.98,0,42.39,0h0c23.41,0,42.39,18.98,42.39,42.39Z"/>
+    <g>
+      <circle cx="67.39" cy="50.72" r="6.4"/>
+      <circle cx="67.39" cy="34.05" r="6.4"/>
+      <circle cx="50.72" cy="50.72" r="6.4"/>
+      <circle cx="34.05" cy="34.05" r="6.4"/>
+      <circle cx="17.39" cy="34.05" r="6.4"/>
+      <circle cx="17.39" cy="50.72" r="6.4"/>
+    </g>
+  </g>
+</svg>

package/skills/lovelace-branding/assets/entity-styles.json

@@ -0,0 +1,42 @@
+[
+    {
+        "name": "Medium Red",
+        "color": "#FF0000",
+        "size": 20
+    },
+    {
+        "name": "Medium Green",
+        "color": "#00FF00",
+        "size": 20
+    },
+    {
+        "name": "Medium Blue",
+        "color": "#0000FF",
+        "size": 20
+    },
+    {
+        "name": "Medium Yellow",
+        "color": "#FFFF00",
+        "size": 20
+    },
+    {
+        "name": "Small Red",
+        "color": "#FF0000",
+        "size": 20
+    },
+    {
+        "name": "Small Green",
+        "color": "#00FF00",
+        "size": 20
+    },
+    {
+        "name": "Small Blue",
+        "color": "#0000FF",
+        "size": 20
+    },
+    {
+        "name": "Small Yellow",
+        "color": "#FFFF00",
+        "size": 20
+    }
+]

package/skills/lovelace-branding/assets/help-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="main">
+    <path
+        d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+</svg>

package/skills/lovelace-branding/fonts.md

@@ -0,0 +1,147 @@
+# Lovelace Font Setup
+
+FK Grotesk is the primary font family for Lovelace branding. This document covers setup, fallbacks, and deployment considerations.
+
+## Required Font Files
+
+FK Grotesk is a commercial font. Font files are **not committed to git**.
+
+### Minimum Required
+
+At minimum, you need these three files:
+
+- `FKGrotesk-Regular.otf` — Body text
+- `FKGrotesk-Bold.otf` — Strong text
+- `FKGroteskMono-Regular.otf` — Headlines, buttons, code
+
+### Full Set (Optional)
+
+**FK Grotesk (Proportional):**
+- `FKGrotesk-Thin.otf`, `FKGrotesk-ThinItalic.otf`
+- `FKGrotesk-Light.otf`, `FKGrotesk-LightItalic.otf`
+- `FKGrotesk-Regular.otf`, `FKGrotesk-Italic.otf`
+- `FKGrotesk-Medium.otf`, `FKGrotesk-MediumItalic.otf`
+- `FKGrotesk-Bold.otf`, `FKGrotesk-BoldItalic.otf`
+- `FKGrotesk-Black.otf`, `FKGrotesk-BlackItalic.otf`
+
+**FK Grotesk Mono:**
+- `FKGroteskMono-Thin.otf`, `FKGroteskMono-ThinItalic.otf`
+- `FKGroteskMono-Light.otf`, `FKGroteskMono-LightItalic.otf`
+- `FKGroteskMono-Regular.otf`, `FKGroteskMono-Italic.otf`
+- `FKGroteskMono-Medium.otf`, `FKGroteskMono-MediumItalic.otf`
+- `FKGroteskMono-Bold.otf`, `FKGroteskMono-BoldItalic.otf`
+- `FKGroteskMono-Black.otf`, `FKGroteskMono-BlackItalic.otf`
+
+## @font-face Declarations
+
+```css
+@font-face {
+    font-family: 'FK Grotesk';
+    src: url('/fonts/FKGrotesk-Regular.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'FK Grotesk';
+    src: url('/fonts/FKGrotesk-Bold.otf') format('opentype');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'FK Grotesk Mono';
+    src: url('/fonts/FKGroteskMono-Regular.otf') format('opentype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+```
+
+## CSS Variable Setup
+
+```css
+:root {
+    --font-primary: 'FK Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
+    --font-headline: 'FK Grotesk Mono', 'Inter', system-ui, sans-serif;
+    --font-brand: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'FK Grotesk Mono', 'JetBrains Mono', 'Fira Code', monospace;
+}
+```
+
+## Fallback Strategy
+
+When FK Grotesk is not available, the CSS falls back gracefully:
+
+| Role | Primary | Fallback |
+|------|---------|----------|
+| Body text | FK Grotesk | Inter, system-ui |
+| Headlines | FK Grotesk Mono | Inter, system-ui |
+| Code/Buttons | FK Grotesk Mono | JetBrains Mono, Fira Code |
+| Brand wordmark | Inter | system-ui |
+
+**Inter** is a widely available system font on modern operating systems and provides a similar aesthetic to FK Grotesk.
+
+**JetBrains Mono** is a free, open-source monospace font that works well as a fallback for FK Grotesk Mono.
+
+## Usage Examples
+
+```css
+/* Body text */
+body {
+    font-family: var(--font-primary);
+}
+
+/* Headlines */
+h1, h2, h3 {
+    font-family: var(--font-headline);
+}
+
+/* Buttons */
+button {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Code blocks */
+code, pre {
+    font-family: var(--font-mono);
+}
+```
+
+## Deployment Considerations
+
+### Static Hosting
+
+Place font files in your `public/fonts/` directory. They'll be served as static assets.
+
+### Docker
+
+Include fonts in your Docker build. Since fonts are git-ignored, add them before building:
+
+```dockerfile
+COPY fonts/ /app/public/fonts/
+```
+
+### Cloud Run / Kubernetes
+
+Options:
+1. Copy fonts to the image before building
+2. Mount fonts as a secret or ConfigMap volume
+3. Fetch fonts from secure storage in a CI/CD step
+
+### CI/CD
+
+Add a step to fetch fonts from secure storage (e.g., GCS bucket, 1Password) before building:
+
+```yaml
+- name: Fetch fonts
+  run: gsutil cp gs://your-bucket/fonts/*.otf public/fonts/
+```
+
+## Licensing
+
+FK Grotesk requires a commercial license. Contact the font foundry for licensing terms. Do not commit font files to public repositories.

package/skills/lovelace-branding/overview.md

@@ -0,0 +1,136 @@
+# Lovelace Branding Quick Reference
+
+Quick-start guide for implementing Lovelace visual identity.
+
+## Key Principles
+
+- **Dark-first**: Jet Black (#0A0A0A) backgrounds, white text
+- **Green accents**: Cyber Green (#3FEA00) for interactive elements, CTAs, success states
+- **WCAG AA accessibility**: All color pairings meet minimum contrast requirements
+- **Monospace for emphasis**: FK Grotesk Mono for headlines, buttons, code
+- **Minimal decoration**: Clean surfaces, subtle borders, purposeful color
+
+## Quick Start
+
+Minimal CSS variable setup to get started:
+
+```css
+:root {
+    /* Core colors */
+    --lv-black: #0A0A0A;
+    --lv-white: #FFFFFF;
+    --lv-green: #3FEA00;
+    --lv-silver: #757575;
+
+    /* Surfaces */
+    --lv-surface: #141414;
+    --lv-surface-light: #1E1E1E;
+
+    /* Typography */
+    --font-primary: 'FK Grotesk', 'Inter', system-ui, sans-serif;
+    --font-headline: 'FK Grotesk Mono', 'Inter', system-ui, sans-serif;
+    --font-mono: 'FK Grotesk Mono', 'JetBrains Mono', monospace;
+}
+```
+
+## Core Colors
+
+| Name | Hex | CSS Variable | Usage |
+|------|-----|--------------|-------|
+| Jet Black | `#0A0A0A` | `--lv-black` | Primary backgrounds |
+| Pure White | `#FFFFFF` | `--lv-white` | Primary text on dark surfaces |
+| Sonic Silver | `#757575` | `--lv-silver` | Muted text, secondary elements |
+| Cyber Green | `#3FEA00` | `--lv-green` | Primary accent, CTAs, success |
+
+## Secondary Colors
+
+| Name | Hex | CSS Variable | Usage |
+|------|-----|--------------|-------|
+| Electric Blue | `#003BFF` | `--lv-blue` | Accent, links, finance/data |
+| Blaze Orange | `#FF5C00` | `--lv-orange` | Warnings, highlights, secondary CTA |
+| Amber | `#FF9F0A` | `--lv-yellow` | Warnings |
+| Red | `#EF4444` | — | Errors |
+
+## Surface Colors
+
+| Name | Hex | CSS Variable | Usage |
+|------|-----|--------------|-------|
+| Surface | `#141414` | `--lv-surface` | Card backgrounds, elevated surfaces |
+| Surface Light | `#1E1E1E` | `--lv-surface-light` | Hover states, lighter panels |
+| Panel | `#111111` | — | Table headers, dark panels |
+| Border | `#2A2A2A` | — | Subtle borders |
+
+## Color Usage Proportions
+
+- **70%** — Jet Black + Pure White (dark backgrounds, white text)
+- **15%** — Cyber Green (accents, interactive elements, success states)
+- **10%** — Sonic Silver (muted text, borders, secondary elements)
+- **5%** — Electric Blue + Blaze Orange (sparingly, for specific semantic purposes)
+
+## Typography
+
+### Font Families
+
+| Role | Font | CSS Variable |
+|------|------|--------------|
+| Body / Primary | FK Grotesk | `--font-primary` |
+| Headlines | FK Grotesk Mono | `--font-headline` |
+| Buttons / Code | FK Grotesk Mono | `--font-mono` |
+| Brand wordmark | Inter | `--font-brand` |
+
+### Type Hierarchy
+
+| Level | Font | Weight | Style |
+|-------|------|--------|-------|
+| Headlines (h1) | FK Grotesk Mono | Regular | Normal |
+| Subheaders (h2, h3) | FK Grotesk Mono | Regular | Normal |
+| Body Copy | FK Grotesk | Regular | Normal |
+| Body Strong | FK Grotesk | Bold (700) | Normal |
+| Buttons & UI | FK Grotesk Mono | Regular | UPPERCASE, letter-spacing 0.05em |
+
+## Full CSS Variables
+
+Complete `:root` block for all brand variables:
+
+```css
+:root {
+    /* Core */
+    --lv-black: #0A0A0A;
+    --lv-surface: #141414;
+    --lv-surface-light: #1E1E1E;
+    --lv-white: #FFFFFF;
+    --lv-silver: #757575;
+
+    /* Primary */
+    --lv-green: #3FEA00;
+    --lv-green-dim: #30BC00;
+    --lv-green-light: #57FF19;
+
+    /* Secondary */
+    --lv-orange: #FF5C00;
+    --lv-orange-dim: #D04E02;
+    --lv-blue: #003BFF;
+    --lv-blue-dim: #0230D0;
+    --lv-blue-light: #2E5DFF;
+
+    /* Semantic */
+    --lv-yellow: #FF9F0A;
+    --lv-finance-blue: #003BFF;
+
+    /* Typography */
+    --font-primary: 'FK Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
+    --font-headline: 'FK Grotesk Mono', 'Inter', system-ui, sans-serif;
+    --font-brand: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'FK Grotesk Mono', 'JetBrains Mono', 'Fira Code', monospace;
+}
+```
+
+## Accessibility
+
+All color pairings must meet WCAG AA contrast ratio at minimum:
+
+- White text on Jet Black: **passes AAA**
+- Cyber Green on Jet Black: **passes AA**
+- Electric Blue on Jet Black: **passes AA**
+
+Use the color ramps (see BRANDING.md) to find appropriate pairings for other combinations.

package/skills/lovelace-branding/patterns.md

@@ -0,0 +1,263 @@
+# Lovelace CSS Patterns
+
+Framework-agnostic CSS patterns for implementing Lovelace brand styling. These patterns are extracted from the News UI theme styles and can be adapted for React, Vue, Tailwind, or plain CSS.
+
+## Card Styling
+
+### Basic Card
+
+```css
+.card {
+    background-color: var(--lv-surface);
+    border: 1px solid #2A2A2A;
+    color: var(--lv-white);
+}
+```
+
+### Card Header with Gradient
+
+```css
+.card-header {
+    background: linear-gradient(135deg, var(--lv-surface), var(--lv-surface-light));
+    border-bottom: 1px solid var(--lv-green-dim);
+    color: var(--lv-white);
+    padding: 12px 16px;
+    height: 56px;
+}
+```
+
+### Metric Card
+
+```css
+.metric-card {
+    background-color: var(--lv-surface);
+    border: 1px solid #2A2A2A;
+    color: var(--lv-white);
+}
+
+.metric-label {
+    color: #A0AEC0;
+    font-size: 0.875rem;
+}
+
+.metric-value {
+    color: var(--lv-white);
+    font-weight: 600;
+}
+```
+
+## Button Patterns
+
+### Active/Selected Button
+
+```css
+.btn-active {
+    background-color: var(--lv-green);
+    color: var(--lv-black);
+    border-color: var(--lv-green);
+    font-weight: 600;
+    box-shadow: 0 0 12px rgba(63, 234, 0, 0.3);
+}
+```
+
+### Inactive Button
+
+```css
+.btn-inactive {
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #2A2A2A;
+}
+
+.btn-inactive:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+```
+
+### Button Group Sizing
+
+```css
+.btn-group .btn {
+    transition: all 0.2s ease;
+    border-radius: 4px;
+    padding: 0 16px;
+    min-height: 36px;
+    letter-spacing: normal;
+    text-transform: none;
+    font-weight: 500;
+}
+```
+
+## Data Table Patterns
+
+```css
+.data-table {
+    background-color: var(--lv-surface);
+}
+
+.data-table th {
+    background-color: #111111;
+    color: var(--lv-white);
+}
+
+.data-table td {
+    color: var(--lv-white);
+    border-bottom: 1px solid #2A2A2A;
+}
+```
+
+## List Patterns
+
+### Interactive List
+
+```css
+.list {
+    background-color: transparent;
+}
+
+.list-item {
+    color: var(--lv-white);
+    background-color: transparent;
+}
+
+.list-item:hover {
+    background-color: var(--lv-surface-light);
+}
+```
+
+### List Item States
+
+```css
+.list-item-title {
+    color: var(--lv-white);
+}
+
+.list-item-subtitle {
+    color: #A0AEC0;
+}
+
+.list-item-disabled .list-item-title {
+    color: #A0AEC0;
+    opacity: 0.6;
+}
+```
+
+## Text Utility Classes
+
+```css
+.text-primary {
+    color: var(--lv-white);
+}
+
+.text-secondary {
+    color: #A0AEC0;
+}
+
+.text-muted {
+    color: var(--lv-silver);
+}
+```
+
+## Background Colors
+
+```css
+.bg-surface {
+    background-color: var(--lv-surface);
+}
+
+.bg-card {
+    background-color: var(--lv-surface-light);
+}
+
+.bg-panel {
+    background-color: #111111;
+}
+```
+
+## Input Styling
+
+```css
+.input:focus {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.input {
+    color: white;
+}
+```
+
+## Visual Effects
+
+### Glow Effects
+
+```css
+.glow-green {
+    box-shadow: 0 0 12px rgba(63, 234, 0, 0.3);
+}
+
+.glow-orange {
+    box-shadow: 0 0 12px rgba(255, 92, 0, 0.3);
+}
+
+.glow-blue {
+    box-shadow: 0 0 12px rgba(0, 59, 255, 0.3);
+}
+```
+
+### Text Glow
+
+```css
+.text-glow {
+    text-shadow: 0 0 8px rgba(63, 234, 0, 0.5);
+}
+```
+
+### Border Accent
+
+```css
+.border-accent {
+    border-color: var(--lv-green-dim);
+}
+```
+
+## CSS Variable Naming Conventions
+
+| Prefix | Purpose | Example |
+|--------|---------|---------|
+| `--lv-*` | Brand colors (static) | `--lv-green`, `--lv-surface` |
+| `--theme-*` | Theme-aware aliases | `--theme-primary`, `--theme-text` |
+| `--dynamic-*` | JS-set runtime values | `--dynamic-primary`, `--dynamic-surface` |
+| `--font-*` | Typography | `--font-primary`, `--font-mono` |
+
+## Framework Adaptation Notes
+
+### React
+
+Use CSS modules or styled-components. Import the CSS variables in your global styles.
+
+### Vue
+
+Use scoped styles with `<style scoped>`. The variables work naturally with Vue's reactivity.
+
+### Tailwind
+
+Extend your `tailwind.config.js` with the brand colors:
+
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'lv-black': '#0A0A0A',
+        'lv-green': '#3FEA00',
+        'lv-surface': '#141414',
+        // ...
+      }
+    }
+  }
+}
+```
+
+### Plain CSS
+
+Include the CSS variables in your `:root` and use them directly.