@jaimevalasek/aioson 1.3.0 → 1.4.0

package/template/.aioson/skills/design/premium-command-center-ui/references/visual-system.md

@@ -0,0 +1,215 @@
+# Visual System — Premium Command Center UI
+
+> Extracted from the real AIOS Dashboard implementation. Preserves the aurora-glass premium command-center language.
+
+This is not a generic dark dashboard guide. It captures the concrete moves that produce the premium operational feel:
+
+- Tri-rail shell: left navigation, center workspace, right activity rail
+- Aurora-glass surfaces with strong contrast and restrained semantic color
+- Compact density tuned for operational reading, not marketing whitespace
+- Search-first interaction via top search bar + command palette
+- Contextual right rail with status / history / metrics tabs
+- Page archetypes built around runtime priority, not equal-weight card walls
+
+---
+
+## Foundation — dark graphite
+
+```
+Background base    : #0b1015  (deep graphite)
+Background surface : #10161d  (panel, card surfaces)
+Background elevated: #151c24  (modals, dropdowns, hover states)
+Background sunken  : #080c11  (inputs, inset areas)
+
+Foreground primary : #f3f7fb
+Foreground secondary: #b7c2cf
+Foreground muted   : #7f8b99
+Foreground faint   : #4a5568  (decorative only)
+
+Border default     : rgba(255,255,255,0.08)
+Border strong      : rgba(255,255,255,0.15)
+Border accent      : rgba(99,179,237,0.30)
+
+Brand accent       : desaturated blue-teal family (never neon)
+Accent light       : #63b3ed
+Accent muted       : #4a90a4
+
+Semantic green     : #38a169
+Semantic amber     : #d97706
+Semantic red       : #e53e3e
+Semantic blue      : #4299e1
+```
+
+Aurora accent — use sparingly, never everywhere:
+```css
+/* Aurora field on page background, not on every card */
+.aurora-field {
+  background: radial-gradient(ellipse 1200px 800px at 20% 20%,
+    rgba(99,179,237,0.04), transparent 60%);
+  pointer-events: none;
+  position: fixed; inset: 0; z-index: 0;
+}
+```
+
+---
+
+## Typography
+
+- **Heading font**: Clean system grotesk or neutral premium sans (Geist, Manrope, IBM Plex Sans, or system-ui)
+- **Body font**: Same family as heading at regular weight
+- **Mono**: Reserved for operational metadata, IDs, code, timestamps — never prose
+
+```
+Page title     : 20–22px, weight 600, tracking -0.01em
+Section heading: 14–16px, weight 600, tracking -0.01em
+Body           : 13–14px, weight 400, line-height 1.5
+Helper / meta  : 11–12px, weight 400, muted color
+Mono / data    : 11–12px, JetBrains Mono or SF Mono
+```
+
+---
+
+## Spacing
+
+```
+Base: 4px
+Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48
+```
+
+Never use arbitrary values. Every measurement is a multiple of 4.
+
+---
+
+## Admin panel density — settings, config, entity management
+
+The premium command center uses **tight operational spacing** for admin and config screens. These values are concrete — apply them directly.
+
+### Card scale
+
+| Level | Use | Padding | Radius |
+|---|---|---|---|
+| L1 | top-level section card | `16px` | `22px` |
+| L2 | nested card inside L1 | `12px` | `18px` |
+| L3 | inset block, disclosure body, info row | `10px` | `14px` |
+
+Section gap between L1 cards: `12px`.
+
+### Card headers
+
+```
+Eyebrow : font-mono 10–11px  uppercase  letter-spacing: 0.28em  color: muted
+Title   : 15px  font-weight: 600  — max size inside a card
+Meta    : font-mono 10px  truncate single line  — path, ID, workspace name
+```
+
+**No paragraph descriptions inside admin cards.** One eyebrow + one title + optional single-line meta is sufficient. Everything else belongs in a collapsed disclosure or a tooltip.
+
+### Controls in admin context
+
+```
+Input / Select : height 32px  (py-2 px-3)  font-size 12px  border-radius 10–12px
+Label          : font-size 10–11px  margin-bottom 2px
+Button action  : py-2 px-3  font-size 12px  border-radius 10–12px
+Button micro   : py-1 px-2.5  font-size 10–11px  border-radius 10px
+```
+
+### Row items (provider lists, agent lists)
+
+```
+Row padding : py-2 (8px)  divide-y separator
+Name width  : 96px (fixed)  text-xs  font-medium
+Model       : flex-1 truncate  font-mono  font-size 10–11px
+Badges      : px-2 py-0.5  font-size 9–10px
+Edit btn    : px-2.5 py-1  font-size 10–11px
+```
+
+### Entity grids (projects, agents, squads)
+
+Same-type entities go in a grid — never full-width stacked:
+```
+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
+gap: 12px
+Card: rounded-18 p-3
+Card header: name (text-sm semibold) + ID (mono 9px truncate)
+Card badges: px-2 py-0.5 text-[9-10px]
+Card actions: compact row, py-1.5, font-size 10–11px
+```
+
+### Add/Edit forms → Modal pattern
+
+Entity add/edit always opens a modal — not inline expansion:
+```
+Modal: max-w-448px  centered  rounded-22px  p-20px
+Overlay: bg-black/50 backdrop-blur
+Header: eyebrow + title (text-base) + close button (top right)
+Form: single-column grid  gap: 10px
+Submit: full-width  py-2  text-xs
+```
+
+### Disclosure — secondary tools
+
+Sync, cloud connect, advanced settings behind `<details>`:
+```
+Summary: flex row  px-3 py-2.5
+  Left: label (text-xs) + status badge (alinhado / N diffs)
+  Right: action button (micro size)
+Body: border-t px-3 pb-3 pt-2  compact rows
+```
+
+### Anti-patterns — never do this in admin panels
+
+- `padding: 24px` on inner section cards
+- `font-size: 20–24px` headings inside cards
+- Verbose description paragraphs in admin cards
+- Full-width stacked entity cards (projects, providers)
+- Inline accordion for add/edit forms
+- `height: 40px+` inputs/buttons in dense tool contexts
+
+---
+
+## Depth — borders-first
+
+Three surface levels maximum:
+
+```
+Level 0 — base (#0b1015)      : page background
+Level 1 — surface (#10161d)   : cards, panels, nav rail
+Level 2 — elevated (#151c24)  : modals, dropdowns, hover overlays
+```
+
+Rules:
+- Borders separate before shadows
+- One shadow family only: `0 4px 16px rgba(0,0,0,0.32)` — reserved for modals and floating elements
+- No heavy glow effects on cards
+- Aurora fields go on page background, not on individual components
+
+---
+
+## Radius
+
+```
+Sharp  : 6px    (compact elements, badges, tags)
+Medium : 10px   (cards, inputs, buttons)
+Large  : 14px   (panels, modals, sheets)
+```
+
+---
+
+## Control heights
+
+```
+Compact : 28px  (toolbar items, inline actions)
+Default : 34px  (standard controls)
+Tall    : 40px  (primary action buttons)
+```
+
+---
+
+## Signature rules
+
+- Accent stays cool and controlled — no rainbow, no neon
+- Status colors must remain strictly semantic (never decorative)
+- Compact density: operational readout, not marketing whitespace
+- High contrast without overload: borders quietly separate, they do not shout
+- One focal block per screen region
+- Three surface levels max — no more

