@jaimevalasek/aioson 1.5.1 → 1.6.0

package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md

@@ -0,0 +1,334 @@
+# Dashboards — Neo-Brutalist UI
+
+Rules and presets for data-heavy interfaces. The dashboard punk expression mode applied in practice.
+
+---
+
+## General Rules
+
+### Stat numbers
+- Always `font-family: var(--font-mono)` — the primary differentiator is mono, not serif or display
+- Large: `var(--text-3xl)` minimum for hero stats, `var(--text-xl)` for secondary
+- No decoration — the number is the visual
+
+### Charts
+- No gradient fills — flat colors at fixed opacity (`opacity: 0.3` for area fills)
+- Bar charts: `border: var(--border-subtle)` on each bar, `border-radius: var(--radius-none)`
+- Line charts: `stroke-width: 2.5px` minimum, solid dots (not hollow)
+- Grid lines: `var(--border-subtle)`, full grid visible
+- Axis labels: `font-family: var(--font-mono)`, `font-size: var(--text-xs)`
+- No fancy tooltips — simple border box, mono text
+
+### Tables
+- Full grid borders (every cell) — not minimal. This is non-negotiable for brutalist dashboards
+- Header: `bg-elevated`, font-mono uppercase
+- Data cells: mono font for numbers, dates, IDs, statuses
+
+### General
+- Background: `bg-base` (cream off-white in light) — dashboards are "printed", not dark by default
+- All cards: `border-thicker`, `shadow-md`, hover → `shadow-lg`
+- Empty states: `[NO DATA]` in mono — no illustrations, no cheerful messages
+- Status indicators: saturated green/amber/red at full strength — never muted
+
+---
+
+## Chart Color Palette
+
+```css
+--chart-1: var(--accent);          /* #FACC15 — yellow — primary series */
+--chart-2: var(--accent-red);      /* red — negative / error series */
+--chart-3: var(--accent-blue);     /* blue — secondary series */
+--chart-4: var(--accent-green);    /* green — positive / success */
+--chart-5: var(--accent-orange);   /* orange — warning / tertiary */
+--chart-6: var(--border-color);    /* black/white — neutral baseline */
+```
+
+Usage:
+- Single series: `--chart-1` (yellow)
+- Two series: `--chart-1` + `--chart-3` (yellow + blue)
+- Success/failure: `--chart-4` + `--chart-2` (green + red)
+- Do not use more than 4 colors in a single chart
+
+---
+
+## Preset 1 — DevOps Dashboard
+
+For: CI/CD pipelines, deployment tracking, service health, infrastructure monitoring.
+Expression mode: Dashboard Punk.
+
+### Layout
+```
+[STATUS GRID: colored cells (green/amber/red), border-thick each, 4-8 cols]
+
+[DEPLOY TIMELINE: horizontal, mono timestamps, status badges]
+
+┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐
+│ ERROR RATE         │  │ P95 LATENCY        │  │ DEPLOY FREQUENCY   │
+│ [line chart, red]  │  │ [line chart, blue] │  │ [bar chart, green] │
+│ border-thicker     │  │                    │  │                    │
+└────────────────────┘  └────────────────────┘  └────────────────────┘
+
+[SERVICE HEALTH TABLE: full grid, service name | status badge | uptime mono | p99 mono | last incident mono]
+
+[UPTIME COUNTERS: 3-4 stats in a strip — mono text-3xl, "99.97%"]
+```
+
+### Status grid pattern
+```css
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 0;
+}
+
+.status-cell {
+  border: var(--border-subtle);
+  padding: var(--space-3);
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-bold);
+}
+
+.status-cell--healthy { background: var(--semantic-green-dim); color: var(--semantic-green); }
+.status-cell--warning { background: var(--semantic-amber-dim); color: var(--semantic-amber); }
+.status-cell--down    { background: var(--semantic-red-dim); color: var(--semantic-red); }
+```
+
+### CLI-style status badges
+```
+[PASS]   → bg: semantic-green-dim, text: semantic-green, border: semantic-green
+[FAIL]   → bg: semantic-red-dim, text: semantic-red, border: semantic-red
+[RUNNING] → bg: semantic-amber-dim, text: semantic-amber, border: semantic-amber
+[SKIP]   → bg: bg-elevated, text: text-muted
+```
+
+---
+
+## Preset 2 — Indie SaaS Dashboard
+
+For: bootstrapped SaaS, side projects, small products. Revenue and growth metrics.
+Expression mode: Indie Product.
+
+### Layout
+```
+[MRR HERO CARD: text-4xl mono bold, hard shadow-lg, sticker badge "[THIS MONTH]"]
+
+┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐
+│ NEW SIGNUPS        │  │ CHURN RATE         │  │ TRIAL → PAID       │
+│ mono text-2xl      │  │ mono text-2xl      │  │ mono text-2xl      │
+│ trend badge        │  │ trend badge        │  │ progress bar thick │
+└────────────────────┘  └────────────────────┘  └────────────────────┘
+
+┌───────────────────────────────────────────────────┐
+│ SUBSCRIBER CHART                                  │
+│ Area chart, accent fill 0.3 opacity, no gradient  │
+│ brutalist card, border-thicker                    │
+└───────────────────────────────────────────────────┘
+
+[RECENT SIGNUPS TABLE: full grid | avatar (square) | name | email mono | plan badge | date mono]
+
+[FUNNEL: horizontal bar chart — trial/active/churned with thick bars]
+```
+
+### MRR hero card
+```css
+.mrr-hero {
+  background: var(--bg-surface);
+  border: var(--border-thickest);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-8) var(--space-10);
+  position: relative;
+}
+
+.mrr-hero__label {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2);
+}
+
+.mrr-hero__value {
+  font-family: var(--font-mono);
+  font-size: var(--text-4xl);
+  font-weight: var(--weight-extrabold);
+  color: var(--text-heading);
+  letter-spacing: var(--tracking-tight);
+}
+
+/* Position sticker badge top-right */
+.mrr-hero__sticker {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+}
+```
+
+---
+
+## Preset 3 — Project Tracker Dashboard
+
+For: task management, sprint tracking, team workload, project status.
+Expression mode: Indie Product or Dashboard Punk.
+
+### Layout
+```
+[STATUS BADGES STRIP: "[12 TODO]" "[5 IN PROGRESS]" "[28 DONE]" — mono, bordered, full saturation]
+
+┌──────────────────────────┐  ┌────────────────────────────────┐
+│ BURNDOWN CHART           │  │ TEAM WORKLOAD                  │
+│ line chart               │  │ horizontal bar per member      │
+│ ideal vs actual          │  │ thick bars, mono name labels   │
+└──────────────────────────┘  └────────────────────────────────┘
+
+[TASK TABLE: full grid | priority dot | title | assignee avatar square | due date mono | status badge]
+
+[DEADLINE COUNTDOWN: mono bold text-xl "3 DAYS REMAINING" in accent card]
+```
+
+### Status count strip
+```css
+.status-strip {
+  display: flex;
+  gap: 0;
+  border: var(--border-thick);
+  overflow: hidden;
+}
+
+.status-strip__item {
+  flex: 1;
+  padding: var(--space-3) var(--space-4);
+  border-right: var(--border-thick);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-bold);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.status-strip__item:last-child { border-right: none; }
+.status-strip__item--todo     { background: var(--bg-elevated); }
+.status-strip__item--progress { background: var(--semantic-amber-dim); }
+.status-strip__item--done     { background: var(--semantic-green-dim); }
+```
+
+---
+
+## Preset 4 — Content Dashboard
+
+For: blogs, newsletters, media products, content teams tracking performance.
+Expression mode: Indie Product.
+
+### Layout
+```
+[CONTENT STATUS STRIP: sticker badges — "[12 PUBLISHED]" "[4 DRAFT]" "[2 SCHEDULED]"]
+
+┌───────────────────────────────────────────────────────────────┐
+│ CONTENT CALENDAR                                              │
+│ Grid: 7 cols (days), multiple rows (weeks), border all cells  │
+│ Status: colored bg fills (published=green, draft=amber, etc.) │
+└───────────────────────────────────────────────────────────────┘
+
+┌────────────────────┐  ┌───────────────────────────────────────┐
+│ TOP POSTS (7d)     │  │ PERFORMANCE TABLE                     │
+│ rank | title |     │  │ full grid | title mono | views | CTR  │
+│ views mono         │  │ mono numbers throughout               │
+└────────────────────┘  └───────────────────────────────────────┘
+```
+
+### Content calendar cell
+```css
+.cal-cell {
+  border: var(--border-subtle);
+  min-height: 80px;
+  padding: var(--space-2);
+  vertical-align: top;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.cal-cell__date {
+  font-weight: var(--weight-bold);
+  color: var(--text-muted);
+  margin-bottom: var(--space-1);
+}
+
+.cal-item {
+  background: var(--accent-dim);
+  border: var(--border-subtle);
+  padding: 2px var(--space-2);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cal-item--published { background: var(--semantic-green-dim); }
+.cal-item--draft     { background: var(--semantic-amber-dim); }
+.cal-item--scheduled { background: var(--semantic-blue-dim); }
+```
+
+---
+
+## Preset 5 — Monitoring Dashboard
+
+For: system uptime, infrastructure health, alert management, ops tooling.
+Expression mode: Dashboard Punk.
+
+### Layout
+```
+[TOP BAR: last updated "UPDATED 2m AGO" mono | incident count badge | ack button]
+
+[HEALTH BOARD: NxM grid of colored status squares — one per service]
+ → green = healthy, yellow = degraded, red = down
+ → each cell: service name mono text-xs, status dot, p99 mono
+
+┌────────────────────┐  ┌────────────────────┐
+│ LATENCY CHART      │  │ ERROR RATE CHART   │
+│ line, blue         │  │ line, red          │
+│ threshold line:    │  │ thick bars, border │
+│ dashed, red        │  │                    │
+└────────────────────┘  └────────────────────┘
+
+[RESOURCE USAGE: thick progress bars per service — cpu / memory / disk]
+
+[ALERT LOG: mono, timestamped, severity badge, scrollable with border]
+```
+
+### Alert log
+```css
+.alert-log {
+  background: var(--bg-surface);
+  border: var(--border-thicker);
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.alert-item {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-subtle);
+  align-items: start;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.alert-item__time {
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.alert-item__message {
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.alert-item--critical { border-left: 4px solid var(--semantic-red); }
+.alert-item--warning  { border-left: 4px solid var(--semantic-amber); }
+.alert-item--info     { border-left: 4px solid var(--semantic-blue); }
+```

