feat: add ui-to-vue skill for batch UI-to-Vue conversion#1438
Open
EricLeeN1 wants to merge 3 commits intoaffaan-m:mainfrom
Open
feat: add ui-to-vue skill for batch UI-to-Vue conversion#1438EricLeeN1 wants to merge 3 commits intoaffaan-m:mainfrom
EricLeeN1 wants to merge 3 commits intoaffaan-m:mainfrom
Conversation
Add a new skill that converts UI design screenshots (蓝湖/Figma/etc) to Vue 3 Composition API components with support for: - Vant/Element Plus/Ant Design Vue - Three-level cut image hierarchy - Automatic public component extraction - Route configuration generation npm package: ui-to-vue-converter@1.0.2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughAdded a new skill doc Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer/CLI
participant FS as File System (designs & slices)
participant Skill as UI-to-Vue Skill
participant AI as External API (OCR / Model)
participant Repo as Output (views/components/router)
Dev->>FS: provide input directory & slices
Dev->>Skill: run CLI (--input, --ui, --output, --config)
Skill->>FS: read designs & slice files
Skill->>AI: request conversion (layout -> Vue components)
AI-->>Skill: return component code & assets
Skill->>Repo: write generated views, components, router entries
Skill-->>Dev: emit summary and verification checklist
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Greptile SummaryThis PR adds a community skill (
Confidence Score: 4/5Safe to merge after fixing the local-vs-global install mismatch that will cause the documented CLI workflow to fail. One P1 issue remains: the install instructions produce a locally-installed package whose binary isn't on PATH, breaking the documented run step for every user. All prior review concerns have been resolved; only this one blocker and a minor ordering nit remain. skills/ui-to-vue/SKILL.md — Usage section install/run mismatch Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User runs: npm install -g ui-to-vue-converter] --> B[Configure DASHSCOPE_API_KEY]
B --> C{Config source}
C -->|Env var| D[DASHSCOPE_API_KEY]
C -->|Config file| E[.ui-to-vue.config.json]
C -->|CLI flag| F[--config path]
D & E & F --> G[Run: ui-to-vue --input ./screenshots --ui vant --output ./src]
G --> H[Scan screenshot directory]
H --> I[Three-level cut image resolution\nPage > Module > Global]
I --> J[Qwen VL via DashScope API\nAnalyses each design image]
J --> K{UI library}
K -->|vant| L[Mobile H5 components\nrem units / 375px]
K -->|element-plus| M[PC admin components\npx / 1920px]
K -->|antd-vue| N[Enterprise components\npx / 1920px]
L & M & N --> O[Output: views/ + components/ + router/index.js]
Reviews (4): Last reviewed commit: "fix: add trailing newline to SKILL.md" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
skills/ui-to-vue/SKILL.md (2)
139-139: Add newline at end of file.The file is missing a trailing newline, which is a common convention for text files.
📝 Suggested fix
- GitHub: https://github.com/EricLeeN1/ui2VueConverter - npm: ui-to-vue-converter +🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@skills/ui-to-vue/SKILL.md` at line 139, Add a trailing newline to the end of SKILL.md so the file ends with a newline character (ensure the final line "npm: ui-to-vue-converter" is followed by a newline); this follows the text-file convention and fixes the missing EOF newline.
137-139: Consider adding full npm URL for consistency.The Resources section provides a full GitHub URL but only lists the npm package name. For consistency and easier access, consider adding the full npm URL.
📎 Suggested enhancement
## Resources - GitHub: https://github.com/EricLeeN1/ui2VueConverter -- npm: ui-to-vue-converter +- npm: https://www.npmjs.com/package/ui-to-vue-converter🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@skills/ui-to-vue/SKILL.md` around lines 137 - 139, Update the Resources section in SKILL.md to include the full npm URL for the package instead of (or in addition to) just the package name; replace or augment the line "- npm: ui-to-vue-converter" with "- npm: https://www.npmjs.com/package/ui-to-vue-converter" so it matches the full GitHub URL style already used and makes the npm link directly clickable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@skills/ui-to-vue/SKILL.md`:
- Line 73: Replace or remove the broken GitHub repository reference
"https://github.com/EricLeeN1/ui2VueConverter" in SKILL.md: either update that
URL to the correct repository for the npm package "ui-to-vue-converter" (or the
package's official homepage) or delete the repository line entirely; ensure the
accompanying npm instruction ("npm install ui-to-vue-converter") and CLI mention
("ui-to-vue") remain accurate and, if adding a new link, verify it resolves and
points to the public repo or package homepage.
---
Nitpick comments:
In `@skills/ui-to-vue/SKILL.md`:
- Line 139: Add a trailing newline to the end of SKILL.md so the file ends with
a newline character (ensure the final line "npm: ui-to-vue-converter" is
followed by a newline); this follows the text-file convention and fixes the
missing EOF newline.
- Around line 137-139: Update the Resources section in SKILL.md to include the
full npm URL for the package instead of (or in addition to) just the package
name; replace or augment the line "- npm: ui-to-vue-converter" with "- npm:
https://www.npmjs.com/package/ui-to-vue-converter" so it matches the full GitHub
URL style already used and makes the npm link directly clickable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
3 issues found across 1 file
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="skills/ui-to-vue/SKILL.md">
<violation number="1" location="skills/ui-to-vue/SKILL.md:2">
P1: This skill is not registered in `manifests/install-modules.json`. Without an entry there, the skill will never be installed by users running the ECC install flow, making this contribution functionally inert.</violation>
<violation number="2" location="skills/ui-to-vue/SKILL.md:138">
P2: User-facing skill doc adds an external GitHub repo link without evidence of org vetting, conflicting with repository supply-chain review policy.</violation>
<violation number="3" location="skills/ui-to-vue/SKILL.md:139">
P3: Markdown file is missing the required trailing newline, which can fail markdownlint (MD047) and block CI.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
|
|
||
| ## Resources | ||
|
|
||
| - GitHub: https://github.com/EricLeeN1/ui2VueConverter |
Contributor
There was a problem hiding this comment.
P2: User-facing skill doc adds an external GitHub repo link without evidence of org vetting, conflicting with repository supply-chain review policy.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At skills/ui-to-vue/SKILL.md, line 138:
<comment>User-facing skill doc adds an external GitHub repo link without evidence of org vetting, conflicting with repository supply-chain review policy.</comment>
<file context>
@@ -0,0 +1,139 @@
+
+## Resources
+
+- GitHub: https://github.com/EricLeeN1/ui2VueConverter
+- npm: ui-to-vue-converter
\ No newline at end of file
</file context>
…tration, security warning - Rewrite SKILL.md in English (repository convention) - Add origin: community frontmatter - Add security warning for API key config file (.gitignore) - Register skill in manifests/install-modules.json (framework-language module) Addresses: - Missing manifest registration (skill wouldn't be distributed) - Chinese-only body (inconsistent with English-first repository) - Missing .gitignore warning for API key exposure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Author
|
I fixed it before,make check again |
Comment on lines
+73
to
+85
| # Install | ||
| npm install ui-to-vue-converter | ||
|
|
||
| # Configure API key (Qwen VL - Alibaba DashScope) | ||
| export DASHSCOPE_API_KEY=your_key | ||
| # Or create .ui-to-vue.config.json | ||
|
|
||
| # Run | ||
| ui-to-vue --input ./screenshots --ui vant --output ./src | ||
|
|
||
| # PC project | ||
| ui-to-vue --input ./designs --ui element-plus --output ./src | ||
| ``` |
Contributor
There was a problem hiding this comment.
npm install ui-to-vue-converter installs the package locally in ./node_modules/.bin/, but the very next step runs ui-to-vue as a bare command. In a plain terminal, ./node_modules/.bin is not in $PATH, so users following these instructions will get command not found: ui-to-vue immediately. The install should either use -g for a global install, or the run step should use npx:
Suggested change
| # Install | |
| npm install ui-to-vue-converter | |
| # Configure API key (Qwen VL - Alibaba DashScope) | |
| export DASHSCOPE_API_KEY=your_key | |
| # Or create .ui-to-vue.config.json | |
| # Run | |
| ui-to-vue --input ./screenshots --ui vant --output ./src | |
| # PC project | |
| ui-to-vue --input ./designs --ui element-plus --output ./src | |
| ``` | |
| # Install globally | |
| npm install -g ui-to-vue-converter | |
| # Configure API key (Qwen VL - Alibaba DashScope) | |
| # Set DASHSCOPE_API_KEY env var, or create .ui-to-vue.config.json | |
| # Run | |
| ui-to-vue --input ./screenshots --ui vant --output ./src | |
| # PC project | |
| ui-to-vue --input ./designs --ui element-plus --output ./src |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ui-to-vuefor batch converting UI design screenshots to Vue 3 componentsDetails
This skill enables users to quickly convert UI screenshots from tools like 蓝湖/Figma into production-ready Vue 3 Composition API code.
npm package: ui-to-vue-converter@1.0.2
GitHub repo: https://github.com/EricLeeN1/ui2VueConverter
Test Plan
🤖 Generated with Claude Code
Summary by cubic
Adds the
ui-to-vueskill to batch-convert UI screenshots (Figma/蓝湖) into Vue 3 Composition API components. Registers the skill and documents secure setup.New Features
ui-to-vue-converter@1.0.2.vant,element-plus, orantd-vue; auto-extracts shared components; generates routes.Documentation and Setup
SKILL.mdin English with usage, config (DASHSCOPE_API_KEY), and troubleshooting.origin: communityand a warning to add.ui-to-vue.config.jsonto.gitignore.skills/ui-to-vueinmanifests/install-modules.json.Written for commit 5c591dd. Summary will update on new commits.
Summary by CodeRabbit