Skills
.Work. You
Rest

vector-design-best-practices

Community

Master accessible, high-performance SVG design.

Design & Creative#performance#accessibility#frontend#optimization#icons#svg#vector-design
Authoranaghkanungo7
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Provides expert guidance for creating, optimizing, and implementing accessible, high-performance SVG graphics for modern web applications.

Core Features & Use Cases

  • SVG optimization: techniques and tooling (SVGO, path simplification) to reduce file size while preserving visuals.
  • Accessibility patterns: proper labeling, ARIA roles, titles, descriptions, and decorative vs meaningful graphics.
  • Framework integration & responsiveness: React/Next.js guidance, theming with currentColor, and scalable SVG practices for responsive layouts.

Quick Start

Follow the guidelines to implement accessible, optimized SVGs in your web projects.

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: vector-design-best-practices
Download link: https://github.com/anaghkanungo7/agent-skills/archive/main.zip#vector-design-best-practices

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.