docs: salvage ui-to-vue skill

.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",

.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"

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)

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 |

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-* 命令需要额外配置
 

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/           — 始终遵循的指导方针（通用 + 每种语言）

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 条指令 |

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",

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/",

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`