Enforces correct Valdi TSX component patterns and prevents React API misuse.
npx skills add https://github.com/Snapchat/Valdi --skill valdi-tsx
Please help me install this Agent Skill. Skill: valdi-tsx Source: https://github.com/Snapchat/Valdi/tree/main/ai-skills/skills/valdi-tsx Command: npx skills add https://github.com/Snapchat/Valdi --skill valdi-tsx
AI assistants frequently hallucinate React patterns—hooks, functional components, this.props, useEffect—that do not exist in Valdi, even though Valdi uses TSX/JSX syntax. This Skill supplies the correct Valdi component, styling, event, and lifecycle rules so generated code compiles to native views on iOS, Android, and macOS.
Write a Valdi TSX component with a counter button using StatefulComponent, setState, and correct Valdi styling rules.
High-intent search queries and answers about installing and using this skill.
Extend Component or StatefulComponent from valdi_core/src/Component and implement onRender() as a void method where JSX is a statement, not a return value. Use this.viewModel for props and this.setState() to trigger re-renders.
No, React hooks do not exist in Valdi despite the TSX syntax. Use a state property initializer plus this.setState() for updates, and lifecycle methods onCreate, onViewModelUpdate, and onDestroy instead of useEffect.
Valdi uses Yoga flexbox with type-safe Style objects, supporting flexDirection, justifyContent, flexGrow, and gap. It does not support CSS Grid, the flex shorthand, paddingHorizontal, or fontSize—labels use font strings like 'system 20'.
Valdi has no DOM, so global listeners like addEventListener do not exist; use element callbacks such as onTap, onPress, and onChange. For timers, use this.setTimeoutDisposable() so timers auto-cancel when the component is destroyed.
Only primitive types (string, number, boolean) and other @ExportModel-annotated interfaces can be exported to native code. Custom type aliases like union string literals cause compiler errors and must be kept in internal State instead.
Cbanzaime23Install and configure the BMad Builder module from assets/module.yaml into _bmad config files.
SnapchatInspect live Valdi app render trees and memory usage via DebuggerService.
gluestackOptimize Gluestack UI v4 component rendering across native and web platforms.
TheBushidoCollectiveProvide styling patterns for React Native Web components using StyleSheet, theming, and responsive design.
