SnapchatOfficial·9 Agent Skills Included

Valdi

Build native iOS, Android, and macOS apps from TypeScript

Compiles declarative TypeScript components into true native views on iOS, Android, and macOS without web views or JavaScript bridges. Eliminates slow compile-test-debug cycles with instant hot reload, VSCode debugging, and live app inspection tools. Guides AI agents to write correct Valdi code, avoiding React-pattern mistakes, with skills for testing, animations, navigation, and performance tuning.

16,394|543

↗

npx skills add Snapchat/Valdi --all -g -y

Available:

Teaches AI coding assistants the correct Valdi component patterns and APIs, explicitly blocking common React-style hallucinations like hooks and functional components.

All Skills in This Repository (9)

Pure Emerald Level Indicators

📦 In Repo

Snapchat

valdi-inspect

Inspect live Valdi app render trees and memory usage via DebuggerService.

valdi-mock-breakdown

Generates Valdi TSX components from screenshots or design mocks.

valdi-perf

Diagnose and fix re-render, layout, and threading performance issues in Valdi TypeScript components.

valdi-tsx

Enforces correct Valdi TSX component patterns and prevents React API misuse.

valdi-mock-iterate

Compares design mocks against rendered Valdi screenshots and produces structured visual fix feedback.

valdi-profile

Captures CPU profiles from running Valdi apps via the Hermes debug protocol.

valdi-migrate

Convert Flutter, React, and Jetpack Compose components into Valdi TypeScript components.

valdi-animations

Implements imperative animations for Valdi component attributes and state changes.

valdi-pr-review

Reviews Valdi pull requests for regression risk, gating, thread safety, and platform parity.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install Valdi?▼

Run `npx skills add Snapchat/Valdi --all -g -y` in your terminal to install all Valdi agent skills globally.

What is the Valdi framework used for?▼

Valdi lets you write your UI once in TypeScript and compiles it to true native views on iOS, Android, and macOS. It has powered production features in Snapchat apps for 8 years.

Is Valdi the same as React Native?▼

No. Valdi uses TSX syntax but is not React — it uses class-based components with setState and compiles directly to native views with no JavaScript bridge.

Can AI agents write Valdi code correctly?▼

Yes. The included skills teach AI agents the exact Valdi APIs, lifecycle methods, and styling rules, and actively block common React-pattern mistakes.

Does Valdi support hot reload and debugging?▼

Yes. Valdi offers instant hot reload on devices and simulators, full VSCode debugging with breakpoints, and CLI tools to inspect and profile running apps.