一键在 Manus 中运行任何 Skill

svg

星标2

分支0

更新时间2026年3月27日 23:06

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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

carlos3g

carlos3g/react-native-playground

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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

同仓库更多 Skills

同仓库

analytics-tracking

carlos3g/react-native-playground

When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see ab-test-setup.

2026-03-272

building-native-ui

carlos3g/react-native-playground

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

2026-03-272

expo-tailwind-setup

carlos3g/react-native-playground

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

2026-03-272

animations

carlos3g/react-native-playground

Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, interpolation, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.

2026-03-272

audio

carlos3g/react-native-playground

Software Mansion's best practices for audio in React Native using react-native-audio-api. Covers audio playback (buffer sources, oscillators, streaming), recording (file, callback, graph), audio effects (gain, filters, delay, convolver, panner, waveshaper), real-time analysis and visualization, audio worklets (custom synthesis, UIRuntime/AudioRuntime), system integration (sessions, interruptions, permissions), and testing. Trigger on: react-native-audio-api, AudioContext, AudioRecorder, AudioBuffer, AudioBufferSourceNode, AudioBufferQueueSourceNode, OscillatorNode, StreamerNode, GainNode, BiquadFilterNode, DelayNode, ConvolverNode, StereoPannerNode, WaveShaperNode, AnalyserNode, AudioParam, AudioManager, PlaybackNotificationManager, RecordingNotificationManager, WorkletNode, WorkletSourceNode, WorkletProcessingNode, audio playback, record audio, microphone, waveform, audio visualization, audio streaming, audio worklet, or any React Native feature that captures, processes, or emits sound.

2026-03-272

gestures

carlos3g/react-native-playground

Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler. Use when implementing tap, pan, pinch, rotation, swipe, long press, fling, hover, drag, or any touch interaction. Trigger on: 'gesture handler', 'GestureDetector', 'tap gesture', 'pan gesture', 'pinch gesture', 'rotation gesture', 'long press', 'fling', 'hover gesture', 'swipe', 'pinch to zoom', 'drag', 'touch handling', 'Pressable', 'RectButton', 'Swipeable', 'DrawerLayout', 'VirtualGestureDetector', or any request to handle user touch input in a React Native app.

2026-03-272

name

svg

description

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