skills.rest
qol-tools
qol-toolsOFFICIAL
Explore all skills by this author →
GitHub

qol-world-canvas

Coordinate and render the world canvas with DiveTargets and trait-driven visuals.

Updated Apr 19, 2026
Search Tags:#traits#atmosphere#world-canvas#dive-targets#world-navigation#peripheral-preview
One-click install
npx skills add https://github.com/qol-tools/qol-skills --skill qol-world-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qol-world-canvas
Source: https://github.com/qol-tools/qol-skills/tree/main/plugins/qol-host/skills/qol-world-canvas
Command: npx skills add https://github.com/qol-tools/qol-skills --skill qol-world-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers manage and render a spatial World Canvas in qol-tray, coordinating DiveTargets with trait-driven behavior and world navigation across the codebase.

Core Features & Use Cases

  • DiveTarget trait orchestration: declare and apply traits to divables to control confinement, previews, and atmosphere.
  • World navigation and dive stack: push and pop dive frames as users enter or exit world spaces.
  • Renderer integration: components such as WorldViewport.js, PeripheralPreview.js, and AtmosphereLayer.js render trait-driven visuals and atmospheres.
  • Styles and assets: include CSS for peripheral previews and atmosphere presets to create a cohesive UI experience.
  • Plugin spatial layout: support for plugin-trait overrides and central trait registry as a bridge to external plugins.

Quick Start

Review and customize the world canvas features by inspecting the WorldViewport, PeripheralPreview, and AtmosphereLayer implementations in the codebase.

Frequently Asked Questions about qol-world-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a world canvas and how does it manage dive targets in spatial UI?▼

World canvas dive targets are spatial navigation frames that manage user transitions between UI spaces. This skill orchestrates them by applying trait defaults, managing dive stacks, and rendering peripheral previews and atmosphere layers.

How do I coordinate trait defaults across world navigation components?▼

Coordinate trait defaults by registering them in a central world-registry, then mounting WorldViewport to apply them across world-navigation and peripheral preview components. Plugin-trait overrides can extend these defaults for experimental contracts.

Can I use plugin-trait overrides to customize atmosphere rendering presets?▼

Yes, plugin-trait overrides support experimental contracts for customizing atmosphere rendering. The AtmosphereLayer component applies CSS presets while the central trait registry bridges external plugin overrides to the default rendering pipeline.

What's the best way to manage a dive stack when users enter and exit world spaces?▼

Manage the dive stack by pushing dive frames when users enter world spaces and popping them upon exit. The world-navigation module coordinates these transitions while preserving trait-driven confinement and peripheral preview state.

Does the world canvas rendering pipeline support custom peripheral preview styles?▼

Yes, the rendering pipeline supports custom peripheral preview styles through CSS assets included with PeripheralPreview.js. These styles integrate with WorldViewport mounting and atmosphere presets to create a cohesive spatial UI experience.

When should I avoid using trait-driven visual orchestration for world navigation?▼

Avoid trait-driven visual orchestration when your UI lacks spatial world-space requirements or when experimental plugin-trait overrides conflict with stable trait defaults, as the rendering pipeline depends on a central registry and coordinated dive frames.

Related Skills

Explore More Software Engineering Skills→
qol-toolsqol-tools

qol-tray-ui-systems

Standardize qol-tray UI systems for keyboard navigation and focus management.

Official
Advanced
AgriciDanielAgriciDaniel
247

canvas-export

Export Obsidian Canvas files to PNG, SVG, or PDF formats.

Community
Intermediate
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
The-InterdependencyThe-Interdependency
1

a0p-self-declaring-modules

Generate a live registry from self-declaring module files at boot.

Official
Advanced