@jaimevalasek/aioson 1.3.0 → 1.4.0

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

@@ -0,0 +1,184 @@
+---
+name: design-dashboards
+description: Dashboard-specific presets and compositions for the Cognitive Core design system — premium control center, admin analytics, ops cockpit, and CRM layouts. Load foundations, components, and patterns first. Use when building dashboards, admin panels, monitoring tools, or any data-heavy operational interface.
+---
+
+# Dashboards — Preset Compositions
+
+Requires: `foundations/SKILL.md` + `components/SKILL.md` + `patterns/SKILL.md` loaded first.
+
+These presets combine the patterns and components into ready-to-build dashboard configurations. Each preset defines what components go where, what data shape to expect, and how to adapt the layout to a specific domain.
+
+## Preset 1: Premium Control Center
+
+The "Mentes Sintéticas" signature layout. Command center aesthetic with DNA panels and mode indicators.
+
+**Best for:** AI systems, monitoring, intelligence platforms, premium SaaS.
+
+**Default theme:** Dark.
+
+**Layout composition:**
+```
+TOP BAR: Logo + COGNITIVE CORE subtitle + Nav + Theme Toggle + [● SYSTEM OPERATIONAL] badge
+STATS ROW: 4 stat cards with large numbers
+TAB BAR: Geral | DNA | Comunicação | História | Artefatos | Prompts | Domínio
+SIDEBAR + CONTENT:
+  Content top row: [DNA Panel (2/3)] + [Mode Panel (1/3)]
+  Section "Sistema Operacional": 4-col info card grid
+  Section "Arsenal": 4-col info card grid with quotes
+```
+
+**Domain mapping template:**
+
+| Generic Concept | Your Domain |
+|---|---|
+| Entity (Alex Hormozi) | Main subject: product, user, project |
+| Apex Score (8.5/100) | Primary metric |
+| Neural Data (9 files) | Data volume / complexity |
+| Top Skill | Primary category or strength |
+| DNA Cirúrgico (sliders) | Attribute breakdown (3-5 axes) |
+| Power Words (tags) | Tags, features, capabilities |
+| Mode Panel | Current status / active mode |
+| Sistema Operacional (cards) | Capabilities, features, rules |
+| Arsenal Retórico (cards w/ quotes) | Tools, strategies, items with descriptions |
+
+**How to adapt:**
+1. Replace entity name/avatar/role with your domain's primary subject
+2. Map 3-4 key metrics to stat cards
+3. Pick 3-5 slider axes for the DNA Panel (always with mono labels, progress bars, and tag groups)
+4. Write 4+ system cards (icon + title + description + optional quote)
+5. The Mode Panel always shows current active state/mode
+
+## Preset 2: Admin Analytics
+
+Focused on data visualization and metrics tracking.
+
+**Best for:** SaaS admin, e-commerce analytics, marketing dashboards.
+
+**Default theme:** Dark (light works well too).
+
+**Layout composition:**
+```
+TOP BAR: Logo + App Name + Nav + Filters + Theme Toggle
+STATS ROW: 4-6 stat cards (revenue, users, conversion, growth)
+TAB BAR: Overview | Revenue | Users | Products | Settings
+NO SIDEBAR (full-width content)
+CONTENT:
+  Row 1: [Chart card (2/3)] + [Top items list card (1/3)]
+  Row 2: 3-col stat breakdown (stat cards with trend indicators)
+  Section "Recent Activity": Data table with sortable headers
+  Section "Quick Actions": 4-col info cards
+```
+
+**Key differences from Control Center:**
+- No sidebar — tabs control all navigation
+- Data table replaces card grid for transactional data
+- Chart placeholder cards (note: describe chart intent, use recharts/Chart.js if available)
+- Trend indicators on stat cards: `↑ 12%` in green or `↓ 3%` in red
+
+**Stat card with trend — structure:**
+```
+┌──────────────────┐
+│ REVENUE          │ ← mono, text-xs, text-muted
+│ R$ 45k           │ ← text-3xl, weight-bold, text-heading
+│ ↑ 12.5%          │ ← text-sm, semantic-green, weight-semibold
+└──────────────────┘
+```
+Trend color: `var(--semantic-green)` for positive, `var(--semantic-red)` for negative.
+
+## Preset 3: Ops Cockpit
+
+Real-time monitoring with status indicators and alert feeds.
+
+**Best for:** DevOps, server monitoring, IoT, logistics tracking.
+
+**Default theme:** Dark (strongly recommended).
+
+**Layout composition:**
+```
+TOP BAR: Logo + OPS COCKPIT subtitle + Nav + Alert counter badge + Theme Toggle + [● OPERATIONAL] / [⚠ DEGRADED] badge
+STATS ROW: Status-colored stat cards (green = healthy, red = alerts, amber = warnings)
+NO TAB BAR (single view, dense)
+SIDEBAR (compact, 180px):
+  Section: SYSTEMS — list of systems with status dots (●green, ●red, ●amber)
+  Section: FILTERS — checkbox filters
+CONTENT (3-column grid):
+  Col 1: Alert feed (stacked event cards, newest first)
+  Col 2: System status cards (grid of status cards with pulse animation)
+  Col 3: Quick stats + Mode Panel (stacked)
+```
+
+**Alert feed card:**
+```
+┌───────────────────────────────────────┐
+│ ⚠  12:34  [CRITICAL badge]          │
+│ Server db-prod-01 CPU at 98%         │
+│ Triggered by: auto-monitor            │
+└───────────────────────────────────────┘
+```
+- Left border: 3px solid `var(--semantic-red)` (or amber/green)
+- Timestamp: mono, `--text-xs`, `--text-muted`
+
+**Status card with pulse:**
+```
+┌──────────────────┐
+│  MONO LABEL      │
+│  ●  ONLINE       │ ← green dot with pulseGlow animation
+│  CPU: 45%  ███░  │
+│  MEM: 72%  █████ │
+│  DISK: 31% ██░░  │
+└──────────────────┘
+```
+
+## Preset 4: CRM / Contact Manager
+
+Entity-centric with list-detail split view.
+
+**Best for:** CRM, contact management, customer support, HR.
+
+**Default theme:** Light (dark optional).
+
+**Layout composition:**
+```
+TOP BAR: Logo + CRM subtitle + Nav + Search input + Theme Toggle
+TAB BAR: Contacts | Companies | Deals | Pipeline | Settings
+LIST-DETAIL SPLIT:
+  List (340px): Contact cards (avatar 40px + name + role + status badge)
+  Detail: Profile Header (compact) + Stat cards + Sub-tabs (Info | History | Notes)
+```
+
+**Contact list item:**
+```
+┌──────────────────────────────────────┐
+│ [Avatar 40px]  Name               ● │
+│                Role, Company         │
+│                Last: 2 days ago      │
+└──────────────────────────────────────┘
+```
+Active: `border-left: 3px solid var(--accent)`, `background: var(--bg-elevated)`
+
+## How an Agent Uses a Preset
+
+1. **User says:** "Build me an inventory management dashboard"
+2. **Agent reads:** `design/SKILL.md` → classifies as "Dashboard"
+3. **Agent reads:** `foundations/SKILL.md` → gets CSS variables
+4. **Agent reads:** `components/SKILL.md` → gets building blocks
+5. **Agent reads:** `patterns/SKILL.md` → gets Dashboard Shell layout
+6. **Agent reads:** `dashboards/SKILL.md` → picks **Premium Control Center** preset
+7. **Agent maps domain:**
+   - Entity → Product
+   - Apex Score → Stock Health Score
+   - DNA Panel → Product metrics (stock level, turnover, margin)
+   - System Cards → Features (auto-restock, alerts, tracking, sync)
+   - Mode Panel → "Gestão Inteligente" / current operational mode
+8. **Agent builds** the interface using all tokens and patterns, in whatever technology the agent is targeting
+
+## Mixing Presets
+
+Presets can be combined. Common mixes:
+
+- **Control Center + Analytics**: DNA panels at top, data tables below
+- **Analytics + CRM**: Stats row + split view with table on left, detail on right
+- **Ops Cockpit + Control Center**: Alert feed sidebar + Mode Panel + DNA metrics
+
+Always use the Dashboard Shell from patterns as the outer frame.

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

