skills.rest
kervel
kervelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agent-illustrator

Generate technical diagrams and animations from declarative language input.

Updated Jan 27, 2026
Search Tags:#architecture#AI#SVG#animation#diagram
One-click install
npx skills add https://github.com/kervel/agent-illustrator --skill agent-illustrator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-illustrator
Source: https://github.com/kervel/agent-illustrator/tree/main/docs
Command: npx skills add https://github.com/kervel/agent-illustrator --skill agent-illustrator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables the creation of technical diagrams, architecture illustrations, and animations, reducing the time and effort required for manual drawing and design.

Core Features & Use Cases

  • Technical Diagrams: Generate diagrams like system architecture, network topology, and flowcharts using a declarative language.
  • Animation: Create keyframe animations to depict sequences, processes, or interactions over time.
  • Clipart Integration: Find and integrate open-source SVG clipart to enhance diagram visuals.
  • Styling: Apply CSS styles for custom colors, shadows, and transitions.
  • Use Case: Design a detailed system architecture diagram and animate the flow of data between components.

Quick Start

Use the agent-illustrator skill to create a system architecture diagram. Provide the diagram description in Markdown format.

Frequently Asked Questions about agent-illustrator

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

FAQPage Schema
How do I generate a system architecture diagram from a text description?▼

You can generate a system architecture diagram by providing a diagram description in Markdown format. The Skill parses this declarative language input to render technical diagrams with semantic layouts, connections, and custom styling.

Can I animate data flow between components in a network topology diagram?▼

Yes, you can animate data flow by creating keyframe animations within the network topology diagram. This feature depicts sequences, processes, or interactions over time using declarative inputs.

Does this tool support integrating external SVG clipart into technical diagrams?▼

Yes, the tool supports finding and integrating open-source SVG clipart into your technical diagrams. This allows you to enhance diagram visuals with external assets during the rendering process.

What is the best way to create flowcharts with multiple elements and connections?▼

The best way to create flowcharts with multiple elements is using a declarative language input. The Skill parses and processes complex diagrams, handling multiple semantic layouts and connections automatically.

How do I apply custom colors and shadows to an AI-generated architecture illustration?▼

You can apply custom colors and shadows to an architecture illustration by using CSS styles. The Skill supports applying these styles to generate diagrams with custom transitions and visual enhancements.

Related Skills

Explore More Software Engineering Skills→
cosmicstack-labscosmicstack-labs
364

markdown-mastery

Rewrites documents into standards-compliant Markdown with optional linting and formatting.

Official
Intermediate
hiddink-aihiddink-ai
1

diagram-design

Generate brand-consistent SVG editorial diagrams from design tokens.

Official
Intermediate
PytaichukBohdanPytaichukBohdan

brand-agency

Apply Agency neobrutalism branding with standardized colors, typography, and CSS variables.

Community
Intermediate
carlos3gcarlos3g
2

svg

Optimize SVG rendering in React Native apps with performance tips.

Community
Intermediate