imhcode 1.0.0

package/skills/network-config-validation/SKILL.md

@@ -0,0 +1,210 @@
+---
+name: network-config-validation
+description: Pre-deployment checks for router and switch configuration, including dangerous commands, duplicate addresses, subnet overlaps, stale references, management-plane risk, and IOS-style security hygiene.
+origin: community
+---
+
+# Network Config Validation
+
+Use this skill to review network configuration before a change window or before
+an automation run touches production devices.
+
+## When to Use
+
+- Reviewing Cisco IOS or IOS-XE style snippets before deployment.
+- Auditing generated config from scripts or templates.
+- Looking for dangerous commands, duplicate IP addresses, or subnet overlaps.
+- Checking whether ACLs, route-maps, prefix-lists, or line policies are referenced
+  but not defined.
+- Building lightweight pre-flight scripts for network automation.
+
+## How It Works
+
+Treat config validation as layered evidence, not as a complete parser. Regex
+checks are useful for pre-flight warnings, but final approval still needs a
+network engineer to review intent, platform syntax, and rollback steps.
+
+Validate in this order:
+
+1. Destructive commands.
+2. Credential and management-plane exposure.
+3. Duplicate addresses and overlapping subnets.
+4. Stale references to ACLs, route-maps, prefix-lists, and interfaces.
+5. Operational hygiene such as NTP, timestamps, remote logging, and banners.
+
+## Dangerous Command Detection
+
+```python
+import re
+
+DANGEROUS_PATTERNS: list[tuple[re.Pattern[str], str]] = [
+    (re.compile(r"\breload\b", re.I), "reload causes downtime"),
+    (re.compile(r"\berase\s+(startup|nvram|flash)", re.I), "erases persistent storage"),
+    (re.compile(r"\bformat\b", re.I), "formats a device filesystem"),
+    (re.compile(r"\bno\s+router\s+(bgp|ospf|eigrp)\b", re.I), "removes a routing process"),
+    (re.compile(r"\bno\s+interface\s+\S+", re.I), "removes interface configuration"),
+    (re.compile(r"\baaa\s+new-model\b", re.I), "changes authentication behavior"),
+    (re.compile(r"\bcrypto\s+key\s+(zeroize|generate)\b", re.I), "changes device SSH keys"),
+]
+
+def find_dangerous_commands(lines: list[str]) -> list[dict[str, str | int]]:
+    findings = []
+    for line_number, line in enumerate(lines, start=1):
+        stripped = line.strip()
+        for pattern, reason in DANGEROUS_PATTERNS:
+            if pattern.search(stripped):
+                findings.append({
+                    "line": line_number,
+                    "command": stripped,
+                    "reason": reason,
+                })
+    return findings
+```
+
+## Duplicate IPs And Subnet Overlaps
+
+```python
+import ipaddress
+import re
+from collections import Counter
+
+IP_ADDRESS_RE = re.compile(
+    r"^\s*ip address\s+"
+    r"(?P<ip>\d{1,3}(?:\.\d{1,3}){3})\s+"
+    r"(?P<mask>\d{1,3}(?:\.\d{1,3}){3})\b",
+    re.I | re.M,
+)
+
+def extract_interfaces(config: str) -> list[dict[str, str]]:
+    results = []
+    current = None
+    for line in config.splitlines():
+        if line.startswith("interface "):
+            current = line.split(maxsplit=1)[1]
+            continue
+        match = IP_ADDRESS_RE.match(line)
+        if current and match:
+            ip = match.group("ip")
+            mask = match.group("mask")
+            network = ipaddress.ip_interface(f"{ip}/{mask}").network
+            results.append({"interface": current, "ip": ip, "network": str(network)})
+    return results
+
+def find_duplicate_ips(config: str) -> list[str]:
+    ips = [entry["ip"] for entry in extract_interfaces(config)]
+    counts = Counter(ips)
+    return sorted(ip for ip, count in counts.items() if count > 1)
+
+def find_subnet_overlaps(config: str) -> list[tuple[str, str]]:
+    networks = [ipaddress.ip_network(entry["network"]) for entry in extract_interfaces(config)]
+    overlaps = []
+    for index, left in enumerate(networks):
+        for right in networks[index + 1:]:
+            if left.overlaps(right):
+                overlaps.append((str(left), str(right)))
+    return overlaps
+```
+
+## Management-Plane Checks
+
+Parse VTY blocks by section so access-class checks do not spill across unrelated
+lines.
+
+```python
+import re
+
+def iter_blocks(config: str, starts_with: str) -> list[str]:
+    blocks = []
+    current: list[str] = []
+    for line in config.splitlines():
+        if line.startswith(starts_with):
+            if current:
+                blocks.append("\n".join(current))
+            current = [line]
+            continue
+        if current:
+            if line and not line.startswith(" "):
+                blocks.append("\n".join(current))
+                current = []
+            else:
+                current.append(line)
+    if current:
+        blocks.append("\n".join(current))
+    return blocks
+
+def check_vty_blocks(config: str) -> list[str]:
+    issues = []
+    for block in iter_blocks(config, "line vty"):
+        if re.search(r"transport\s+input\s+.*telnet", block, re.I):
+            issues.append("VTY allows Telnet; require SSH only.")
+        if not re.search(r"\baccess-class\s+\S+\s+in\b", block, re.I):
+            issues.append("VTY block has no inbound access-class source restriction.")
+        if not re.search(r"\bexec-timeout\s+\d+\s+\d+\b", block, re.I):
+            issues.append("VTY block has no explicit exec-timeout.")
+    return issues
+```
+
+## Security Hygiene Checks
+
+```python
+SECURITY_PATTERNS = [
+    (re.compile(r"\bsnmp-server community\s+(public|private)\b", re.I),
+     "default SNMP community configured"),
+    (re.compile(r"\bsnmp-server community\s+\S+", re.I),
+     "SNMPv2 community string configured; prefer SNMPv3 authPriv"),
+    (re.compile(r"\bip ssh version 1\b", re.I),
+     "SSH version 1 enabled"),
+    (re.compile(r"\benable password\b", re.I),
+     "enable password is present; use enable secret"),
+    (re.compile(r"\busername\s+\S+\s+password\b", re.I),
+     "local username uses password instead of secret"),
+]
+
+BEST_PRACTICE_PATTERNS = [
+    (re.compile(r"\bntp server\b", re.I), "NTP server"),
+    (re.compile(r"\bservice timestamps\b", re.I), "log timestamps"),
+    (re.compile(r"\blogging\s+\S+", re.I), "logging destination or buffer"),
+    (re.compile(r"\bsnmp-server group\s+\S+\s+v3\s+priv\b", re.I), "SNMPv3 authPriv group"),
+    (re.compile(r"\bbanner\s+(login|motd)\b", re.I), "login banner"),
+]
+
+def check_security(config: str) -> list[str]:
+    return [message for pattern, message in SECURITY_PATTERNS if pattern.search(config)]
+
+def check_missing_hygiene(config: str) -> list[str]:
+    return [
+        f"Missing {description}"
+        for pattern, description in BEST_PRACTICE_PATTERNS
+        if not pattern.search(config)
+    ]
+```
+
+## Examples
+
+### Change-Window Preflight
+
+1. Run dangerous-command checks on the exact snippet to be pasted.
+2. Run duplicate IP and subnet overlap checks against the full candidate config.
+3. Confirm every referenced ACL, route-map, and prefix-list exists.
+4. Confirm rollback commands and out-of-band access before any management-plane
+   change.
+
+### Automation Preflight
+
+Use validation as a blocking gate before Netmiko, NAPALM, Ansible, or vendor API
+automation pushes a generated config. Fail closed on dangerous commands and
+credentials. Warn on best-practice gaps that are outside the change scope.
+
+## Anti-Patterns
+
+- Treating regex validation as a device parser.
+- Applying generated config without a dry-run diff.
+- Recommending SNMPv2 community strings as a monitoring requirement.
+- Checking VTY blocks with regex that can accidentally span unrelated sections.
+- Testing firewall behavior by disabling ACLs instead of reading counters/logs.
+
+## See Also
+
+- Agent: `network-config-reviewer`
+- Agent: `network-troubleshooter`
+- Skill: `network-interface-health`