@@ -0,0 +1,250 @@
+---
+name: design-foundations
+description: Core design tokens for the Cognitive Core visual identity — color palette, typography, spacing, border radius, shadows, and dual dark/light theme CSS variables. This is the base layer that ALL other design modules depend on. Load this FIRST before any other design module.
+---
+
+# Foundations — Design Tokens
+
+This module defines the visual primitives. Every other module depends on these CSS variables.
+
+## Google Fonts
+
+Always include first:
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+```
+
+## Complete CSS Variables
+
+Include this full block in every project. The `data-theme` attribute switches all values automatically.
+
+```css
+/* ═══ DARK THEME ═══ */
+[data-theme="dark"] {
+  --bg-void: #060910;
+  --bg-base: #0B0F15;
+  --bg-surface: #111827;
+  --bg-elevated: #1A2332;
+  --bg-overlay: #243044;
+
+  --border-subtle: rgba(255,255,255,0.06);
+  --border-medium: rgba(255,255,255,0.10);
+  --border-strong: rgba(255,255,255,0.16);
+  --border-accent: rgba(34,211,238,0.3);
+  --border-accent-strong: rgba(34,211,238,0.6);
+
+  --text-primary: #E5E7EB;
+  --text-secondary: #9CA3AF;
+  --text-muted: #6B7280;
+  --text-accent: #22D3EE;
+  --text-heading: #F9FAFB;
+  --text-inverse: #111827;
+
+  --accent: #22D3EE;
+  --accent-dim: rgba(14,116,144,0.3);
+  --accent-glow: rgba(34,211,238,0.15);
+  --accent-hover: #06B6D4;
+  --accent-subtle: rgba(34,211,238,0.08);
+
+  --semantic-green: #10B981;
+  --semantic-green-dim: rgba(6,95,70,0.4);
+  --semantic-red: #EF4444;
+  --semantic-red-dim: rgba(153,27,27,0.4);
+  --semantic-amber: #F59E0B;
+  --semantic-amber-dim: rgba(146,64,14,0.4);
+  --semantic-blue: #3B82F6;
+  --semantic-blue-dim: rgba(37,99,235,0.3);
+  --semantic-purple: #8B5CF6;
+  --semantic-purple-dim: rgba(109,40,217,0.3);
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+  --shadow-glow: 0 0 20px rgba(34,211,238,0.1), 0 0 6px rgba(34,211,238,0.05);
+  --shadow-glow-strong: 0 0 30px rgba(34,211,238,0.2), 0 0 10px rgba(34,211,238,0.1);
+  --shadow-glow-accent: 0 0 40px rgba(34,211,238,0.15);
+}
+
+/* ═══ LIGHT THEME ═══ */
+[data-theme="light"] {
+  --bg-void: #F1F5F9;
+  --bg-base: #F8FAFC;
+  --bg-surface: #FFFFFF;
+  --bg-elevated: #F1F5F9;
+  --bg-overlay: #E2E8F0;
+
+  --border-subtle: rgba(0,0,0,0.06);
+  --border-medium: rgba(0,0,0,0.10);
+  --border-strong: rgba(0,0,0,0.16);
+  --border-accent: rgba(8,145,178,0.25);
+  --border-accent-strong: rgba(8,145,178,0.5);
+
+  --text-primary: #334155;
+  --text-secondary: #64748B;
+  --text-muted: #94A3B8;
+  --text-accent: #0891B2;
+  --text-heading: #0F172A;
+  --text-inverse: #F9FAFB;
+
+  --accent: #0891B2;
+  --accent-dim: rgba(8,145,178,0.10);
+  --accent-glow: rgba(8,145,178,0.08);
+  --accent-hover: #0E7490;
+  --accent-subtle: rgba(8,145,178,0.04);
+
+  --semantic-green: #059669;
+  --semantic-green-dim: rgba(5,150,105,0.10);
+  --semantic-red: #DC2626;
+  --semantic-red-dim: rgba(220,38,38,0.10);
+  --semantic-amber: #D97706;
+  --semantic-amber-dim: rgba(217,119,6,0.10);
+  --semantic-blue: #2563EB;
+  --semantic-blue-dim: rgba(37,99,235,0.10);
+  --semantic-purple: #7C3AED;
+  --semantic-purple-dim: rgba(124,58,237,0.10);
+
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+  --shadow-glow: 0 2px 8px rgba(8,145,178,0.08), 0 1px 3px rgba(0,0,0,0.06);
+  --shadow-glow-strong: 0 4px 16px rgba(8,145,178,0.12);
+  --shadow-glow-accent: 0 0 30px rgba(8,145,178,0.08);
+}
+
+/* ═══ SHARED (both themes) ═══ */
+[data-theme="dark"], [data-theme="light"] {
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --font-body: 'Inter', system-ui, sans-serif;
+  --font-display: 'Inter', system-ui, sans-serif;
+
+  --text-xs: 0.675rem;   /* 10.8px — micro labels */
+  --text-sm: 0.75rem;    /* 12px */
+  --text-base: 0.875rem; /* 14px — default body */
+  --text-lg: 1rem;       /* 16px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 2rem;      /* 32px */
+  --text-4xl: 2.75rem;   /* 44px */
+  --text-5xl: 3.5rem;    /* 56px — hero headings */
+
+  --weight-light: 300;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-black: 900;
+
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.1em;
+  --tracking-widest: 0.15em;
+
+  --leading-none: 1;
+  --leading-tight: 1.1;
+  --leading-snug: 1.3;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  --space-0: 0;
+  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
+  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
+  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
+  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
+
+  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
+  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
+
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  --transition-theme: background 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
+
+  --z-base: 0; --z-elevated: 10; --z-dropdown: 20;
+  --z-sticky: 30; --z-modal: 50; --z-toast: 60;
+}
+```
+
+## Typography Patterns
+
+These are the recurring text styles. Apply them directly — don't create CSS classes.
+
+### Mono Label (most distinctive element of the identity)
+```
+font-family: var(--font-mono)
+font-size: var(--text-xs)
+font-weight: var(--weight-semibold)
+letter-spacing: var(--tracking-widest)
+text-transform: uppercase
+color: var(--text-secondary)
+```
+Used for: section headers, category labels, stat labels, nav labels, badge text, timestamps, IDs.
+
+### Display Heading
+```
+font-family: var(--font-display)
+font-weight: var(--weight-black)
+letter-spacing: var(--tracking-tight)
+color: var(--text-heading)
+line-height: var(--leading-tight)
+```
+Sizes: `--text-5xl` (hero), `--text-3xl` (page title), `--text-2xl` (section), `--text-xl` (card title).
+
+### Stat Number
+```
+font-family: var(--font-body)
+font-size: var(--text-4xl)
+font-weight: var(--weight-bold)
+color: var(--text-heading)
+line-height: var(--leading-none)
+```
+Pair with a suffix span: `font-size: var(--text-lg); color: var(--text-muted)`.
+
+### Body Text
+```
+font-family: var(--font-body)
+font-size: var(--text-base)
+color: var(--text-primary)
+line-height: var(--leading-relaxed)
+```
+
+### Accent Link
+```
+color: var(--text-accent)
+font-weight: var(--weight-medium)
+text-decoration: none
+```
+
+## Visual Direction
+
+### For Dashboards / Admin
+- Dense, compact spacing
+- Dark theme default
+- Heavy use of mono labels
+- Card grids for data
+- Stat cards with large numbers
+
+### For Frontpages / Landing Pages
+- Generous whitespace (use `--space-16` to `--space-24` between sections)
+- Light theme default (dark as option)
+- Hero section with `--text-5xl` heading
+- Mix of display headings + body text
+- Cards used for features/benefits
+- Full-width sections with alternating backgrounds
+
+### For Institutional / Corporate
+- Clean, structured
+- Light theme default
+- Professional spacing
+- Emphasis on readability
+- Subtle accent usage
+- Cards for team, services, values
+
+## Non-Negotiable Rules
+
+1. **Never pure black or white text** — always use the CSS variables
+2. **Mono labels on every section** — this is the identity signature
+3. **Three depth levels minimum** — void → base → surface (or base → surface → elevated)
+4. **Teal/cyan is the only accent** — never change the primary accent color
+5. **JetBrains Mono + Inter** — never use other fonts
+6. **Theme transition** — always add `transition: var(--transition-theme)` to themed containers

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

@@ -0,0 +1,197 @@
+---
+name: design-motion
+description: Animation and motion patterns for the Cognitive Core design system — entrance animations, hover effects, loading states, scroll reveals, theme transitions, and micro-interactions. Load foundations first. Use when building pages that need animation polish, especially landing pages, frontpages, and interactive dashboards.
+---
+
+# Motion — Animation System
+
+Requires: `foundations/SKILL.md` loaded first.
+
+Motion in Cognitive Core is **purposeful and restrained**. Dashboards use minimal motion (fast transitions, no flashy animations). Landing pages and frontpages use more dramatic entrances and scroll effects.
+
+**Note:** CSS keyframes and transition values below are universal. Implementation examples (event handlers, observers) are illustrative — adapt to whatever framework the agent targets.
+
+## Principles
+
+1. **Functional first** — Every animation communicates state change or hierarchy
+2. **Fast transitions** — UI state changes: 150ms. Theme changes: 250ms. Entrances: 400-600ms.
+3. **Ease curves** — Default: `ease`. Entrances: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth decelerate)
+4. **No bounce, no elastic** — This is a command center, not a toy
+
+## CSS Keyframes
+
+Include these in your `<style>` block:
+
+```css
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
+  50% { box-shadow: var(--shadow-glow-strong); }
+}
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes progressFill {
+  from { width: 0%; }
+}
+@keyframes countUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+
+## Entrance Patterns
+
+### Page Load Sequence (staggered)
+
+Apply to dashboard elements in this order, using `animation-delay`:
+
+```
+Top bar:      fadeInDown    0ms     300ms duration
+Stats row:    fadeInUp      100ms   400ms duration (each card +80ms delay)
+Tab bar:      fadeIn        250ms   300ms
+Sidebar:      slideInLeft   200ms   400ms
+Content:      fadeInUp      350ms   500ms (each card in grid +60ms stagger)
+```
+
+**Stagger formula:** For each item at index `i`, apply `animation-delay: base + (i × step)ms`. Typical values: base = 350ms, step = 60ms.
+
+```css
+/* Example: stagger cards in a grid */
+.card:nth-child(1) { animation-delay: 350ms; }
+.card:nth-child(2) { animation-delay: 410ms; }
+.card:nth-child(3) { animation-delay: 470ms; }
+/* ... pattern: 350 + (n × 60) */
+```
+
+### Landing Page Hero Entrance
+
+```
+Mono label:    fadeInUp    0ms      500ms
+Heading:       fadeInUp    150ms    600ms
+Subtitle:      fadeInUp    300ms    500ms
+CTA buttons:   fadeInUp    450ms    500ms
+```
+
+### Modal Entrance
+
+```css
+.modal-backdrop { animation: fadeIn 200ms ease both; }
+.modal-content { animation: scaleIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+```
+
+## Hover Effects
+
+### Card Hover (default for all cards)
+```css
+.card {
+  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+.card:hover {
+  border-color: var(--border-medium);
+  box-shadow: var(--shadow-glow);
+  transform: translateY(-2px);
+}
+```
+
+### Button Hover
+Primary: darken background. Secondary: accent border + accent text.
+```
+transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+```
+
+### Link Hover
+```
+color: var(--text-accent) → var(--accent-hover)
+transition: color 150ms ease
+```
+
+### Tab Hover
+Non-active tab: `background: var(--bg-elevated)`, `border-radius: var(--radius-md) var(--radius-md) 0 0`
+
+### Sidebar Item Hover
+`background: var(--bg-elevated)`, `color: var(--text-primary)`
+
+## Loading States
+
+### Skeleton Loading (shimmer)
+```css
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-overlay) 50%, var(--bg-elevated) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+/* Apply with specific height/width per placeholder element */
+```
+
+### Pulse Glow (for Mode Panel when "active")
+```css
+animation: pulseGlow 3s ease-in-out infinite;
+```
+
+### Progress Bar Animation
+When progress bars first appear:
+```css
+animation: progressFill 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
+```
+
+### Stat Number Count-up
+```css
+animation: countUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
+```
+
+## Theme Transition
+
+When toggling dark/light:
+```css
+transition: var(--transition-theme);
+/* = background 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease */
+```
+
+Apply to ALL themed containers.
+
+## Scroll-Triggered Animations (Landing Pages)
+
+Use IntersectionObserver (or framework equivalent) to trigger entrance animations when elements scroll into view.
+
+**Behavior spec:**
+- Observe each section/card with `threshold: 0.15`
+- On intersect: transition from `opacity: 0; transform: translateY(24px)` to `opacity: 1; transform: translateY(0)`
+- Duration: `600ms`, curve: `cubic-bezier(0.16, 1, 0.3, 1)`
+- Stagger delay per item: `+80ms`
+- Fire once — disconnect observer after triggering
+
+## When to Use What
+
+| Context | Motion Level | Techniques |
+|---|---|---|
+| Dashboard | Minimal | Card hover, tab switch, theme transition, progress bar fill |
+| Landing page | Moderate | Staggered entrances, scroll reveals, hero sequence, card hovers |
+| Frontpage | Moderate | Hero entrance, scroll reveals, CTA glow pulse |
+| Modal/Detail | Light | scaleIn entrance, fadeIn backdrop |
+| Loading state | Ambient | Skeleton shimmer, pulse glow |