Skills
.Work. You
Rest

svg-graphics

Community

Scalable, accessible, theme-aware visuals.

Design & Creative#design#accessibility#graphics#animation#svg#vector#illustration
Authorfabioc-aloha
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides guidance and templates for creating scalable, accessible, and theme-aware vector graphics (SVG) for various documentation and UI needs.

Core Features & Use Cases

  • SVG Creation & Optimization: Learn best practices for designing SVGs, including using viewBox, <defs>, and CSS variables for theming.
  • Animation: Implement SMIL animations for dynamic effects like fade-ins and staggered entrances.
  • Illustration Techniques: Master techniques like clip-path layering and the "snowman problem" for drawing recognizable real-world subjects.
  • Use Case: Generate a custom SVG banner for a GitHub README that adapts to dark and light modes, or create a clear, scalable diagram illustrating a system architecture.

Quick Start

Use the svg-graphics skill to generate a basic SVG banner template for a project README.

Dependency Matrix

Required Modules

None required

Components

references

💻 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-graphics
Download link: https://github.com/fabioc-aloha/AIRS_Data_Analysis/archive/main.zip#svg-graphics

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.