skills.rest
yousufjoyian
yousufjoyianCOMMUNITY
Explore all skills by this author →
GitHub

a2ui-embed

Render custom HTML visualizations in the TriClaude A2UI panel via a2ui_input.log.

Updated Aug 27, 2026
Search Tags:#dashboard#WebSocket#embed#iframe#HTML visualization#A2UI#TriClaude
One-click install
npx skills add https://github.com/yousufjoyian/claude-skills --skill a2ui-embed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a2ui-embed
Source: https://github.com/yousufjoyian/claude-skills/tree/main/a2ui-embed
Command: npx skills add https://github.com/yousufjoyian/claude-skills --skill a2ui-embed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables rendering custom HTML visualizations inside the TriClaude A2UI panel or embedding running web apps, enabling dynamic UI without leaving the workflow.

Core Features & Use Cases

  • In-panel Visualization: Render HTML widgets directly in the A2UI panel for quick insights.
  • Embed Running Apps: Display live web apps inside the UI iframe, improving contextual awareness.
  • Use Case: Imagine a data scientist streaming a real-time dashboard into the A2UI pane during a TriClaude session.

Quick Start

Open the A2UI panel, ensure the sidecar is running on the configured port, and append your HTML to the a2ui_input.log as described in the skill instructions.

Frequently Asked Questions about a2ui-embed

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

FAQPage Schema
How do I embed live HTML visualizations in A2UI during a TriClaude workflow?▼

Embed HTML visualizations by writing custom HTML to the a2ui_input.log file and running a sidecar WebSocket connection on the configured port. The rendered content displays directly in the A2UI panel without leaving your workflow.

Can I display a running web app inside the A2UI panel using an iframe?▼

Yes, this Skill enables embedding running web apps into the A2UI panel via iframe. The sidecar WebSocket connection facilitates live communication between your app and the TriClaude interface.

What setup do I need to render dashboards and widgets in A2UI?▼

Ensure the sidecar is running on your configured port, then append HTML content to a2ui_input.log. The A2UI panel will render your visualization as a live widget without additional dependencies.

How does WebSocket integration work with A2UI panel visualizations?▼

The Skill uses a sidecar WebSocket connection to enable real-time communication between your custom HTML visualizations and the A2UI panel, allowing dynamic updates and interactivity.

Can I stream real-time data into dashboard visualizations within A2UI?▼

Yes, the WebSocket sidecar connection enables streaming live data into your HTML dashboards rendered in the A2UI panel, making it ideal for real-time monitoring and data science workflows.

Related Skills

Explore More Design & Creative Skills→
waynewangyuxuanwaynewangyuxuan

session-prep

Create a structured session folder with prep.md and a to_upload directory.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
c-krausc-kraus

html-builder

Create standalone HTML/JS widgets with embedded CSS for IFRAME embedding.

Community
Basic
Starchild-ai-agentStarchild-ai-agent
1

@1463/dashboard

Create interactive HTML/CSS/JavaScript dashboards with real-time data streaming.

Official
Advanced