af-present-canvas

Presents visual content on the Agentview canvas via markdown, diagrams, and HTML.

Updated Feb 8, 2026
One-click install
npx skills add https://github.com/GainInsightDev/websites --skill af-present-canvas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: af-present-canvas
Source: https://github.com/GainInsightDev/websites/tree/main/.claude/skills/af-present-canvas
Command: npx skills add https://github.com/GainInsightDev/websites --skill af-present-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables the AI to present information visually to the user through the Agentview canvas, making complex data, diagrams, and documents easily understandable.

Core Features & Use Cases

  • Visual Display: Show files, documents, and markdown content directly in the user interface.
  • Diagram Generation: Create and display Mermaid diagrams, Excalidraw drawings, and rich HTML content.
  • Use Case: When explaining a system architecture, the AI can generate a Mermaid diagram and display it on the canvas for the user to review.

Quick Start

Show the file named 'README.md' in the canvas for the current task.

Frequently Asked Questions about af-present-canvas

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

FAQPage Schema
How do I render markdown and HTML content on a canvas for user review?

To render markdown and HTML content on a canvas, this Skill visually presents files, documents, and interactive HTML directly within the Agentview interface. It requires canvas API authentication and specific canvas IDs to manage and display the content.

Can I generate and display Mermaid diagrams and Excalidraw drawings on the Agentview canvas?

Yes, you can generate and display Mermaid diagrams and Excalidraw drawings on the Agentview canvas. The Skill facilitates creating these visual diagrams alongside rich HTML content to make complex data easily understandable.

What is the best way to visualize system architecture diagrams during an AI task?

The best way to visualize system architecture diagrams is by using this Skill to generate Mermaid diagrams or Excalidraw drawings. It displays these visuals directly on the canvas, allowing you to review complex structural data seamlessly.

Do I need canvas API authentication to show files on the Agentview canvas?

Yes, canvas API authentication is required to show files on the Agentview canvas. You also need specific canvas IDs to properly manage and present the markdown, diagrams, and HTML content.

How do I display a specific markdown file in the current task canvas?

To display a specific markdown file, you can instruct the AI to show the file by name in the canvas for the current task. The Skill handles the visual presentation of the document content for your review.

What are the limitations when presenting interactive HTML on the Agentview canvas?

Limitations when presenting interactive HTML include the strict requirement for canvas API authentication and specific canvas IDs. Without these prerequisites, the Skill cannot manage or render the visual content on the canvas.