ui-convert-extractor-react
Installation
SKILL.md
React Extractor
Converts React components (JSX/TSX) into Design IR. Handles React, Next.js, and Remix projects.
What This Extracts
| Source Pattern | IR Output |
|---|---|
<div className="..."> |
Frame node (fr) with mapped styles |
<button onClick={...}>Submit</button> |
Button node (btn) with text |
<input type="text" /> |
Input node (inp) |
<img src="..." /> |
Image node (img) |
<h1>Title</h1> |
Text node (txt) with heading font |
<ul><li>...</li></ul> |
List container (lst) + list items (li) |
<table>...</table> |
Table nodes (tbl → tr → td) |
| Component imports | Component ref (ref) with overrides |
| Conditional rendering | Primary branch only |
Related skills