Individual skill
od-react-export
Not available
plugins/_official/scenarios/od-react-export/SKILL.md
Source commit e7a18df64d0e5e1161903e93bb5a302229dbeb96
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
Standard SKILL.md format has not been attested at this commit. No installation command is available; inspect the source.
Repository context
- Repository stars (not skill ratings)
- 106,669
- Repository last updated
- Nov 8, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-design Repository topic
- byok Repository topic
- design-systems Repository topic
- claude-design Repository topic
- hermes-agent Repository topic
- agent-skills Repository topic
- desktop-app Repository topic
- figma-alternative Repository topic
- prototyping Repository topic
- ui-generator Repository topic
Declared tags are partial or unavailable.
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 872 bytesopen-design.jsonasset · 5,291 bytes
Read excerpt
# 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.