Convert Flutter, React, and Jetpack Compose components into Valdi TypeScript components.
npx skills add https://github.com/Snapchat/Valdi --skill valdi-migrate
Please help me install this Agent Skill. Skill: valdi-migrate Source: https://github.com/Snapchat/Valdi/tree/main/ai-skills/skills/valdi-migrate Command: npx skills add https://github.com/Snapchat/Valdi --skill valdi-migrate
Migrating UI code from Flutter, React, or Jetpack Compose to Valdi is error-prone because Valdi has no hooks, no functional components, no Compose modifiers, and a void-returning onRender method. This Skill prevents invalid patterns and maps framework-specific APIs to correct Valdi equivalents.
Convert this React component with useState and a FlatList into an equivalent Valdi StatefulComponent.
High-intent search queries and answers about installing and using this skill.
Convert function components to classes extending Component or StatefulComponent, replace useState with a state field and this.setState, and move useEffect logic into onCreate, onDestroy, or onViewModelUpdate. Replace this.props with this.viewModel and render lists with forEach instead of map.
Map StatelessWidget to a class extending Component and StatefulWidget to StatefulComponent with a typed state object. Replace build() with a void onRender(), initState with onCreate, dispose with onDestroy, and Navigator.push with navigationController.push.
No, Valdi has no hooks and no functional components. State lives in a StatefulComponent state field updated via this.setState, and side effects run in lifecycle methods onCreate, onDestroy, and onViewModelUpdate.
Valdi has no Modifier chain or remember API. Layout and styling attributes like padding, flexDirection, and gap are set directly as element attributes, and state is held in StatefulComponent fields rather than mutableStateOf.
Valdi JSX is a side-effect statement, not a returned value, so map() results are discarded. Use forEach inside onRender to emit child elements, and assign a key attribute to each repeated child.
Use createProviderComponentWithKeyName to define a provider, render it at the root with a value, and wrap consumers with the withProviders higher-order component. Consumers read values from this.viewModel.providersValues.
antonyfmunozIntegrate LLM-generated React TSX pages into SaaS codebases with route and sidebar wiring.
SnapchatInspect live Valdi app render trees and memory usage via DebuggerService.
petrogurcakReviews database code for N+1 queries, missing indexes, and transaction handling.
AradotsoExtract Figma design tokens, components, and screens into structured Flutter guidance.
