Identifies and fixes common SVG pitfalls in design-system workflows.
npx skills add https://github.com/dz07/goku-skills --skill svg-dz07
Please help me install this Agent Skill. Skill: SVG Source: https://github.com/dz07/goku-skills/tree/main/skills/svg Command: npx skills add https://github.com/dz07/goku-skills --skill svg-dz07
Creating and maintaining scalable, accessible SVG graphics across design systems can be error-prone without consistent rules for viewBox, accessibility markup, and theming.
Create an accessible SVG with a proper viewBox and currentColor theming, and embed it inline for styling consistency.
High-intent search queries and answers about installing and using this skill.
Fix SVG viewBox issues by ensuring the viewBox attribute correctly maps coordinate systems, preventing distortion during scalable rendering of icons and illustrations across design systems.
Add accessibility to SVG by including role="img" and proper title and desc tags, supporting screen readers by providing meaningful descriptions for graphics in web apps.
The best way to optimize SVGs safely is by configuring SVGO for non-destructive optimization, reducing file size while preserving accessibility markup and scalable rendering quality.
Theme inline SVGs in a design system using CSS by applying currentColor for fills and strokes, ensuring embedding and styling consistency across web applications.
Yes, this approach works for both inline and embedded SVGs, covering theming, accessibility with role and title, and safe optimization within design-system workflows.
anaghkanungo7Guide developers to create accessible, optimized SVG graphics in React/Next.js projects.
drmowinckelsDesign Hugo sites with standardized templates, asset pipelines, and multilingual configurations.
coastdigitalgroupOptimize SVG assets with SVGO, currentColor conversion, and accessibility attributes.
farmanlabConvert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.
