Use this plugin when the user wants to hand an accepted OpenDesign artifact to a Vue 3 project.
Workflow
Convert the artifact into a Vue 3 single-file component with a clear template, script, and style boundary.
Use Composition API only when the component needs state, lifecycle hooks, or derived values.
Prefer Tailwind CSS when the target project already supports it; otherwise use scoped CSS.
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 add Vue state for static content.
Do not introduce a UI framework unless the target project already uses it.
Keep generated props and emits minimal.
1---2name: od-vue-export3description: Export To Vue4---5# Export To Vue67Use this plugin when the user wants to hand an accepted OpenDesign artifact to a Vue 3 project.89## Workflow10111. Convert the artifact into a Vue 3 single-file component with a clear template, script, and style boundary.122. Use Composition API only when the component needs state, lifecycle hooks, or derived values.133. Prefer Tailwind CSS when the target project already supports it; otherwise use scoped CSS.144. Preserve accessibility semantics from the artifact, including headings, buttons, links, labels, focus states, and alt text.155. Finish with file placement notes, required assets, and any assumptions about routing or data.1617## Quality Bar1819- Do not add Vue state for static content.20- Do not introduce a UI framework unless the target project already uses it.21- Keep generated props and emits minimal.
Run npx skillmds@latest add gabrielmoreira/od-vue-export in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Export To Vue It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
gabrielmoreira (@gabrielmoreira) published this skill. Their other Agent Skills are listed on their SkillMD profile.
gabrielmoreira