package/skills/nextjs-turbopack/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: nextjs-turbopack
+description: Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
+origin: ECC
+---
+
+# Next.js and Turbopack
+
+Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.
+
+## When to Use
+
+- **Turbopack (default dev)**: Use for day-to-day development. Faster cold start and HMR, especially in large apps.
+- **Webpack (legacy dev)**: Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with `--webpack` (or `--no-turbopack` depending on your Next.js version; check the docs for your release).
+- **Production**: Production build behavior (`next build`) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.
+
+Use when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.
+
+## How It Works
+
+- **Turbopack**: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).
+- **Default in dev**: From Next.js 16, `next dev` runs with Turbopack unless disabled.
+- **File-system caching**: Restarts reuse previous work; cache is typically under `.next`; no extra config needed for basic use.
+- **Bundle Analyzer (Next.js 16.1+)**: Experimental Bundle Analyzer to inspect output and find heavy dependencies; enable via config or experimental flag (see Next.js docs for your version).
+
+## Examples
+
+### Commands
+
+```bash
+next dev
+next build
+next start
+```
+
+### Usage
+
+Run `next dev` for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.
+
+## Best Practices
+
+- Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.
+- If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.
+- For production bundle size issues, use the official Next.js bundle analysis tooling for your version.

package/skills/nodejs-keccak256/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: nodejs-keccak256
+description: Prevent Ethereum hashing bugs in JavaScript and TypeScript. Node's sha3-256 is NIST SHA3, not Ethereum Keccak-256, and silently breaks selectors, signatures, storage slots, and address derivation.
+origin: ECC direct-port adaptation
+version: "1.0.0"
+---
+
+# Node.js Keccak-256
+
+Ethereum uses Keccak-256, not the NIST-standardized SHA3 variant exposed by Node's `crypto.createHash('sha3-256')`.
+
+## When to Use
+
+- Computing Ethereum function selectors or event topics
+- Building EIP-712, signature, Merkle, or storage-slot helpers in JS/TS
+- Reviewing any code that hashes Ethereum data with Node crypto directly
+
+## How It Works
+
+The two algorithms produce different outputs for the same input, and Node will not warn you.
+
+```javascript
+import crypto from 'crypto';
+import { keccak256, toUtf8Bytes } from 'ethers';
+
+const data = 'hello';
+const nistSha3 = crypto.createHash('sha3-256').update(data).digest('hex');
+const keccak = keccak256(toUtf8Bytes(data)).slice(2);
+
+console.log(nistSha3 === keccak); // false
+```
+
+## Examples
+
+### ethers v6
+
+```typescript
+import { keccak256, toUtf8Bytes, solidityPackedKeccak256, id } from 'ethers';
+
+const hash = keccak256(new Uint8Array([0x01, 0x02]));
+const hash2 = keccak256(toUtf8Bytes('hello'));
+const topic = id('Transfer(address,address,uint256)');
+const packed = solidityPackedKeccak256(
+  ['address', 'uint256'],
+  ['0x742d35Cc6634C0532925a3b8D4C9B569890FaC1c', 100n],
+);
+```
+
+### viem
+
+```typescript
+import { keccak256, toBytes } from 'viem';
+
+const hash = keccak256(toBytes('hello'));
+```
+
+### web3.js
+
+```javascript
+const hash = web3.utils.keccak256('hello');
+const packed = web3.utils.soliditySha3(
+  { type: 'address', value: '0x742d35Cc6634C0532925a3b8D4C9B569890FaC1c' },
+  { type: 'uint256', value: '100' },
+);
+```
+
+### Common patterns
+
+```typescript
+import { id, keccak256, AbiCoder } from 'ethers';
+
+const selector = id('transfer(address,uint256)').slice(0, 10);
+const typeHash = keccak256(toUtf8Bytes('Transfer(address from,address to,uint256 value)'));
+
+function getMappingSlot(key: string, mappingSlot: number): string {
+  return keccak256(
+    AbiCoder.defaultAbiCoder().encode(['address', 'uint256'], [key, mappingSlot]),
+  );
+}
+```
+
+### Address from public key
+
+```typescript
+import { keccak256 } from 'ethers';
+
+function pubkeyToAddress(pubkeyBytes: Uint8Array): string {
+  const hash = keccak256(pubkeyBytes.slice(1));
+  return '0x' + hash.slice(-40);
+}
+```
+
+### Audit your codebase
+
+```bash
+grep -rn "createHash.*sha3" --include="*.ts" --include="*.js" --exclude-dir=node_modules .
+grep -rn "keccak256" --include="*.ts" --include="*.js" . | grep -v node_modules
+```
+
+## Rule
+
+For Ethereum contexts, never use `crypto.createHash('sha3-256')`. Use Keccak-aware helpers from `ethers`, `viem`, `web3`, or another explicit Keccak implementation.

