Svg

Skills with strong personal bias

Install

npx -y skills add litingyes/skills --skill svg

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Define practical SVG standards for element/attribute usage, icon and logo design, animation decisions, and engineering integration. Use when users need SVG creation guidance, SVG code reviews, icon/logo specifications, animation implementation, or frontend SVG optimization and accessibility checks.

SKILL.md

2.5 KB, as published. Nobody here has run it

SVG Engineering

Purpose

Use this skill to standardize SVG authoring and integration workflows:

Select the right SVG elements and attributes for the target outcome.
Build scalable, theme-friendly icons and logos.
Choose animation techniques with performance and accessibility guardrails.
Apply production-ready practices for responsive behavior and interaction states.

Scope And Boundaries

Cover technical SVG standards and engineering best practices only.
Do not assume brand language, visual style, or business-specific design constraints.
If key constraints are missing (brand palette, size targets, motion style, browser support), ask for clarification first.
Keep this file as routing only; detailed guidance lives in references/.

Core Principles

Semantics before complexity: prefer simple primitives and structure over overbuilt paths.
Coordinate-system clarity: always reason from viewBox and scaling behavior.
Accessible by default: include labeling and reduced-motion strategy from the start.
Performance is part of design: optimize structure and animation budget early.
Reusable output: support theming, responsiveness, and maintainable handoff.

Module Routing

Read modules based on user intent:

Element and attribute selection
- See Elements and Attributes
Icon and logo standards
- See Icon and Logo Best Practices
Animation approach and constraints
- See Animation Best Practices
Engineering integration patterns
- See Engineering Techniques
Ready-to-use practical snippets
- See SVG Practical Examples

Minimal Output Contract

For any SVG task, always provide:

Selected approach and why it matches the scenario.
Critical parameters (viewBox, sizing strategy, color strategy, naming/reuse model).
Accessibility and compatibility considerations.
Performance trade-offs and optimization notes.
An executable checklist for implementation or review.