svg-precision
Builds and checks SVG code for UI assets and diagrams ensuring cross-browser compatibility.
Install
mkdir -p .claude/skills/svg-precision && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/405" && unzip -o skill.zip -d .claude/skills/svg-precision && rm skill.zipInstalls to .claude/skills/svg-precision
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Generate deterministic SVGs from structured specs with validation and rendering. Use for icons, diagrams, charts, UI mockups, and technical drawings.Key capabilities
- →Translate visual requirements into structured SVG specifications
- →Build SVG files using the svg_cli.py build script
- →Validate SVG code structure using the svg_cli.py validate script
- →Generate PNG previews for visual verification
- →Apply stable layout patterns from predefined recipes
How it works
The skill translates user requests into explicit specifications, builds the SVG using a CLI tool, and performs validation checks before rendering a preview.
Inputs & outputs
When to use svg-precision
- →Creating custom icon sets
- →Building SVG data visualizations
- →Generating technical UI mockups
- →Validating SVG code for production
- →Rendering SVG previews
About this skill
SVG Precision Skill
Build SVGs from explicit scene specifications, then validate before handing them off.
Workflow
- Translate the request into a concrete spec with fixed dimensions and coordinates.
- Use
references/spec.mdfor templates andreferences/recipes.mdfor stable layout patterns. - Build the SVG with
scripts/svg_cli.py build. - Validate with
scripts/svg_cli.py validate. - Render a PNG preview when the user needs a quick visual check.
Rules
- Set
viewBox, width, and height explicitly. - Prefer absolute coordinates and simple shapes.
- Treat text as risky when exact rendering matters.
- Avoid exotic filters unless they are necessary and testable.
When not to use it
- →When the project requires exotic filters that are not testable
- →When exact text rendering is critical to the output
Prerequisites
Limitations
- →Requires explicit definition of viewBox, width, and height
- →Restricts the use of complex filters
- →Relies on absolute coordinates and simple shapes
How it compares
Unlike manual SVG coding, this workflow enforces deterministic generation through explicit coordinate validation and standardized layout patterns.
Compared to similar skills
svg-precision side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| svg-precision (this skill) | 527 | 4mo | Review | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
| frontend-slides | 95 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".