svg-illustrations

Name: svg-illustrations
Availability: InStock
Author: fawzymohamed

Create hand-drawn SVG diagrams with reusable Vue components for DevOps lessons.

1|Updated Dec 30, 2025

Search Tags:#markdown #vue #svg #design-system #illustrations #visual-design #hand-drawn

Ready to run

npx skills add https://github.com/fawzymohamed/devops --skill svg-illustrations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svg-illustrations
Source: https://github.com/fawzymohamed/devops/tree/main/.claude/skills/svg-illustrations
Command: npx skills add https://github.com/fawzymohamed/devops --skill svg-illustrations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hand-drawn style SVG illustrations are often inconsistent across diagrams and lessons, making visuals feel fragmented. This skill provides guidance and reusable components to create cohesive visuals that align with the DevOps LMS design language.

Core Features & Use Cases

Reusable Vue illustration components (IllustrationLinearFlow, IllustrationChecklist, IllustrationTeamComposition, IllustrationComparisonMap, IllustrationPyramid) for common diagram patterns.
A design system with colors, spacing, strokes, and typography to ensure visual consistency across lessons.
Guidance for when to create custom SVG with accessibility, responsiveness, and low-friction integration in Markdown and Vue pages.

Quick Start

Create a hand-drawn SVG diagram by starting with IllustrationLinearFlow and supplying steps and colors.

Frequently Asked Questions about svg-illustrations

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

FAQPage Schema

How do I create consistent hand-drawn SVG illustrations for Markdown diagrams?▼

To create consistent hand-drawn SVG illustrations for Markdown diagrams, use reusable Vue components like IllustrationLinearFlow and apply a predefined design system for colors, strokes, and spacing to ensure visual cohesion.

What is the best way to build flow charts and checklists in Vue with a hand-drawn style?▼

The best way to build hand-drawn style flow charts and checklists in Vue is by using specialized illustration components that enforce design system constants, ensuring diagrams align visually across different lessons.

Can I use these SVG illustration components in my existing DevOps design system?▼

Yes, you can integrate these SVG illustration components into a DevOps design system because they are built for Markdown-driven Vue pages and satisfy accessibility and responsiveness requirements out of the box.

Do I need to manually code SVG paths to make diagrams match a hand-drawn visual language?▼

You do not need to manually code SVG paths to achieve a hand-drawn visual language; the skill provides reusable Vue components for common patterns like team compositions, pyramids, and comparisons.

When should I create custom SVG instead of using the provided illustration components?▼

You should create custom SVG instead of using the provided illustration components when your diagram requirements fall outside common patterns like linear flows or checklists, provided you follow the design system guidance for accessibility and responsiveness.

Why do my hand-drawn SVG illustrations look fragmented across different lessons?▼

Hand-drawn SVG illustrations look fragmented across lessons due to inconsistent strokes, colors, and spacing; applying a cohesive design system with reusable Vue components resolves this visual fragmentation.