Menu
Scalable, accessible, theme-aware visuals
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/fabioc-aloha/Alex_Plug_In --skill svg-graphicsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Create and maintain ASCII visual dashboards for project tracking with parallel lane progress bars
Store and manage voice samples for TTS cloning — portable, version-controlled audio references
Clear documentation through visual excellence
Showing SKILL.md
Based on SOC occupation classification
| name | svg-graphics |
| description | Scalable, accessible, theme-aware visuals |
| tier | standard |
| applyTo | **/*.svg,**/*icon*,**/*graphic* |
Scalable, accessible, theme-aware visuals.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300">
<rect width="100%" height="100%" fill="#1a1a2e"/>
<text x="50" y="100" font-size="48" fill="#fff" font-family="system-ui">
Project Name
</text>
<text x="50" y="150" font-size="24" fill="#888">One-line description</text>
</svg>
| Technique | Use Case |
|---|---|
viewBox | Responsive scaling |
<defs> + <use> | Reusable components |
<linearGradient> | Modern backgrounds |
<clipPath> | Shaped containers |
| CSS variables | Theme switching |
<style>
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a2e; }
.text { fill: #ffffff; }
}
@media (prefers-color-scheme: light) {
.bg { fill: #ffffff; }
.text { fill: #1a1a2e; }
}
</style>
| Size | Use |
|---|---|
| 16x16 | Favicon, small UI |
| 32x32 | Tab icon, lists |
| 128x128 | App icon |
| 512x512 | Store listing |
<g opacity="0">
<text x="50" y="100" font-size="48" fill="#fff">Title</text>
<animate attributeName="opacity" from="0" to="1" dur="0.8s" begin="0.5s" fill="freeze"/>
</g>
| Attribute | Purpose |
|---|---|
begin | Delay before start |
dur | Animation duration |
fill | "freeze" (keep state) or "remove" (revert) |
Increment begin by 0.3s per element for smooth staggering.
Note: GitHub README renders SVG statically — animations won't play.
Separate position and animation transforms:
<!-- Outer: position -->
<g transform="translate(600, 150)">
<!-- Inner: animation -->
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
<circle r="20" fill="#4a90d9"/>
</g>
</g>
Rule: Never mix static positioning and animated transforms on the same element.
3-layer pattern for shaped containers:
<defs>
<clipPath id="card">
<rect x="50" y="50" width="400" height="200" rx="16"/>
</clipPath>
</defs>
<!-- Layer 1: Background -->
<rect x="50" y="50" width="400" height="200" rx="16" fill="#f6f8fa"/>
<!-- Layer 2: Clipped content -->
<g clip-path="url(#card)">
<image href="photo.jpg" x="50" y="50" width="400" height="200"/>
</g>
<!-- Layer 3: Border (on top) -->
<rect x="50" y="50" = = = = = =/>
{
"plugins": [
"preset-default",
{ "name": "removeViewBox", "active": false },
{ "name": "removeDimensions", "active": true }
]
}
Critical: Never remove viewBox (breaks scaling) or <title> (breaks accessibility).
| Type | Target | Max |
|---|---|---|
| Icon | < 1 KB | 2 KB |
| Badge | < 2 KB | 5 KB |
| Banner | < 10 KB | 25 KB |
| Diagram | < 25 KB | 50 KB |
role="img" on decorative SVGs<title> for screen readersaria-hidden="true" if purely decorative| Scenario | SVG | Mermaid |
|---|---|---|
| README branding | ✅ | ❌ |
| Dev docs flow | ❌ | ✅ |
| Dark/light theme | ✅ | ⚠️ |
| High-DPI output | ✅ | ⚠️ |
AI defaults to stacking circles — producing geometric snowmen. Real subjects need <path> with Bezier curves.
Mandatory Rules:
<path> with curves for ALL organic shapes| Animal | Key Features | Common Mistake |
|---|---|---|
| Dog | Snout, floppy ears on SIDE, 4 legs | Flat face, ears on top |
| Cat | Pointed ears on TOP, whiskers, slender | No whiskers, stocky |
| Bird | Beak, wings, 2 legs, NO arms | 4 legs, arms not wings |
<!-- Dog body outline - single path defining silhouette -->
<path d="M 120,180 C 120,140 140,110 180,105 C 210,100 250,100 280,110..."
fill="#c89050" stroke="#6b4226" stroke-width="2"/>
Why: Silhouette reads as "dog" even without color. ALL shapes use <path> — no perfect circles.
| Tool | Purpose |
|---|---|
| SVGO | Optimize/minify |
| Inkscape | Visual editing |
| svg-to-png | Rasterization |