Skip to content
Mobile
Skill

/svg

Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart',

BOOST
@software-mansion-labssoftware-mansion-labs@software-mansion-labs
From plugin
software-mansion-labs-skills
28425 skills
Install
$ npx -y skills add software-mansion-labs/skills --skill svg --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/svg

Context preview

The summary Claude sees to decide when to auto-load this skill.

Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart',

SKILL.md

svg.SKILL.md
name: svg
description: "Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app."

SVG

Software Mansion's production SVG patterns for React Native using React Native SVG.

For API details on specific components and props, webfetch https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

References

| File | When to read | |------|-------------| | `when-to-use.md` | Deciding between react-native-svg, expo-image, @expo/vector-icons, Skia, or Lottie | | `svg.md` | Installing react-native-svg; loading SVGs from URIs, XML strings, or files; filters; touch events; performance considerations; known issues |

Read it on GitHub ↗
Ships withsoftware-mansion-labs-skills

Software Mansion's set of skills for AI-assisted React Native development.

Get the whole plugin
Stats
PythonJavaScriptNodeReactReact Native
+7 tags
CSSC++MarkdownAnthropicMCPiOSAndroid
284
Stars
17
Forks
Active
Maintenance
Go
Language
3d ago
Last commit
8mo ago
Created

Repo: software-mansion-labs/skills

In this plugin
25 skills
See everything inside

Other skills on software-mansion-labs-skills.

See all 25 skills in software-mansion-labs-skills