Agent skill · software engineering · nexu-io
od-react-export
od-react-export — an agent skill for coding agents.
Why this skill is useful
Generates specific React + TypeScript code with design preservation and accessibility considerations that the AI wouldn't reliably produce on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Export To React Use this plugin when the user wants to hand an accepted OpenDesign artifact to a React app. Workflow 1. Inspect the current artifact and identify the smallest React component boundary that preserves the design. 2. Produce React 18 + TypeScript code with clear props only for content or state that is likely to vary. 3. Prefer Tailwind CSS when the target project already supports it; otherwise keep styling local and easy to move. 4. Preserve accessibility semantics from the artifact, including headings, buttons, links, labels, focus states, and alt text. 5. Finish with file placement notes, required assets, and any assumptions about routing or data. Quality Bar 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/od-react-export