Od React Export
Exports an accepted OpenDesign artifact into React 18 and TypeScript components, using Tailwind CSS
by nexu-io · Apache-2.0
The skill
Exports an accepted OpenDesign artifact into React 18 and TypeScript components, using Tailwind CSS when the target project supports it and preserving headings, buttons, links, labels, focus states, and alt text. Use when the user wants to convert a finished OpenDesign design into a React app, including choosing component boundaries, props, file placement, and required assets.
Export To React
Use this plugin when the user wants to hand an accepted OpenDesign artifact to a React app.
Workflow
- 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.
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.
Use this skill
Connect your agent to the Skill Store MCP server and ask for it by ref: nexu-io/od-react-export-84498681493.
Details
- Publisher
- nexu-io
- Category
- Software Development › Frontend & UI
- License
- Apache-2.0
- Updated
- 2026-10-16
References
More from nexu-io
- YouTube Clipper Pull source video, slice highlights, add captions
- Video Downloader Download video from YouTube and other platforms
- Sora Video Generation Generate and remix short clips via the Sora API
- Od Contribute One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders.