svg-illustrations
SVG Illustration System
This skill provides guidance for creating consistent, high-quality hand-drawn style SVG illustrations for the DevOps LMS.
Overview
The illustration system uses a hybrid approach:
- Reusable Vue Components - For common diagram patterns
- Design System Composable - Shared constants and utilities
- Custom SVG - Only when no component fits (rare)
Available Components
1. IllustrationLinearFlow
Purpose: Sequential step-by-step processes
More from fawzymohamed/devops
cheat-sheets
Expert knowledge for creating effective cheat sheets with PDF export. Activate when creating/editing cheat sheet content, designing quick reference sheets, or working with PDF export functionality. (project)
15nuxt-ui
Expert knowledge for Nuxt UI v4 components and patterns. Activate when creating UI components, working with buttons, cards, forms, or any Nuxt UI component.
13ui-ux-design
UI/UX design patterns and best practices for the LMS. Activate when designing pages, creating layouts, working on user experience, or building navigation.
13quiz-system
Knowledge for implementing the LMS quiz system with Nuxt UI. Activate when working with quiz components, question types, scoring, or quiz-related composables.
2nuxt-content
Expert knowledge for @nuxt/content module in Nuxt 4. Activate when working with content directory, markdown files, frontmatter, or ContentRenderer.
1vue-composables
Patterns for Vue 3 composables with localStorage persistence in Nuxt 4. Activate when creating composables, working with useProgress, useQuiz, useCertificate, or localStorage.
1