package/template/.aioson/skills/design-system/SKILL.md

@@ -0,0 +1,92 @@
+---
+name: design
+description: Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.
+---
+
+# Cognitive Core Design System
+
+A modular visual identity system. Agents read THIS file first, then load only the sub-modules needed for the task.
+
+## Architecture
+
+```
+skills/design/
+├── SKILL.md                 ← YOU ARE HERE (router)
+├── foundations/
+│   └── SKILL.md             ← Colors, typography, spacing, themes, CSS variables
+├── components/
+│   └── SKILL.md             ← Cards, tables, sidebars, forms, modals, stats, badges
+├── patterns/
+│   └── SKILL.md             ← Page-level layouts: dashboard, settings, auth, list-detail, frontpage
+├── motion/
+│   └── SKILL.md             ← Animations: entrances, hovers, loading, transitions
+└── dashboards/
+    └── SKILL.md             ← Dashboard presets: control center, analytics, ops cockpit
+```
+
+## How Agents Use This System
+
+### Step 1: Read this file (you're doing it)
+
+### Step 2: Classify the task
+
+Determine what type of UI is being built:
+
+| Task Type | Load These Modules |
+|---|---|
+| **Dashboard / Admin panel** | foundations → components → patterns → dashboards |
+| **Landing page / Frontpage** | foundations → components → patterns → motion |
+| **Institutional / Corporate site** | foundations → components → patterns → motion |
+| **Settings / Config page** | foundations → components → patterns |
+| **Auth page (login/register)** | foundations → components → patterns |
+| **Single component** | foundations → components |
+| **Quick styling fix** | foundations |
+| **Animation work** | foundations → motion |
+
+### Step 3: Read the required modules IN ORDER
+
+Always start with `foundations/SKILL.md` — it has the CSS variables everything else depends on. Then read the others as needed.
+
+### Step 4: Build
+
+Compose the interface using tokens from foundations, building blocks from components, layouts from patterns, and animations from motion. For dashboards, the dashboards module has ready-to-use presets.
+
+## Visual Identity Summary
+
+The Cognitive Core aesthetic has three pillars:
+
+1. **Command Center Authority** — Dense data, monospaced labels, large stat readouts, structured grids
+2. **Premium Refinement** — Layered surfaces (3+ depth levels), subtle borders, teal/cyan accent as the "pulse"
+3. **Structured Hierarchy** — Tabs, sidebars, card grids, section headers with icons, labeled zones
+
+This applies to ALL output types — dashboards get the full treatment, but frontpages and institutional pages use the same typography, color system, and component vocabulary in a more open layout.
+
+## Theme System
+
+Every output supports dark/light toggle via `data-theme` attribute:
+
+```html
+<div data-theme="dark"> <!-- or "light" -->
+```
+
+Toggle the attribute value to switch themes. The mechanism (state, JS toggle, server-side) depends on your stack.
+
+Default to **dark** for dashboards/admin. Default to **light** for frontpages/institutional. Always include a theme toggle.
+
+## Technology Boundary
+
+This skill controls **visual identity only** — colors, typography, spacing, layout structure, component anatomy, and motion behavior. It does NOT dictate:
+
+- Output format (HTML, JSX, Vue, Blade, Svelte, etc.)
+- Framework or library choice
+- Build tooling or bundling
+- File structure or splitting strategy
+
+The agent building the interface decides all technology concerns. This skill provides the **what it should look like**, the agent decides the **how to build it**.
+
+Code examples in sub-modules use inline style objects for clarity. Treat them as **design specifications**, not copy-paste code. Adapt the property names and syntax to whatever technology the agent is targeting.
+
+## Required Assets (all technologies)
+
+- **Fonts**: Google Fonts — JetBrains Mono + Inter (import via CSS `@import` or `<link>` tag)
+- **Icons**: Any icon library. Emoji placeholders in examples are just for illustration.

