@yottagraph-app/aether-instructions 1.1.24 → 1.1.26

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.