package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md

@@ -0,0 +1,342 @@
+# Design Tokens — Neo-Brutalist UI
+
+Single source of truth for all CSS variables. Apply via `data-theme="light"` / `data-theme="dark"` on the root container.
+
+---
+
+## Font imports
+
+```css
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+```
+
+System fallbacks (no external fonts):
+```css
+--font-display: "Arial Black", Impact, system-ui, sans-serif;
+--font-body:    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+--font-mono:    "Courier New", Courier, monospace;
+```
+
+---
+
+## Typography
+
+```css
+--font-display: 'Space Grotesk', system-ui, sans-serif;
+  /* Geometric with personality. Not as neutral as Inter, not as dramatic as Clash Display. */
+  /* Alternatives: 'DM Sans', 'Outfit', 'Plus Jakarta Sans' */
+
+--font-body:    'Inter', system-ui, sans-serif;
+
+--font-mono:    'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
+  /* FIRST-CLASS CITIZEN: labels, metadata, badges, status, code, numbers, dates, IDs */
+```
+
+### Font sizes
+
+```css
+--text-xs:   0.75rem;    /* 12px — mono metadata, badges */
+--text-sm:   0.875rem;   /* 14px */
+--text-base: 1rem;       /* 16px */
+--text-lg:   1.25rem;    /* 20px */
+--text-xl:   1.5rem;     /* 24px */
+--text-2xl:  2rem;       /* 32px */
+--text-3xl:  2.5rem;     /* 40px */
+--text-4xl:  3.5rem;     /* 56px — hero headlines */
+--text-5xl:  5rem;       /* 80px — manifesto/zine statements */
+```
+
+### Font weights
+
+```css
+--weight-regular:    400;
+--weight-medium:     500;
+--weight-semibold:   600;
+--weight-bold:       700;
+--weight-extrabold:  800;  /* headings in indie/zine modes */
+```
+
+### Letter spacing
+
+```css
+--tracking-tight:  -0.03em;   /* large headings */
+--tracking-normal:  0em;
+--tracking-wide:    0.05em;   /* mono labels, uppercase badges */
+--tracking-wider:   0.1em;    /* uppercase section titles */
+```
+
+---
+
+## Colors — Light Theme (default)
+
+```css
+[data-theme="light"] {
+  /* Backgrounds */
+  --bg-void:     #F5F0E8;   /* warm off-white — newspaper feel, page background */
+  --bg-base:     #FFFDF5;   /* cream white — main content area */
+  --bg-surface:  #FFFFFF;   /* pure white — cards, panels */
+  --bg-elevated: #F5F0E8;   /* off-white — hover state, nested sections */
+  --bg-overlay:  #E8E0D0;   /* deeper off-white — modals overlay, popovers */
+
+  /* Text */
+  --text-heading:   #1A1A1A;
+  --text-primary:   #2A2A2A;
+  --text-secondary: #666666;
+  --text-muted:     #999999;
+  --text-disabled:  #BBBBBB;
+
+  /* Primary accent — yellow is THE brutalist accent */
+  --accent:          #FACC15;            /* yellow-400 */
+  --accent-strong:   #EAB308;            /* yellow-500 — pressed state */
+  --accent-dim:      rgba(250,204,21,.20);
+  --accent-hover:    #EAB308;
+  --accent-contrast: #1A1A1A;            /* black text on yellow bg */
+
+  /* Secondary accents — for Creative Playground mode */
+  --accent-red:    #EF4444;
+  --accent-blue:   #3B82F6;
+  --accent-green:  #22C55E;
+  --accent-pink:   #EC4899;
+  --accent-orange: #F97316;
+
+  /* Borders — THE most important token in this skill */
+  --border-subtle:   1px solid #1A1A1A;     /* dividers, table cell borders */
+  --border-thick:    2px solid #1A1A1A;     /* default interactive border */
+  --border-thicker:  3px solid #1A1A1A;     /* cards, buttons, feature elements */
+  --border-thickest: 4px solid #1A1A1A;     /* hero cards, main CTAs */
+
+  /* Border color only (for custom uses) */
+  --border-color:        #1A1A1A;
+  --border-color-subtle: #CCCCCC;
+
+  /* Semantic */
+  --semantic-green:     #22C55E;
+  --semantic-green-dim: rgba(34,197,94,.15);
+  --semantic-amber:     #F59E0B;
+  --semantic-amber-dim: rgba(245,158,11,.15);
+  --semantic-red:       #EF4444;
+  --semantic-red-dim:   rgba(239,68,68,.15);
+  --semantic-blue:      #3B82F6;
+  --semantic-blue-dim:  rgba(59,130,246,.15);
+}
+```
+
+---
+
+## Colors — Dark Theme
+
+```css
+[data-theme="dark"] {
+  /* Backgrounds */
+  --bg-void:     #111111;
+  --bg-base:     #1A1A1A;
+  --bg-surface:  #242424;
+  --bg-elevated: #2E2E2E;
+  --bg-overlay:  #383838;
+
+  /* Text */
+  --text-heading:   #FFFFFF;
+  --text-primary:   #E0E0E0;
+  --text-secondary: #999999;
+  --text-muted:     #666666;
+  --text-disabled:  #444444;
+
+  /* Primary accent — yellow stays strong in dark */
+  --accent:          #FACC15;
+  --accent-strong:   #EAB308;
+  --accent-dim:      rgba(250,204,21,.20);
+  --accent-hover:    #EAB308;
+  --accent-contrast: #1A1A1A;
+
+  /* Secondary accents — brighter in dark (but NOT neon — saturated and grounded) */
+  --accent-red:    #F87171;
+  --accent-blue:   #60A5FA;
+  --accent-green:  #4ADE80;
+  --accent-pink:   #F472B6;
+  --accent-orange: #FB923C;
+
+  /* Borders — inverted: light on dark */
+  --border-subtle:   1px solid #444444;
+  --border-thick:    2px solid #E0E0E0;
+  --border-thicker:  3px solid #E0E0E0;
+  --border-thickest: 4px solid #E0E0E0;
+
+  --border-color:        #E0E0E0;
+  --border-color-subtle: #444444;
+
+  /* Semantic */
+  --semantic-green:     #4ADE80;
+  --semantic-green-dim: rgba(74,222,128,.15);
+  --semantic-amber:     #FCD34D;
+  --semantic-amber-dim: rgba(252,211,77,.15);
+  --semantic-red:       #F87171;
+  --semantic-red-dim:   rgba(248,113,113,.15);
+  --semantic-blue:      #60A5FA;
+  --semantic-blue-dim:  rgba(96,165,250,.15);
+}
+```
+
+---
+
+## Shadows — Hard Offset (the most distinctive token)
+
+```css
+/* ZERO BLUR. Solid offset. Non-negotiable. */
+
+/* Light theme shadows — black offset */
+--shadow-sm:    2px 2px 0 var(--border-color);   /* small elements */
+--shadow-md:    4px 4px 0 var(--border-color);   /* cards, buttons */
+--shadow-lg:    6px 6px 0 var(--border-color);   /* featured cards, hover state */
+--shadow-xl:    8px 8px 0 var(--border-color);   /* hero CTA, main action */
+
+/* Colored shadows — for Creative Playground mode */
+--shadow-accent: 4px 4px 0 var(--accent);
+--shadow-red:    4px 4px 0 var(--accent-red);
+--shadow-blue:   4px 4px 0 var(--accent-blue);
+--shadow-green:  4px 4px 0 var(--accent-green);
+```
+
+Direction rule: **all hard shadows go bottom-right** (positive x, positive y). Never mix directions on the same page.
+
+In dark theme, `--border-color` resolves to `#E0E0E0`, so shadows automatically invert to light-on-dark.
+
+---
+
+## Border Radius — Extremes Only
+
+```css
+--radius-none: 0;            /* DEFAULT — cards, inputs, buttons, most elements */
+--radius-sm:   0.25rem;      /* 4px — used rarely, only for very small inner elements */
+--radius-md:   0.375rem;     /* 6px — inputs optionally, max allowed before "too normal" */
+--radius-full: 9999px;       /* pills — badges, tags, status dots, pill buttons */
+```
+
+**Rule:** use `--radius-none` (0) or `--radius-full` (9999px). Nothing between 6px and 9998px. The extreme contrast between square and pill is part of the aesthetic. `8–12px` radius is "clean-saas territory" — forbidden here.
+
+---
+
+## Spacing
+
+4px base rhythm. 8px standard unit.
+
+```css
+--space-0:  0;
+--space-1:  0.25rem;   /* 4px */
+--space-2:  0.5rem;    /* 8px */
+--space-3:  0.75rem;   /* 12px */
+--space-4:  1rem;      /* 16px */
+--space-5:  1.25rem;   /* 20px */
+--space-6:  1.5rem;    /* 24px */
+--space-8:  2rem;      /* 32px */
+--space-10: 2.5rem;    /* 40px */
+--space-12: 3rem;      /* 48px */
+--space-16: 4rem;      /* 64px */
+--space-20: 5rem;      /* 80px — section gap minimum */
+--space-24: 6rem;      /* 96px */
+--space-28: 7rem;      /* 112px */
+--space-32: 8rem;      /* 128px */
+```
+
+Section gaps: `--space-20` to `--space-28` between major page sections. Generous whitespace makes the thick borders breathe.
+
+---
+
+## Control Heights — Chunky (larger than other skills)
+
+```css
+--control-xs: 2rem;      /* 32px */
+--control-sm: 2.25rem;   /* 36px */
+--control-md: 2.75rem;   /* 44px — DEFAULT input/button */
+--control-lg: 3.25rem;   /* 52px — primary CTA button */
+```
+
+Brutalist buttons are **chunky, not elegant**. The extra height reinforces the physical, constructed feel.
+
+---
+
+## Decorative Patterns
+
+One pattern maximum per page. Applied to the background of ONE section only — never the whole page.
+
+```css
+/* Dots */
+.pattern-dots {
+  background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
+  background-size: 20px 20px;
+  opacity: 0.15;
+}
+
+/* Horizontal lines */
+.pattern-lines {
+  background-image: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 19px,
+    var(--border-color) 19px,
+    var(--border-color) 20px
+  );
+  opacity: 0.12;
+}
+
+/* Full grid */
+.pattern-grid {
+  background-image:
+    linear-gradient(var(--border-color) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
+  background-size: 20px 20px;
+  opacity: 0.10;
+}
+
+/* Checkerboard */
+.pattern-checks {
+  background-image: repeating-conic-gradient(var(--bg-elevated) 0% 25%, transparent 0% 50%);
+  background-size: 20px 20px;
+}
+```
+
+---
+
+## Z-index layers
+
+```css
+--z-base:    0;
+--z-raised:  1;
+--z-dropdown: 100;
+--z-sticky:  200;
+--z-overlay: 300;
+--z-modal:   400;
+--z-toast:   500;
+```
+
+---
+
+## Breakpoints
+
+```css
+--breakpoint-sm:  640px;
+--breakpoint-md:  768px;
+--breakpoint-lg:  1024px;   /* sidebar collapses to hamburger below this */
+--breakpoint-xl:  1280px;
+--breakpoint-2xl: 1536px;
+```
+
+---
+
+## Chart Color Palette
+
+```css
+--chart-1: var(--accent);          /* #FACC15 — yellow — primary series */
+--chart-2: var(--accent-red);      /* red — negative / error */
+--chart-3: var(--accent-blue);     /* blue — secondary series */
+--chart-4: var(--accent-green);    /* green — positive / success */
+--chart-5: var(--accent-orange);   /* orange — warning / tertiary */
+--chart-6: var(--border-color);    /* black/white — neutral baseline */
+```
+
+Chart rules:
+- Bar charts: `border: var(--border-subtle)` on each bar, flat fill (no gradient), `--radius-none`
+- Line charts: `stroke-width: 2.5px` minimum (thicker than other skills), solid dot markers (not hollow)
+- Area charts: flat fill at `opacity: 0.3` (no gradient)
+- Grid lines: `--border-subtle`, full grid visible
+- Axis labels: `font-family: var(--font-mono)`, `font-size: var(--text-xs)`