codeply-cli 0.3.0 → 0.4.0

package/skills/ui-to-vue/SKILL.md

@@ -1,135 +1,135 @@
----
-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.
-metadata:
-  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`
+---
+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.
+metadata:
+  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`