skills.rest
Snapchat
SnapchatOFFICIAL
Explore all skills by this author →
Website𝕏@snapGitHub

valdi-mock-breakdown

Generates Valdi TSX components from screenshots or design mocks.

16.4k|541|Updated Nov 6, 2025
Search Tags:#typeScript#valdi#TSX#ui generation#Component#Cross-Platform#mock-to-code
One-click install
npx skills add https://github.com/Snapchat/Valdi --skill valdi-mock-breakdown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: valdi-mock-breakdown
Source: https://github.com/Snapchat/Valdi/tree/main/ai-skills/skills/valdi-mock-breakdown
Command: npx skills add https://github.com/Snapchat/Valdi --skill valdi-mock-breakdown

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converting a visual design mock or screenshot into working Valdi UI code requires manual layout analysis, correct mapping to Valdi primitives, and knowledge of Valdi-specific rules that differ sharply from React. This Skill automates that translation, producing a complete, compilable .tsx component from an image.

Core Features & Use Cases

  • Visual Layout Analysis: Breaks down a screenshot or Figma export into structure, sections, typography, colors, and spacing before writing any code.
  • Primitive and Widget Mapping: Maps visual patterns to Valdi elements like <view>, <label>, <scroll>, and <shape>, and discovers shared widget library components in the workspace for higher fidelity.
  • Valdi-Correct Code Generation: Produces class-based StatefulComponent code with proper Style objects, state wiring via setState, and calibrated font sizes, colors, and spacing, while avoiding common React-isms that break Valdi builds.
  • Use Case: A designer hands you a screenshot of a settings screen with toggle rows and a save button. This Skill analyzes the layout, selects the right widgets, and outputs a complete SettingsScreen.tsx with wired interactive state.

Quick Start

Provide a screenshot or design mock and ask the AI to turn this screen into a Valdi component.

Frequently Asked Questions about valdi-mock-breakdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a screenshot or design mock into Valdi code?▼

Provide the image and let the Skill analyze the layout top-to-bottom, identifying sections, components, typography, colors, and spacing. It then maps each visual pattern to Valdi primitives or workspace widgets and outputs a complete, compilable .tsx file.

How to build UI components in Valdi versus React?▼

Valdi uses class-based StatefulComponent with an onRender method that returns void, not JSX. There are no hooks, no functional components, and no this.props; state lives in a class field updated via this.setState, and props come from this.viewModel.

Does Valdi support flexbox layout and gap spacing?▼

Valdi uses Yoga flexbox with flexDirection, justifyContent, alignItems, and flexGrow as a number. The gap, rowGap, and columnGap properties are available, though margin on children remains the common convention.

Why does my Valdi style fail to build?▼

Common build failures come from React-style properties that do not exist in Valdi: borderRight, paddingHorizontal, flex: 1, overflow: 'hidden', and string values for opacity or flexGrow. Use borderWidth, padding shorthand like '10 20', flexGrow as a number, and overflow 'visible' or 'scroll'.

Can Valdi render charts or custom shapes?▼

Yes, use GeometricPathBuilder to construct paths with moveTo, lineTo, and cubicTo, then render them in a <shape> element with strokeColor and strokeWidth. Monotone cubic Hermite interpolation is recommended for smooth data curves without overshoot.

Related Skills

Explore More Software Engineering Skills→
julieclarksonjulieclarkson

integrate-figma

Pull Figma design assets into a case study timeline and media library.

Community
Intermediate
SnapchatSnapchat
16.4k

valdi-inspect

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

Official
Advanced
mvillmowmvillmow
18

mojo-lint-syntax

Validate Mojo syntax against v0.25.7+ standards and detect deprecated patterns.

Community
Basic
Busboom-FooBusboom-Foo

project-initiation

Dispatch the sprint-planner agent to generate overview, specification, and usecases documents.

Official
Intermediate