What problem does it solve? Converting Figma design mockups into runnable React Native pages by hand is slow and error-prone: developers must inspect every layer, export images, translate layout coordinates, and visually verify the result. This Skill automates that entire design-to-code pipeline for RN projects. ## Core Features & Use Cases - Figma-to-RN code generation: Reads a Figma design URL via the Figma REST API, parses the layer tree using a prefix protocol (sub-, img-, bg-, btn-, fixed-, etc.), and produces JSX plus StyleSheet files with rpx responsive sizing. - Automated slicing and visual QA: Pre-slices image assets through a shared slice-manifest contract, then runs a hard rule-checking script (check-rules.mjs with 22 exit-1 rules and four gates) to reconcile generated code against cached Figma node data. - Cross-framework adaptation: Supports adapter presets (e.g., xtaro, taro) that remap RN tags, props, and screen-width APIs to RN-like cross-platform frameworks. - Use Case: Paste a Figma mobile page URL into your AI coding agent; it verifies the token, scans layers, slices images, generates the ScrollView-based page skeleton and per-block components, and validates fidelity before delivery. ## Quick Start Provide a Figma design URL and ask the agent to convert this design into a React Native page in the configured output directory.
