Use this plugin when the user wants to hand an accepted Open Design artifact to a React app.
- Inspect the current artifact and identify the smallest React component boundary that preserves the design.
- Produce React 18 + TypeScript code with clear props only for content or state that is likely to vary.
- Prefer Tailwind CSS when the target project already supports it; otherwise keep styling local and easy to move.
- Preserve accessibility semantics from the artifact, including headings, buttons, links, labels, focus states, and alt text.
- Finish with file placement notes, required assets, and any assumptions about routing or data.
- Do not flatten the artifact into generic divs.
- Do not introduce a component library unless the target project already uses it.
- Keep generated props and variants minimal.