canvas-design

What it does

This frontend skill enables AI agents to generate and manipulate visual diagrams within a canvas interface. It allows for the dynamic creation of structured layouts, flowcharts, or architectural views directly through code execution.

When to use it

• Visualizing system architecture or component relationships in real-time during a development session.
• Creating flowcharts to map out complex business logic or data processing pipelines.
• Generating UI wireframes or layout prototypes for frontend design discussions.
• Drawing network topology maps or database schema diagrams programmatically.

Key capabilities

• Interactive canvas rendering engine for visual output.
• Dynamic element placement and manipulation within the workspace.
• Support for structured diagram types including flows and layouts.
• Direct integration with frontend execution environments.

Example prompts

• "Create a flowchart showing the data flow from user input to database storage."
• "Generate a system architecture diagram illustrating the microservices setup for this API."
• "Draw a network topology map connecting three servers to a central load balancer."

Tips & gotchas

Ensure your AI agent has access to the necessary frontend execution environment to render the canvas elements. Complex diagrams may require breaking down into smaller, sequential generation steps for clarity.