From 1c06ad95248b80ed5cc402fafcc91a369f45c7dc Mon Sep 17 00:00:00 2001 From: Affaan Mustafa Date: Mon, 11 May 2026 05:57:38 -0400 Subject: [PATCH] docs: salvage ui-to-vue skill --- .claude-plugin/marketplace.json | 2 +- .claude-plugin/plugin.json | 2 +- AGENTS.md | 4 +- README.md | 6 +- README.zh-CN.md | 2 +- docs/zh-CN/AGENTS.md | 4 +- docs/zh-CN/README.md | 6 +- manifests/install-modules.json | 3 +- package.json | 1 + skills/ui-to-vue/SKILL.md | 134 ++++++++++++++++++++++++++++++++ 10 files changed, 150 insertions(+), 14 deletions(-) create mode 100644 skills/ui-to-vue/SKILL.md diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index ca7b1038..68ee985d 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -11,7 +11,7 @@ { "name": "ecc", "source": "./", - "description": "The most comprehensive Claude Code plugin — 50 agents, 187 skills, 68 legacy command shims, selective install profiles, and production-ready hooks for TDD, security scanning, code review, and continuous learning", + "description": "The most comprehensive Claude Code plugin — 50 agents, 188 skills, 68 legacy command shims, selective install profiles, and production-ready hooks for TDD, security scanning, code review, and continuous learning", "version": "2.0.0-rc.1", "author": { "name": "Affaan Mustafa", diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index e24aae21..b5c9a8c0 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "ecc", "version": "2.0.0-rc.1", - "description": "Battle-tested Claude Code plugin for engineering teams — 50 agents, 187 skills, 68 legacy command shims, production-ready hooks, and selective install workflows evolved through continuous real-world use", + "description": "Battle-tested Claude Code plugin for engineering teams — 50 agents, 188 skills, 68 legacy command shims, production-ready hooks, and selective install workflows evolved through continuous real-world use", "author": { "name": "Affaan Mustafa", "url": "https://x.com/affaanmustafa" diff --git a/AGENTS.md b/AGENTS.md index d72e00aa..e3166b4f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,6 +1,6 @@ # Everything Claude Code (ECC) — Agent Instructions -This is a **production-ready AI coding plugin** providing 50 specialized agents, 187 skills, 68 commands, and automated hook workflows for software development. +This is a **production-ready AI coding plugin** providing 50 specialized agents, 188 skills, 68 commands, and automated hook workflows for software development. **Version:** 2.0.0-rc.1 @@ -146,7 +146,7 @@ Troubleshoot failures: check test isolation → verify mocks → fix implementat ``` agents/ — 50 specialized subagents -skills/ — 187 workflow skills and domain knowledge +skills/ — 188 workflow skills and domain knowledge commands/ — 68 slash commands hooks/ — Trigger-based automations rules/ — Always-follow guidelines (common + per-language) diff --git a/README.md b/README.md index 65607387..180a60f5 100644 --- a/README.md +++ b/README.md @@ -350,7 +350,7 @@ If you stacked methods, clean up in this order: /plugin list ecc@ecc ``` -**That's it!** You now have access to 50 agents, 187 skills, and 68 legacy command shims. +**That's it!** You now have access to 50 agents, 188 skills, and 68 legacy command shims. ### Dashboard GUI @@ -1338,7 +1338,7 @@ The configuration is automatically detected from `.opencode/opencode.json`. |---------|-------------|----------|--------| | Agents | PASS: 50 agents | PASS: 12 agents | **Claude Code leads** | | Commands | PASS: 68 commands | PASS: 31 commands | **Claude Code leads** | -| Skills | PASS: 187 skills | PASS: 37 skills | **Claude Code leads** | +| Skills | PASS: 188 skills | PASS: 37 skills | **Claude Code leads** | | Hooks | PASS: 8 event types | PASS: 11 events | **OpenCode has more!** | | Rules | PASS: 29 rules | PASS: 13 instructions | **Claude Code leads** | | MCP Servers | PASS: 14 servers | PASS: Full | **Full parity** | @@ -1443,7 +1443,7 @@ ECC is the **first plugin to maximize every major AI coding tool**. Here's how e |---------|------------|------------|-----------|----------| | **Agents** | 50 | Shared (AGENTS.md) | Shared (AGENTS.md) | 12 | | **Commands** | 68 | Shared | Instruction-based | 31 | -| **Skills** | 187 | Shared | 10 (native format) | 37 | +| **Skills** | 188 | Shared | 10 (native format) | 37 | | **Hook Events** | 8 types | 15 types | None yet | 11 types | | **Hook Scripts** | 20+ scripts | 16 scripts (DRY adapter) | N/A | Plugin hooks | | **Rules** | 34 (common + lang) | 34 (YAML frontmatter) | Instruction-based | 13 instructions | diff --git a/README.zh-CN.md b/README.zh-CN.md index eca0a059..98e52c60 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -160,7 +160,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/" /plugin list ecc@ecc ``` -**完成！** 你现在可以使用 50 个代理、187 个技能和 68 个命令。 +**完成！** 你现在可以使用 50 个代理、188 个技能和 68 个命令。 ### multi-* 命令需要额外配置 diff --git a/docs/zh-CN/AGENTS.md b/docs/zh-CN/AGENTS.md index 1c4db83d..f48b0dda 100644 --- a/docs/zh-CN/AGENTS.md +++ b/docs/zh-CN/AGENTS.md @@ -1,6 +1,6 @@ # Everything Claude Code (ECC) — 智能体指令 -这是一个**生产就绪的 AI 编码插件**，提供 50 个专业代理、187 项技能、68 条命令以及自动化钩子工作流，用于软件开发。 +这是一个**生产就绪的 AI 编码插件**，提供 50 个专业代理、188 项技能、68 条命令以及自动化钩子工作流，用于软件开发。 **版本:** 2.0.0-rc.1 @@ -147,7 +147,7 @@ ``` agents/ — 50 个专业子代理 -skills/ — 187 个工作流技能和领域知识 +skills/ — 188 个工作流技能和领域知识 commands/ — 68 个斜杠命令 hooks/ — 基于触发的自动化 rules/ — 始终遵循的指导方针（通用 + 每种语言） diff --git a/docs/zh-CN/README.md b/docs/zh-CN/README.md index 7105c722..5f189265 100644 --- a/docs/zh-CN/README.md +++ b/docs/zh-CN/README.md @@ -224,7 +224,7 @@ Copy-Item -Recurse rules/typescript "$HOME/.claude/rules/" /plugin list ecc@ecc ``` -**搞定！** 你现在可以使用 50 个智能体、187 项技能和 68 个命令了。 +**搞定！** 你现在可以使用 50 个智能体、188 项技能和 68 个命令了。 *** @@ -1134,7 +1134,7 @@ opencode |---------|-------------|----------|--------| | 智能体 | PASS: 50 个 | PASS: 12 个 | **Claude Code 领先** | | 命令 | PASS: 68 个 | PASS: 31 个 | **Claude Code 领先** | -| 技能 | PASS: 187 项 | PASS: 37 项 | **Claude Code 领先** | +| 技能 | PASS: 188 项 | PASS: 37 项 | **Claude Code 领先** | | 钩子 | PASS: 8 种事件类型 | PASS: 11 种事件 | **OpenCode 更多！** | | 规则 | PASS: 29 条 | PASS: 13 条指令 | **Claude Code 领先** | | MCP 服务器 | PASS: 14 个 | PASS: 完整 | **完全对等** | @@ -1242,7 +1242,7 @@ ECC 是**第一个最大化利用每个主要 AI 编码工具的插件**。以 |---------|------------|------------|-----------|----------| | **智能体** | 50 | 共享 (AGENTS.md) | 共享 (AGENTS.md) | 12 | | **命令** | 68 | 共享 | 基于指令 | 31 | -| **技能** | 187 | 共享 | 10 (原生格式) | 37 | +| **技能** | 188 | 共享 | 10 (原生格式) | 37 | | **钩子事件** | 8 种类型 | 15 种类型 | 暂无 | 11 种类型 | | **钩子脚本** | 20+ 个脚本 | 16 个脚本 (DRY 适配器) | N/A | 插件钩子 | | **规则** | 34 (通用 + 语言) | 34 (YAML 前页) | 基于指令 | 13 条指令 | diff --git a/manifests/install-modules.json b/manifests/install-modules.json index c7bfbf11..5941ba2b 100644 --- a/manifests/install-modules.json +++ b/manifests/install-modules.json @@ -149,7 +149,8 @@ "skills/rust-testing", "skills/springboot-patterns", "skills/springboot-tdd", - "skills/springboot-verification" + "skills/springboot-verification", + "skills/ui-to-vue" ], "targets": [ "claude", diff --git a/package.json b/package.json index 87605f8c..ca6a7292 100644 --- a/package.json +++ b/package.json @@ -227,6 +227,7 @@ "skills/terminal-ops/", "skills/token-budget-advisor/", "skills/ui-demo/", + "skills/ui-to-vue/", "skills/unified-notifications-ops/", "skills/verification-loop/", "skills/video-editing/", diff --git a/skills/ui-to-vue/SKILL.md b/skills/ui-to-vue/SKILL.md new file mode 100644 index 00000000..04bd9f84 --- /dev/null +++ b/skills/ui-to-vue/SKILL.md @@ -0,0 +1,134 @@ +--- +name: ui-to-vue +description: Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue. +origin: community +--- + +# UI To Vue + +Batch-convert UI design screenshots into Vue 3 Composition API component code. + +## When to Use + +- The user provides a directory of design screenshots or design-export images. +- The target application is Vue 3. +- The user wants a first pass of page components, shared components, and router wiring. +- The user specifies Vant, Element Plus, or Ant Design Vue as the component library. + +## When Not to Use + +- The user has only one screenshot and wants a bespoke component. +- The target project is not Vue. +- The design requires detailed interaction logic, data flow, or accessibility review. +- The screenshots contain private customer data that cannot be sent to an external model API. + +## Inputs + +Use an input directory that groups screenshots by module and page state: + +```text +screenshots/ +|-- HomePage/ +| |-- List/ +| | |-- HomePage-List-Default@3x.png +| | `-- cut-images/ +| |-- cut-images/ +| `-- HomePage-Default@3x.png +`-- cut-images/ +``` + +Supported cut-image directory names include `assets`, `icons`, `sprites`, `cut`, `images`, and `cut-images`. + +## Conversion Model + +- Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empty states. +- UI library mapping: map native visual elements to Vant, Element Plus, or Ant Design Vue components where practical. +- Cut-image priority: prefer page-level assets, then module-level assets, then global shared assets. +- Component extraction: extract repeated UI regions into shared components when they appear more than once. + +## CLI Usage + +Run the converter with `npx` so the documented command works without relying on a global binary: + +```bash +export DASHSCOPE_API_KEY=your_key +npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src +``` + +For desktop UI libraries: + +```bash +npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src +npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./src +``` + +If the package is installed globally, the `ui-to-vue` binary can be used directly: + +```bash +npm install -g ui-to-vue-converter@1.0.2 +ui-to-vue --input ./screenshots --ui vant --output ./src +``` + +## Options + +| Option | Description | Default | +| --- | --- | --- | +| `--input` | Design image directory | `./screenshots` | +| `--ui` | UI library: `vant`, `element-plus`, or `antd-vue` | `vant` | +| `--output` | Output directory | `./src` | +| `--config` | Config file path | `./.ui-to-vue.config.json` | + +## API Key Handling + +The converter can read DashScope credentials from a config file or from the environment. Prefer an environment variable in repositories: + +```bash +export DASHSCOPE_API_KEY=your_key +``` + +If a local config file is required, keep it out of version control: + +```json +{ + "apiKey": "your_dashscope_key", + "input": "./designs", + "ui": "vant", + "output": "./src" +} +``` + +```gitignore +.ui-to-vue.config.json +``` + +## Security and Privacy + +- Treat design screenshots as source material that may be sent to an external model API. +- Do not run this flow on private customer designs without permission. +- Pin the converter version in repeatable workflows instead of using `@latest`. +- Review generated Vue code before committing it. +- Do not commit `.ui-to-vue.config.json`, API keys, generated secrets, or customer screenshots. + +## Output Review Checklist + +- [ ] Page components were generated under `views/` or the chosen output directory. +- [ ] Repeated UI regions were extracted into `components/` only when reuse is clear. +- [ ] Router output is compatible with the target project's router style. +- [ ] Generated components use the requested UI library consistently. +- [ ] Generated CSS units match the design baseline. +- [ ] The code passes the project's formatter, linter, type checker, and build. +- [ ] Placeholder copy, mock data, and generated assets were reviewed before commit. + +## Troubleshooting + +| Issue | Check | +| --- | --- | +| `401` or authentication error | Confirm `DASHSCOPE_API_KEY` is set in the shell running the command. | +| `command not found: ui-to-vue` | Use the `npx ui-to-vue-converter@1.0.2` form or install the package globally. | +| Cut images are ignored | Confirm the asset directory name is supported and nested under the matching page or module. | +| Components ignore the requested UI library | Re-run with an explicit `--ui` value and inspect the generated imports. | +| Generated layout dimensions look wrong | Confirm the screenshot export width matches the target library baseline. | + +## References + +- npm package: `ui-to-vue-converter`