Index of every page on this site: llms.txt
All skills
tristanmanchester avatar

/react-native-skia

@3323bc9
by Tristan Manchestertristanmanchester/agent-skills3 stars
2
Run it yourself

Build, debug, or profile React Native Skia canvases, paths, rich text, shaders, images, snapshots, video, and animated graphics. Use when Skia is selected or custom drawing is needed. Do not introduce a canvas merely because ordinary native UI should look polished or animate smoothly.

Use this Skill: https://skilld.dev/gh/tristanmanchester/agent-skills/react-native-skia

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

assetstemplatestemplate-index.md

≈451 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Template index

These templates are starting points, not one-size-fits-all answers. Check the selected template's actual imports and lifecycle against the application's installed stack; the whole collection has not been certified on a native build.

Visual surfaces

  • ambient-gradient-card.tsx — ambient card with blurred orbs
  • shimmer-cta-button.tsx — clipped shimmer button with paragraph label
  • shader-noise-background.tsx — procedural shader background
  • morphing-blob.tsx — path interpolation for organic motion
  • tilt-spotlight-card.tsx — gesture-led spotlight / card depth
  • video-frame-surface.tsx — video-backed hero / media surface
  • skottie-loader.tsx — Lottie/Skottie playback with runtime tinting

Data / status / text

  • progress-ring.tsx — animated ring / HUD pattern
  • custom-font-paragraph-badge.tsx — wrapped rich text with explicit font loading

Interaction / high-instance patterns

  • pan-zoom-image-stage.tsx and pan-zoom-math.ts — RNGH 3 pan/pinch, bounded viewport-centred geometry, and native zoom/move/reset controls. Copy both files. Read the integration and test notes.
  • sprite-atlas-field.tsx — repeated textured sprites via Atlas
  • snapshot-composite.tsx — capture React Native content into Skia

Adaptation advice

Preserve the architecture when it still suits the workload. Rename dimensions, colours, and copy to match the product. Remove secondary motion before rewriting a component solely to make it lighter; strengthen hierarchy before adding more moving parts. Check loading/error paths, cancellation, cleanup, and accessibility in the selected template rather than assuming the entry-point guidance has already been implemented in every example.

Source: SKILL.md on GitHub

Skill behaviors

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

Third-party checks

No alerts1mo4 checks · Risk SAFE
  • Gen Agent Trust Hub1mo

    The skill provides templates, documentation, and a diagnostic script for building high-performance graphics in React Native using the Skia engine. The included audit script performs static analysis on local files to verify configuration and does not perform any network or unauthorized file operations.

  • Socket1mo

    No alerts

  • Snyk1mo

    Risk: LOW · No issues

  • ZeroLeaks6mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 3323bc9. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Steadyupdated last month

Capability

metadata
{
  "version": "3.0.0",
  "reviewed": "2026-09-13"
}
Other metadata
compatibility
Current native Skia requires React Native 0.79+ and React 19+. Skia 2.10+ animation integration requires Reanimated 4; resolve the exact Worklets/native combination through the app's Expo SDK and upstream compatibility tables.

README badge

README badge for tristanmanchester/agent-skills/react-native-skia