Skills
.Work. You
Rest

svg-illustrations

Community

Hand-drawn SVG illustrations for diagrams.

Design & Creative#markdown#vue#svg#design-system#illustrations#visual-design#hand-drawn
Authorfawzymohamed
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: svg-illustrations
Download link: https://github.com/fawzymohamed/devops/archive/main.zip#svg-illustrations

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.