# Ascii Visual Portal

> Guidelines and components for building high-fidelity ASCII World portals. Use when designing the "Neural-Reality" dual-pane layout with glassmorphism and neon accents.

- Skill: `tdw419/ascii-visual-portal` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tdw419/ascii-visual-portal`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tdw419/ascii-visual-portal/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tdw419 (https://skillmd.com/u/tdw419)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tdw419/ascii-visual-portal

---


# ASCII Visual Portal

This skill provides the design system and implementation logic for the canonical ASCII World index portal.

## The Standard: Neural-Reality Dual Substrate

Every portal must adhere to the 40/60 "Neural-Reality" split.

### 1. The Neural Pane (Left 40%)
- **Component:** A `<aside>` container with a black background.
- **Content:** Raw ASCII output from the manager or bridge.
- **Styling:** `color: #00ff41; font-family: monospace; text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);`

### 2. The Reality Pane (Right 60%)
- **Component:** A `<section>` container using `glass-card` CSS classes.
- **Content:** High-fidelity GUI cards rendered via `AutoRenderer`.
- **Styling:** `backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);`

## Aesthetic Constants
- **Gradient:** `radial-gradient(circle at top right, #1a1a2e, #050508)`
- **Core Accent:** `#00d9ff` (System)
- **Active Accent:** `#00ff88` (WordPress/Substrate)

## Implementation
1. **CSS:** Link to or import `MasterPortal.css`.
2. **Logic:** Use the `useAsciiState` hook for both manager and nested substrates.
3. **Routing:** Implement the `GLOBALS` filter to route keys between substrates.