svg

Generate SVG graphics with viewBox, simple shapes, and consistent styling.

Updated Dec 30, 2025
One-click install
npx skills add https://github.com/tazomatalax/threedee --skill svg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: svg
Source: https://github.com/tazomatalax/threedee/tree/main/.github/skills/svg
Command: npx skills add https://github.com/tazomatalax/threedee --skill svg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create clean, production-ready SVG graphics that are easy to edit and reuse across diagrams, icons, and UI elements.

Core Features & Use Cases

  • Enforces a consistent SVG structure with a viewBox and simple shapes.
  • Supports diagrams, P&ID-style graphics, UI icons, and vector illustrations for presentations.
  • Produces variants for editable versus outlined text, light/dark themes, and scalable assets.

Quick Start

Describe your SVG needs (size, shapes, and styles) and request the SVG output.

Frequently Asked Questions about svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate scalable vector graphics from design specs?

To generate scalable vector graphics, provide your size, shape, and style requirements to produce clean, production-ready SVGs with enforced viewBox and consistent styling. This ensures the output is easily editable and reusable across technical diagrams and UI elements.

Can I create P&ID-style diagrams and technical vector illustrations?

Yes, you can create P&ID-style diagrams and technical vector illustrations using simple shapes and consistent styling. The output enforces a viewBox structure, ensuring the technical diagrams are scalable and ready for use in presentations or documentation.

How do I make SVG text editable versus outlined?

You can make SVG text editable versus outlined by requesting variant outputs. The generation process produces distinct variants for editable text and outlined text, allowing you to choose the format that best suits your downstream editing or production workflow.

Does this approach support light and dark theme variants for UI icons?

Yes, this approach supports light and dark theme variants for UI icons. It generates scalable assets with consistent styling, allowing you to output multiple theme variants from a single design specification for your vector artwork.

What's the best way to structure SVGs for reuse across diagrams?

The best way to structure SVGs for reuse is to enforce a viewBox with simple shapes and consistent styling. This structure ensures the vector graphics remain clean, production-ready, and scalable across various diagrams, icons, and UI elements.