Pneuma Skills

Agentic UI Platform
for Code Assistants

Moving beyond pure text interfaces. Connecting terminal AI agents with rich, bidirectional visual workspaces for true human-AI co-creation.

Real-time Render
Syntax Introspection
4-Layer Architecture
The Philosophy

A Canvas for
the Blind AI.

Code agents are incredibly powerful, but they edit files in the absolute dark. Pneuma connects them bidirectionally to a visual viewer.

Synchronized Co-Creation

Without needing native vision, the LLM constructs layouts via standard markup, and you guide it visually as it rapidly iterates.

➜ claude "Draw an orange circle"
> <circle fill="orange"/>
Live Canvas
Architecture

The Four-Layer Engine

Pneuma is built on four distinct layers, cleanly separating the concerns of AI execution, visual rendering, and domain-specific knowledge.

4

Mode Protocol

ModeManifest

The declarative soul. Defines what the AI knows (skills), what the user sees (viewers), and how the agent is configured.

3

Content Viewer

ViewerContract

The dynamic frontend. Renders workspace files in real-time, extracts context, and provides agent-callable actions.

2

Agent Bridge

AgentBackend

The AI orchestrator. Handles launching, resuming, and communicating with the underlying CLI agents (e.g. Claude Code).

1

Runtime Shell

Bun + Hono + Vite

The foundation. Manages file watching, PTY terminals, session persistence, and hosts the Dual WebSocket bridge.

Communication

The Dual-Channel Bridge

At the heart of the Runtime Shell is an incredibly fast WebSocket bridge synchronizing the CLI agent with the React frontend.

Claude CLI

--sdk-url

NDJSON JSON
Hono Server
File Watcher Push

Vite Viewer

React App

Capabilities

Viewer Context & Agent Vision

The frontend viewer isn't just a static display; it interacts directly with the AI, giving it structural awareness of the rendered document.

Element Selection

Click any block in the live preview. Pneuma wraps it in an outline and automatically injects a <viewer-context> block into your next chat message.

Selected: <h1>
"Make this title larger and blue"

The AI knows exactly which <h1> you clicked on without you needing to explain where it is.

Agent-Callable Actions

The ViewerContract exposes specific actions the agent can trigger in the UI, enabling seamless multi-step workflows.

Navigation
Agent jumps your view to Slide 10 after editing.
View Setup
Agent triggers "Grid View" for sorting slides.
Scaffolding
Agent resets workspace fully (with UI confirm).
Viewer Actions

Controlling the Canvas

The connection is two-way. Not only does the viewer send context to the AI, but the AI can also programmatically trigger actions in the React UI.

Agent's Tool Call

import { invokeViewerAction } from "pneuma";

await invokeViewerAction({
  id: "navigate-to",
  params: { slide: 10 }
});

Vite Frontend Response

Viewport jumped to Slide 10

The user doesn't have to scroll. When the AI finishes editing slide 10, it brings the user's attention exactly where it's needed via the ViewerContract.

Extensibility

Mode Maker: AI creating AI

Because every feature in Pneuma is abstracted behind the ModeProtocol, we built a Mode to create other Modes.

1. Fork & Scaffold

Start the mode-maker mode. Tell Claude you want a "Kanban Board Mode". It automatically forks a basic template and scaffolds your React files.

2. Play-test Instantly

Hit "Play". Pneuma spins up a nested server running your newly coded Viewer. You can test your Kanban layout side-by-side while Claude codes it.

3. Publish to Network

Once complete, run pneuma mode publish. Your mode is uploaded to the R2 registry, immediately available in the global Launcher Marketplace.

Design System

Global Theming via CSS Variables

Slide mode encourages a "Theme-first" design philosophy. By editing theme.css, you alter the visual aesthetic of the entire presentation at once.

theme.css 
:root {
  --color-bg: #FAF7F2;
  --color-text: #2D2A26;
  --color-primary: #D4632A;
  --color-accent: #C4963A;
  --color-surface: #F0EBE3;
  
  --font-sans: 'Inter', sans-serif;
}
Prompting Tip #1

"Change the entire theme to a Cyberpunk aesthetic. Use dark grays for the background, and neon pink and cyan for accents."

Prompting Tip #2

"Increase the global border radius for all cards to make the deck feel more playful and rounded."

Design

Smart Layout Engine

The CSS foundation of Slide mode is built for rigid, predictable layouts. It ensures your content never breaks the projection canvas.

Overflow Prevention

Unlike normal web pages, slides cannot scroll. The CSS framework strictly enforces overflow: hidden on the slide canvas and employs flexbox scaling to keep text inside boundaries.

Absolute Precision

Ask the AI to "place the red circle exactly at coordinates 500, 100". Because the canvas has a fixed aspect ratio (e.g., 1280x720), the AI can mathematically calculate and position elements flawlessly using absolute CSS.

Export & View

From Sandbox to Stage

Pneuma doesn't trap your data. The frontend is fully equipped to transition you from editing mode to presentation mode, or export to standard formats.

Presenter Mode

Minimal UI overlay for immersive presentations

Grid Overview

Bird's eye view of all slides for fast navigation

Drag Reordering

Drag thumbnails to reorder.
Syncs to manifest.json automatically.

Export PDF

Hono server compiles a printable HTML payload instantly.

Ready to Co-create?

What will you teach the AI to build?
A resume builder? A drawing board? A database explorer?

bunx pneuma-skills slide
bunx pneuma-skills mode-maker
GITHUB.COM/PANDAZKI/PNEUMA-SKILLS