package/template/.aioson/skills/design-system/components/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: design-components
+description: Reusable UI components for the Cognitive Core design system — cards, tables, sidebars, forms, modals, stats blocks, badges, progress bars, buttons, inputs, and navigation elements. Load foundations/SKILL.md first. Use when building any part of a web interface that needs structured UI elements.
+---
+
+# Components — UI Building Blocks
+
+Requires: `foundations/SKILL.md` loaded first (CSS variables must be present).
+
+All components use CSS variables and adapt to dark/light theme automatically.
+
+**Note on examples:** Code snippets below use inline style objects as a **notation for design specs** — they describe visual properties, not mandate a technology. The agent decides whether to output CSS classes, Tailwind utilities, inline styles, styled-components, or anything else. Read the property-value pairs as a design specification. The shorthand `TT` in examples represents the theme transition: `transition: background 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease`.
+
+## 1. Stat Card
+
+Large numeric readout with mono label. Used in stat rows at top of pages.
+
+```jsx
+<div style={{
+  background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)',
+  borderRadius: 'var(--radius-lg)', padding: 'var(--space-4) var(--space-5)',
+  minWidth: 140, flex: 1, ...TT,
+}}>
+  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)',
+    letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 'var(--space-1)' }}>
+    LABEL
+  </div>
+  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
+    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-4xl)', fontWeight: 700,
+      color: 'var(--text-heading)', lineHeight: 1 }}>42</span>
+    <span style={{ fontSize: 'var(--text-lg)', color: 'var(--text-muted)' }}>/100</span>
+  </div>
+  <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-1)' }}>
+    subtitle text
+  </div>
+</div>
+```
+
+Accent variant: replace `color: 'var(--text-heading)'` with `color: 'var(--semantic-green)'` (or red/amber).
+
+## 2. Card (base)
+
+The fundamental container. Everything lives in cards.
+
+```jsx
+const cardStyle = {
+  background: 'var(--bg-surface)',
+  border: '1px solid var(--border-subtle)',
+  borderRadius: 'var(--radius-lg)',
+  padding: 'var(--space-5)',
+  transition: 'var(--transition-theme), transform 150ms ease',
+};
+// Hover: borderColor → var(--border-medium), boxShadow → var(--shadow-glow), transform → translateY(-1px)
+```
+
+## 3. Info Card (icon + title + description + quote)
+
+Used in grids for features, capabilities, items.
+
+Structure:
+```
+┌─────────────────────────────────┐
+│ 📈  [icon]          Badge text  │ ← header row
+│ Card Title                      │ ← accent color
+│ Description text here that      │ ← secondary color
+│ explains the item.              │
+│ ┃ "Optional quote text"         │ ← muted, left border
+└─────────────────────────────────┘
+```
+
+- Header: flex, space-between. Icon left, badge right (mono, `--text-xs`, muted).
+- Title: `--text-lg`, `--weight-semibold`, `color: var(--text-accent)`
+- Desc: `--text-base`, `--text-secondary`, `line-height: 1.5`
+- Quote: italic, `--text-muted`, `border-left: 2px solid var(--accent-dim)`, `padding-left: var(--space-3)`
+
+## 4. Profile Header
+
+Entity header with avatar, name, role, badges, and stat cards.
+
+Structure:
+```
+┌──────────────────────────────────────────────────────────┐
+│ [Avatar 96px]  BIG NAME          [Badge] [Badge]         │
+│ ID: XXX        Role (italic, accent)                     │
+│                ✦ TAGLINE (mono, xs, muted)                │
+│                                                           │
+│ ┌─StatCard─┐  ┌─StatCard─┐  ┌─StatCard─┐               │
+└──────────────────────────────────────────────────────────┘
+```
+
+- Avatar: `96px`, `border-radius: var(--radius-lg)`, `border: 2px solid var(--border-subtle)`
+- ID: mono, `--text-xs`, absolute positioned below avatar
+- Name: `--text-3xl`, `--weight-black`, `--tracking-tight`, `--text-heading`
+- Role: `color: var(--text-accent)`, `font-style: italic`, `--text-lg`
+- Badges: use Badge component (see below)
+
+## 5. Badge / Chip
+
+Three variants:
+
+**Accent badge** (primary, active states):
+```jsx
+{ background: 'var(--accent-dim)', color: 'var(--accent)', border: '1px solid var(--border-accent)',
+  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 600,
+  letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase',
+  padding: '2px 10px', borderRadius: 'var(--radius-sm)' }
+```
+
+**Outline badge** (neutral tags):
+```jsx
+{ background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-medium)',
+  /* same font styles as accent */ }
+```
+
+**Semantic badge** (status — swap vars):
+- Success: `background: var(--semantic-green-dim)`, `color: var(--semantic-green)`
+- Danger: `var(--semantic-red-dim)`, `var(--semantic-red)`
+- Warning: `var(--semantic-amber-dim)`, `var(--semantic-amber)`
+- Info: `var(--semantic-blue-dim)`, `var(--semantic-blue)`
+
+All include a status dot: `width: 5px, height: 5px, borderRadius: 50%, background: [color]`
+
+## 6. Tab Navigation
+
+```jsx
+<div style={{ display: 'flex', gap: 2, borderBottom: '1px solid var(--border-subtle)', padding: '0 var(--space-6)', overflowX: 'auto' }}>
+  <button style={{
+    fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
+    color: isActive ? 'var(--text-accent)' : 'var(--text-secondary)',
+    background: 'none', border: 'none', padding: 'var(--space-3) var(--space-4)',
+    borderBottom: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+    cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 'var(--space-2)',
+  }}>
+    <span style={{ fontSize: 'var(--text-sm)' }}>icon</span> Label
+  </button>
+</div>
+```
+
+## 7. Sidebar Tree
+
+```
+┌──────────────────┐
+│ SECTION LABEL    │ ← mono, xs, muted, uppercase, tracking-widest
+│  ⊞ Item Active   │ ← bg-surface, border-subtle, text-heading
+│  📊 Item         │ ← text-secondary, transparent bg
+│  💬 Item         │
+│                  │
+│ SECTION LABEL    │
+│  ○ Category      │ ← text-muted or text-accent when active
+│  ● Category (on) │
+└──────────────────┘
+```
+
+Width: `200-220px`. Items: `padding: var(--space-2) var(--space-3)`, `border-radius: var(--radius-md)`.
+
+## 8. Progress Bar
+
+```jsx
+<div style={{ height: 5, background: 'var(--bg-elevated)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
+  <div style={{ height: '100%', borderRadius: 'var(--radius-full)', background: color, width: `${pct}%`, transition: 'width 300ms ease' }} />
+</div>
+```
+
+Colors: `var(--accent)` (default), `var(--semantic-green)`, `var(--semantic-red)`, `var(--semantic-amber)`, `var(--semantic-purple)`.
+
+## 9. Section Header
+
+```jsx
+<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: 'var(--space-6) 0 var(--space-4)' }}>
+  <span style={{ color: 'var(--accent)', fontSize: 'var(--text-lg)' }}>⚡</span>
+  <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 700, color: 'var(--text-heading)', margin: 0 }}>Title</h2>
+</div>
+```
+
+## 10. Mode Panel (accent feature box)
+
+Centered panel with radial glow — used for "operating mode", "status", or a featured CTA.
+
+```
+┌─────────── border-accent ──────────┐
+│         ◆ BADGE PILL              │
+│            [Icon 56px]             │ ← accent border, glow shadow
+│          MONO LABEL               │
+│        Large Title                │
+│       "Subtitle italic"           │
+│   radial-gradient glow behind     │
+└────────────────────────────────────┘
+```
+
+## 11. Top Navigation Bar
+
+```
+┌──────────────────────────────────────────────────────┐
+│ [Logo] AppName     Link  Link  Link     [☀] [Badge] │
+│        SUBTITLE                                       │
+└──────────────────────────────────────────────────────┘
+```
+
+- Background: `var(--bg-void)`, sticky, `z-index: var(--z-sticky)`
+- Logo: `36px`, `background: var(--accent-dim)`, `border: 1px solid var(--accent)`, `border-radius: var(--radius-md)`
+- Brand name: mono, `--weight-bold`, `--text-heading`
+- Subtitle: mono, `--text-xs`, `--text-muted`, uppercase
+- Theme toggle: `36px` button, `var(--bg-surface)`, `var(--border-subtle)`
+
+## 12. Modal / Detail Overlay
+
+- Backdrop: `rgba(0,0,0,0.6)`, centered flex, `z-index: var(--z-modal)`
+- Content: `var(--bg-base)`, `border: 1px solid var(--border-subtle)`, `border-radius: var(--radius-xl)`, `max-width: 700px`
+- Header: padding, border-bottom, flex with close button
+- Body: reuses stat cards, progress bars, badges, section headers
+
+## 13. Data Table
+
+For list views and tabular data:
+
+```
+┌────────────────────────────────────────────────────┐
+│ NAME ▲        CATEGORY    STOCK    STATUS    PRICE │ ← mono header, --text-xs, --text-muted
+├────────────────────────────────────────────────────┤
+│ Product Name  Laptops     23       [●OK]    R$12k │ ← --text-primary, hover row highlight
+│ Product Name  Phones      5        [●Crit]  R$8k  │
+└────────────────────────────────────────────────────┘
+```
+
+- Header row: `background: var(--bg-elevated)`, mono labels
+- Body rows: `border-bottom: 1px solid var(--border-subtle)`, hover: `background: var(--accent-subtle)`
+- Always include sortable headers if data is tabular
+
+## 14. Form Elements
+
+**Input:**
+```jsx
+{ background: 'var(--bg-surface)', border: '1px solid var(--border-medium)',
+  borderRadius: 'var(--radius-md)', padding: 'var(--space-2) var(--space-3)',
+  color: 'var(--text-primary)', fontSize: 'var(--text-base)',
+  fontFamily: 'var(--font-body)', outline: 'none' }
+// Focus: borderColor → var(--border-accent-strong), boxShadow → 0 0 0 3px var(--accent-glow)
+```
+
+**Label:** mono label style (xs, muted, uppercase, tracking-widest). Place above input with `margin-bottom: var(--space-1)`.
+
+**Button primary:**
+```jsx
+{ background: 'var(--accent)', color: 'var(--text-inverse)', border: 'none',
+  borderRadius: 'var(--radius-md)', padding: 'var(--space-2) var(--space-5)',
+  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)', fontWeight: 600,
+  letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase', cursor: 'pointer' }
+// Hover: background → var(--accent-hover)
+```
+
+**Button secondary:**
+```jsx
+{ background: 'transparent', color: 'var(--text-secondary)',
+  border: '1px solid var(--border-medium)', /* rest same as primary */ }
+// Hover: borderColor → var(--border-accent), color → var(--text-accent)
+```
+
+## 15. DNA Panel (Sliders + Tags)
+
+Combined panel with labeled metrics and tag group. The "personality" card of any entity.
+
+```
+┌─────────────────────────────────────────┐
+│ ✦ PANEL TITLE                           │
+│                                          │
+│ LABEL  ███████████████░░░░░  72%        │ ← mono labels, progress bar, value
+│ LABEL  █████████░░░░░░░░░░  58%        │
+│ LABEL  ████████████░░░░░░░  85%        │
+│                                          │
+│ [Badge] [Badge] [Badge] [Badge]         │ ← flex wrap, gap var(--space-2)
+└─────────────────────────────────────────┘
+```
+
+Each row: `display: flex, align-items: center, gap: var(--space-3)`. Label min-width 80px. Progress bar flex:1. Value mono, `--text-sm`.