Agent skill · software engineering · nexu-io
od-vue-export
od-vue-export — an agent skill for coding agents.
Why this skill is useful
Adds specific guidelines for converting design artifacts into Vue 3 components, including best practices for state management and CSS usage.
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 Vue Use this plugin when the user wants to hand an accepted OpenDesign artifact to a Vue 3 project. Workflow 1. Convert the artifact into a Vue 3 single-file component with a clear template, script, and style boundary. 2. Use Composition API only when the component needs state, lifecycle hooks, or derived values. 3. Prefer Tailwind CSS when the target project already supports it; otherwise use scoped CSS. 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 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/od-vue-export