package/skills/nothing-design/SKILL.md

@@ -0,0 +1,177 @@
+---
+name: nothing-design
+description: This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.
+version: 3.0.0
+allowed-tools: [Read, Write, Edit, Glob, Grep]
+---
+
+# Nothing-Inspired UI/UX Design System
+
+A senior product designer's toolkit trained in Swiss typography, industrial design (Braun, Teenage Engineering), and modern interface craft. Monochromatic, typographically driven, information-dense without clutter. Dark and light mode with equal rigor.
+
+**Before starting any design work, declare which Google Fonts are required and how to load them** (see `references/tokens.md` Section 1). Never assume fonts are already available.
+
+---
+
+## 1. DESIGN PHILOSOPHY
+
+- **Subtract, don't add.** Every element must earn its pixel. Default to removal.
+- **Structure is ornament.** Expose the grid, the data, the hierarchy itself.
+- **Monochrome is the canvas.** Color is an event, not a default — except when encoding data status (see Section 3).
+- **Type does the heavy lifting.** Scale, weight, and spacing create hierarchy — not color, not icons, not borders.
+- **Both modes are first-class.** Dark mode: OLED black. Light mode: warm off-white. Neither is "derived" — both get full design attention. Ask the user which mode to start with.
+- **Industrial warmth.** Technical and precise, but never cold. A human hand should be felt.
+
+---
+
+## 2. CRAFT RULES — HOW TO COMPOSE
+
+### 2.1 Visual Hierarchy: The Three-Layer Rule
+
+Every screen has exactly **three layers of importance.** Not two, not five. Three.
+
+| Layer | What | How |
+|-------|------|-----|
+| **Primary** | The ONE thing the user sees first. A number, a headline, a state. | Doto or Space Grotesk at display size. `--text-display`. 48–96px breathing room. |
+| **Secondary** | Supporting context. Labels, descriptions, related data. | Space Grotesk at body/subheading. `--text-primary`. Grouped tight (8–16px) to the primary. |
+| **Tertiary** | Metadata, navigation, system info. Visible but never competing. | Space Mono at caption/label. `--text-secondary` or `--text-disabled`. ALL CAPS. Pushed to edges or bottom. |
+
+**The test:** Squint at the screen. Can you still tell what's most important? If two things compete, one needs to shrink, fade, or move.
+
+**Common mistake:** Making everything "secondary." Evenly-sized elements with even spacing = visual flatness. Be brave — make the primary absurdly large and the tertiary absurdly small. The contrast IS the hierarchy.
+
+### 2.2 Font Discipline
+
+Per screen, use maximum:
+- **2 font families** (Space Grotesk + Space Mono. Doto only for hero moments.)
+- **3 font sizes** (one large, one medium, one small)
+- **2 font weights** (Regular + one other — usually Light or Medium, rarely Bold)
+
+Think of it as a budget. Every additional size/weight costs visual coherence. Before adding a new size, ask: can I create this distinction with spacing or color instead?
+
+| Decision | Size | Weight | Color |
+|----------|:---:|:---:|:---:|
+| Heading vs. body | Yes | No | No |
+| Label vs. value | No | No | Yes |
+| Active vs. inactive nav | No | No | Yes |
+| Hero number vs. unit | Yes | No | No |
+| Section title vs. content | Yes | Optional | No |
+
+**Rule of thumb:** If reaching for a new font-size, it's probably a spacing problem. Add distance instead.
+
+### 2.3 Spacing as Meaning
+
+Spacing is the primary tool for communicating relationships.
+
+```
+Tight (4–8px)   = "These belong together" (icon + label, number + unit)
+Medium (16px)    = "Same group, different items" (list items, form fields)
+Wide (32–48px)   = "New group starts here" (section breaks)
+Vast (64–96px)   = "This is a new context" (hero to content, major divisions)
+```
+
+**If a divider line is needed, the spacing is probably wrong.** Dividers are a symptom of insufficient spacing contrast. Use them only in data-dense lists where items are structurally identical.
+
+### 2.4 Container Strategy (prefer top)
+
+1. **Spacing alone** (proximity groups items)
+2. A single divider line
+3. A subtle border outline
+4. A surface card with background change
+
+Each step down adds visual weight. Use the lightest tool that works. Never box the most important element — let it float on the background.
+
+### 2.5 Color as Hierarchy
+
+In a monochrome system, the gray scale IS the hierarchy. Max 4 levels per screen:
+
+```
+--text-display (100%) → Hero numbers. One per screen.
+--text-primary (90%)  → Body text, primary content.
+--text-secondary (60%) → Labels, captions, metadata.
+--text-disabled (40%) → Disabled, timestamps, hints.
+```
+
+**Red (#D71921) is not part of the hierarchy.** It's an interrupt — "look HERE, NOW." If nothing is urgent, no red on the screen.
+
+**Data status colors** (success green, warning amber, accent red) are exempt from the "one accent" rule when encoding data values. Apply color to the **value itself**, not labels or row backgrounds. See `references/tokens.md` for the full color system.
+
+### 2.6 Consistency vs. Variance
+
+**Be consistent in:** Font families, label treatment (always Space Mono ALL CAPS), spacing rhythm, color roles, component shapes, alignment.
+
+**Break the pattern in exactly ONE place per screen:** An oversized number, a circular widget among rectangles, a red accent among grays, a Doto headline, a vast gap where everything else is tight.
+
+This single break IS the design. Without it: sterile grid. With more than one: visual chaos.
+
+### 2.7 Compositional Balance
+
+**Asymmetry > symmetry.** Centered layouts feel generic. Favor deliberately unbalanced composition:
+- **Large left, small right:** Hero metric + metadata stack.
+- **Top-heavy:** Big headline near top, sparse content below.
+- **Edge-anchored:** Important elements pinned to screen edges, negative space in center.
+
+Balance heavy elements with more empty space, not with more heavy elements.
+
+### 2.8 The Nothing Vibe
+
+1. **Confidence through emptiness.** Large uninterrupted background areas. Resist filling space.
+2. **Precision in the small things.** Letter-spacing, exact gray values, 4px gaps. Micro-decisions compound into craft.
+3. **Data as beauty.** `36GB/s` in Space Mono at 48px IS the visual. No illustrations needed.
+4. **Mechanical honesty.** Controls look like controls. A toggle = physical switch. A gauge = instrument.
+5. **One moment of surprise.** A dot-matrix headline. A circular widget. A red dot. Restraint makes the one expressive moment powerful.
+6. **Percussive, not fluid.** Imagine UI sounds: click not swoosh, tick not chime. Design transitions that feel mechanical and precise.
+
+### 2.9 Visual Variety in Data-Dense Screens
+
+When 3+ data sections appear on one screen, vary the visual form:
+
+| Form | Best for | Weight |
+|------|----------|--------|
+| Hero number (large Doto/Space Mono) | Single key metric | Heavy — use once |
+| Segmented progress bar | Progress toward goal | Medium |
+| Concentric rings / arcs | Multiple related percentages | Medium |
+| Inline compact bar | Secondary metrics in rows | Light |
+| Number-only with status color | Values without proportion | Lightest |
+| Sparkline | Trends over time | Medium |
+| Stat row (label + value) | Simple data points | Light |
+
+Lead section → heaviest treatment. Secondary → different form. Tertiary → lightest. The FORM varies, the VOICE stays the same.
+
+---
+
+## 3. ANTI-PATTERNS — WHAT TO NEVER DO
+
+- No gradients in UI chrome
+- No shadows. No blur. Flat surfaces, border separation.
+- No skeleton loading screens. Use `[LOADING...]` text or segmented spinner.
+- No toast popups. Use inline status text: `[SAVED]`, `[ERROR: ...]`
+- No sad-face illustrations, cute mascots, or multi-paragraph empty states
+- No zebra striping in tables
+- No filled icons, multi-color icons, or emoji as UI
+- No parallax, scroll-jacking, or gratuitous animation
+- No spring/bounce easing. Use subtle ease-out only.
+- No border-radius > 16px on cards. Buttons are pill (999px) or technical (4–8px).
+- Data visualization: differentiate with **opacity** (100%/60%/30%) or **pattern** (solid/striped/dotted) before introducing color.
+
+---
+
+## 4. WORKFLOW
+
+1. **Declare fonts** — tell the user which Google Fonts to load (see `references/tokens.md`)
+2. **Ask mode** — dark or light? Neither is default.
+3. **Sketch hierarchy** — identify the 3 layers before writing any code
+4. **Compose** — apply craft rules (Sections 2.1–2.9)
+5. **Check tokens** — consult `references/tokens.md` for exact values
+6. **Build components** — consult `references/components.md` for patterns
+7. **Adapt to platform** — consult `references/platform-mapping.md` for output conventions
+
+---
+
+## 5. REFERENCE FILES
+
+For detailed token values, component specs, and platform-specific guidance:
+
+- **`references/tokens.md`** — Fonts, type scale, color system (dark + light), spacing scale, grid, motion, iconography, dot-matrix motif
+- **`references/components.md`** — Cards, buttons, inputs, lists, tables, nav, tags, segmented controls, progress bars, charts, widgets, overlays, state patterns
+- **`references/platform-mapping.md`** — HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions

package/skills/nothing-design/references/components.md

@@ -0,0 +1,153 @@
+# Nothing Design System — Components
+
+## 1. CARDS / SURFACES
+
+- Background: `--surface` or `--surface-raised`
+- Border: `1px solid --border`, or none. Radius: 12–16px cards, 8px compact, 4px technical
+- Padding: 16–24px. No shadows. Flat surfaces, border separation.
+
+---
+
+## 2. BUTTONS
+
+| Variant | Background | Border | Text | Radius |
+|---------|-----------|--------|------|--------|
+| Primary | `--text-display` (#FFF) | none | `--black` | 999px (pill) |
+| Secondary | transparent | `1px solid --border-visible` | `--text-primary` | 999px |
+| Ghost | transparent | none | `--text-secondary` | 0 |
+| Destructive | transparent | `1px solid --accent` | `--accent` | 999px |
+
+All buttons: `Space Mono`, 13px, ALL CAPS, letter-spacing 0.06em, padding 12px 24px. Min height 44px.
+
+---
+
+## 3. INPUTS
+
+- Underline preferred (`1px solid --border-visible` bottom) or full border 8px radius
+- Label above: `--label` style (Space Mono, ALL CAPS, `--text-secondary`)
+- Focus: border → `--text-primary`. Error: border → `--accent`, message below in `--accent`
+- Data-entry fields: `Space Mono` for input text
+
+---
+
+## 4. LISTS / DATA ROWS
+
+- Dividers: `1px solid --border`, full-width. Row padding: 12–16px vertical
+- Left: label (Space Mono caps, `--text-secondary`). Right: value (`--text-primary`)
+- Never alternating row backgrounds. Use dividers.
+
+**Stat rows:** Label left (Space Mono, ALL CAPS, `--text-secondary`), value right (color = status color), unit adjacent in `--label` size. Trend arrow same color as value.
+
+**Hierarchical rows:** Sub-items indented 16–24px, same divider treatment. No tree lines or expand/collapse — indentation IS the hierarchy.
+
+---
+
+## 5. TABLES / DATA GRIDS
+
+- Header: `--label` style, bottom border `--border-visible`
+- Cell text: `Space Mono` numeric, `Space Grotesk` text. Cell padding: 12px 16px
+- Numbers right, text left. No zebra striping, no cell backgrounds.
+- Active row: `--surface-raised` background, left `2px solid --accent` indicator
+
+---
+
+## 6. NAVIGATION
+
+- Bottom bar mobile, horizontal text bar desktop
+- Labels: Space Mono, ALL CAPS. Active: `--text-display` + dot/underline. Inactive: `--text-disabled`
+- Bracket `[ HOME ]  GALLERY  INFO` or pipe `HOME | GALLERY | INFO`
+- **Back button:** Circular 40–44px, `--surface` bg, thin chevron `<`, top-left 16px from edges
+
+---
+
+## 7. TAGS / CHIPS
+
+- Border: `1px solid --border-visible`, no fill. Text: Space Mono, `--caption`, ALL CAPS
+- Radius: 999px (pill) or 4px (technical). Padding: 4px 12px. Active: `--text-display` border+text
+
+---
+
+## 8. SEGMENTED CONTROL
+
+- Container: `1px solid --border-visible`, pill or 8px rounded
+- Active: `--text-display` bg, `--black` text (inverted). Inactive: transparent, `--text-secondary`
+- Text: Space Mono, ALL CAPS, `--label` size. Height: 36–44px. Transition: 200ms ease-out
+- Max 2–4 segments
+
+---
+
+## 9. DATE / PERIOD NAVIGATION
+
+- Layout: `< LABEL >` — back arrow, label, forward arrow
+- Label: Space Mono/Grotesk, ALL CAPS. Arrows: thin chevrons, `--text-secondary`, 44px touch
+- No calendar popovers — linear stepping IS the interaction
+
+---
+
+## 10. TOGGLES / SWITCHES
+
+- Pill track, circle thumb. Off: `--border-visible` track, `--text-disabled` thumb
+- On: `--text-display` track, `--black` thumb. Min touch target: 44px
+
+---
+
+## 11. SEGMENTED PROGRESS BARS
+
+The signature data visualization. Discrete blocks — mechanical, instrument-like.
+
+**Anatomy:** Label + value above, full-width bar of discrete rectangular segments with 2px gaps below.
+
+**Segments:** Square-ended blocks, no border-radius. Filled = solid status color. Empty = `--border` (dark) / `#E0E0E0` (light).
+
+| State | Fill | When |
+|-------|------|------|
+| Neutral | `--text-display` | Within normal range |
+| Over limit | `--accent` | Exceeds target |
+| Good | `--success` | Healthy range |
+| Moderate | `--warning` | Caution zone |
+
+**Overflow:** Filled segments continue past "full" mark in status color (typically red).
+
+**Sizes:** Hero 16–20px, Standard 8–12px, Compact 4–6px height.
+
+Always pair with numeric readout. Bar = proportion, number = precision.
+
+---
+
+## 12. OTHER DATA VISUALIZATION
+
+- **Bar charts:** Vertical, white fill, `--border` remainder. Square ends.
+- **Gauges:** Thin stroke circles + tick marks, numeric readout centered/adjacent.
+- **Dot grids:** Vary opacity/size for heat maps. Uniform spacing.
+- **Category differentiation:** Opacity → pattern → line style → color (last resort).
+- Always show numeric value alongside any visual.
+
+**Charts:** Line 1.5–2px `--text-display`, average dashed 1px `--text-secondary`. Axis labels: Space Mono, `--caption`. Grid: `--border`, horizontal only. No area fill, no legend boxes — label lines directly.
+
+---
+
+## 13. WIDGETS (DASHBOARD CARDS)
+
+- `--surface` bg, 16px radius. Hero metric: large Doto/Space Mono, left-aligned
+- Unit: `--label` size, adjacent. Category: ALL CAPS Space Mono top-left
+- Instrument gauges: compass, thermometer, dial motifs
+
+---
+
+## 14. OVERLAYS & LAYERING
+
+No shadows. Layering through background contrast and borders.
+
+- **Modals:** Backdrop `rgba(0,0,0,0.8)`, dialog `--surface` + `1px solid --border-visible` + 16px radius, centered max 480px. Close: `[ X ]` top-right ghost button.
+- **Bottom sheets:** `--surface`, 2px handle bar centered, 16px top radius, drag-to-dismiss. Full-page sheets: title centered + dismiss button right, sections with `--text-secondary` headings.
+- **Dropdowns:** `--surface-raised`, `1px solid --border-visible` 8px radius, 44px items. Selected: left 2px accent bar. No shadow.
+- **Toasts:** None. Use inline status text: `[SAVED]`, `[ERROR: ...]`. Space Mono, `--caption`, near trigger.
+
+---
+
+## 15. STATE PATTERNS
+
+- **Error:** Input border → `--accent` + message below. Form-level: summary box `1px solid --accent`. Inline: `[ERROR]` prefix. Never red backgrounds or alert banners.
+- **Empty:** Centered, 96px+ padding. Headline `--text-secondary`, 1 sentence description `--text-disabled`. Optional dot-matrix illustration. No mascots.
+- **Loading:** Segmented spinner (hardware-style), or segmented bar + percentage. No skeletons — use `[LOADING]` bracket text.
+- **Disabled:** Opacity 0.4 or `--text-disabled`. Borders fade to `--border`.