[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JDN2SCC1D22GG9RMH8CEJN":3,"skill-same:01M6JDN2SCC1D22GG9RMH8CEJN":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6JDN2SCC1D22GG9RMH8CEJN","ui-to-vue",null,"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.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fui-to-vue\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"ui","vue","ui to vue","design","screenshots","components","batch","ui screenshots","user","use","conversion","community","ant","element","with","2026-11-10 10:12:30",false,"---\nname: ui-to-vue\ndescription: 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.\norigin: community\n---\n\n# UI To Vue\n\nBatch-convert UI design screenshots into Vue 3 Composition API component code.\n\n## When to Use\n\n- The user provides a directory of design screenshots or design-export images.\n- The target application is Vue 3.\n- The user wants a first pass of page components, shared components, and router wiring.\n- The user specifies Vant, Element Plus, or Ant Design Vue as the component library.\n\n## When Not to Use\n\n- The user has only one screenshot and wants a bespoke component.\n- The target project is not Vue.\n- The design requires detailed interaction logic, data flow, or accessibility review.\n- The screenshots contain private customer data that cannot be sent to an external model API.\n\n## Inputs\n\nUse an input directory that groups screenshots by module and page state:\n\n```text\nscreenshots\u002F\n|-- HomePage\u002F\n|   |-- List\u002F\n|   |   |-- HomePage-List-Default@3x.png\n|   |   `-- cut-images\u002F\n|   |-- cut-images\u002F\n|   `-- HomePage-Default@3x.png\n`-- cut-images\u002F\n```\n\nSupported cut-image directory names include `assets`, `icons`, `sprites`, `cut`, `images`, and `cut-images`.\n\n## Conversion Model\n\n- Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empty states.\n- UI library mapping: map native visual elements to Vant, Element Plus, or Ant Design Vue components where practical.\n- Cut-image priority: prefer page-level assets, then module-level assets, then global shared assets.\n- Component extraction: extract repeated UI regions into shared components when they appear more than once.\n\n## CLI Usage\n\nRun the converter with `npx` so the documented command works without relying on a global binary:\n\n```bash\nexport DASHSCOPE_API_KEY=your_key\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fscreenshots --ui vant --output .\u002Fsrc\n```\n\nFor desktop UI libraries:\n\n```bash\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fdesigns --ui element-plus --output .\u002Fsrc\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fdesigns --ui antd-vue --output .\u002Fsrc\n```\n\nIf the package is installed globally, the `ui-to-vue` binary can be used directly:\n\n```bash\nnpm install -g ui-to-vue-converter@1.0.2\nui-to-vue --input .\u002Fscreenshots --ui vant --output .\u002Fsrc\n```\n\n## Options\n\n| Option | Description | Default |\n| --- | --- | --- |\n| `--input` | Design image directory | `.\u002Fscreenshots` |\n| `--ui` | UI library: `vant`, `element-plus`, or `antd-vue` | `vant` |\n| `--output` | Output directory | `.\u002Fsrc` |\n| `--config` | Config file path | `.\u002F.ui-to-vue.config.json` |\n\n## API Key Handling\n\nThe converter can read DashScope credentials from a config file or from the environment. Prefer an environment variable in repositories:\n\n```bash\nexport DASHSCOPE_API_KEY=your_key\n```\n\nIf a local config file is required, keep it out of version control:\n\n```json\n{\n  \"apiKey\": \"your_dashscope_key\",\n  \"input\": \".\u002Fdesigns\",\n  \"ui\": \"vant\",\n  \"output\": \".\u002Fsrc\"\n}\n```\n\n```gitignore\n.ui-to-vue.config.json\n```\n\n## Security and Privacy\n\n- Treat design screenshots as source material that may be sent to an external model API.\n- Do not run this flow on private customer designs without permission.\n- Pin the converter version in repeatable workflows instead of using `@latest`.\n- Review generated Vue code before committing it.\n- Do not commit `.ui-to-vue.config.json`, API keys, generated secrets, or customer screenshots.\n\n## Output Review Checklist\n\n- [ ] Page components were generated under `views\u002F` or the chosen output directory.\n- [ ] Repeated UI regions were extracted into `components\u002F` only when reuse is clear.\n- [ ] Router output is compatible with the target project's router style.\n- [ ] Generated components use the requested UI library consistently.\n- [ ] Generated CSS units match the design baseline.\n- [ ] The code passes the project's formatter, linter, type checker, and build.\n- [ ] Placeholder copy, mock data, and generated assets were reviewed before commit.\n\n## Troubleshooting\n\n| Issue | Check |\n| --- | --- |\n| `401` or authentication error | Confirm `DASHSCOPE_API_KEY` is set in the shell running the command. |\n| `command not found: ui-to-vue` | Use the `npx ui-to-vue-converter@1.0.2` form or install the package globally. |\n| Cut images are ignored | Confirm the asset directory name is supported and nested under the matching page or module. |\n| Components ignore the requested UI library | Re-run with an explicit `--ui` value and inspect the generated imports. |\n| Generated layout dimensions look wrong | Confirm the screenshot export width matches the target library baseline. |\n\n## References\n\n- npm package: `ui-to-vue-converter`\n","# UI To Vue\n\nBatch-convert UI design screenshots into Vue 3 Composition API component code.\n\n## When to Use\n\n- The user provides a directory of design screenshots or design-export images.\n- The target application is Vue 3.\n- The user wants a first pass of page components, shared components, and router wiring.\n- The user specifies Vant, Element Plus, or Ant Design Vue as the component library.\n\n## When Not to Use\n\n- The user has only one screenshot and wants a bespoke component.\n- The target project is not Vue.\n- The design requires detailed interaction logic, data flow, or accessibility review.\n- The screenshots contain private customer data that cannot be sent to an external model API.\n\n## Inputs\n\nUse an input directory that groups screenshots by module and page state:\n\n```text\nscreenshots\u002F\n|-- HomePage\u002F\n|   |-- List\u002F\n|   |   |-- HomePage-List-Default@3x.png\n|   |   `-- cut-images\u002F\n|   |-- cut-images\u002F\n|   `-- HomePage-Default@3x.png\n`-- cut-images\u002F\n```\n\nSupported cut-image directory names include `assets`, `icons`, `sprites`, `cut`, `images`, and `cut-images`.\n\n## Conversion Model\n\n- Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empty states.\n- UI library mapping: map native visual elements to Vant, Element Plus, or Ant Design Vue components where practical.\n- Cut-image priority: prefer page-level assets, then module-level assets, then global shared assets.\n- Component extraction: extract repeated UI regions into shared components when they appear more than once.\n\n## CLI Usage\n\nRun the converter with `npx` so the documented command works without relying on a global binary:\n\n```bash\nexport DASHSCOPE_API_KEY=your_key\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fscreenshots --ui vant --output .\u002Fsrc\n```\n\nFor desktop UI libraries:\n\n```bash\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fdesigns --ui element-plus --output .\u002Fsrc\nnpx ui-to-vue-converter@1.0.2 --input .\u002Fdesigns --ui antd-vue --output .\u002Fsrc\n```\n\nIf the package is installed globally, the `ui-to-vue` binary can be used directly:\n\n```bash\nnpm install -g ui-to-vue-converter@1.0.2\nui-to-vue --input .\u002Fscreenshots --ui vant --output .\u002Fsrc\n```\n\n## Options\n\n| Option | Description | Default |\n| --- | --- | --- |\n| `--input` | Design image directory | `.\u002Fscreenshots` |\n| `--ui` | UI library: `vant`, `element-plus`, or `antd-vue` | `vant` |\n| `--output` | Output directory | `.\u002Fsrc` |\n| `--config` | Config file path | `.\u002F.ui-to-vue.config.json` |\n\n## API Key Handling\n\nThe converter can read DashScope credentials from a config file or from the environment. Prefer an environment variable in repositories:\n\n```bash\nexport DASHSCOPE_API_KEY=your_key\n```\n\nIf a local config file is required, keep it out of version control:\n\n```json\n{\n  \"apiKey\": \"your_dashscope_key\",\n  \"input\": \".\u002Fdesigns\",\n  \"ui\": \"vant\",\n  \"output\": \".\u002Fsrc\"\n}\n```\n\n```gitignore\n.ui-to-vue.config.json\n```\n\n## Security and Privacy\n\n- Treat design screenshots as source material that may be sent to an external model API.\n- Do not run this flow on private customer designs without permission.\n- Pin the converter version in repeatable workflows instead of using `@latest`.\n- Review generated Vue code before committing it.\n- Do not commit `.ui-to-vue.config.json`, API keys, generated secrets, or customer screenshots.\n\n## Output Review Checklist\n\n- [ ] Page components were generated under `views\u002F` or the chosen output directory.\n- [ ] Repeated UI regions were extracted into `components\u002F` only when reuse is clear.\n- [ ] Router output is compatible with the target project's router style.\n- [ ] Generated components use the requested UI library consistently.\n- [ ] Generated CSS units match the design baseline.\n- [ ] The code passes the project's formatter, linter, type checker, and build.\n- [ ] Placeholder copy, mock data, and generated assets were reviewed before commit.\n\n## Troubleshooting\n\n| Issue | Check |\n| --- | --- |\n| `401` or authentication error | Confirm `DASHSCOPE_API_KEY` is set in the shell running the command. |\n| `command not found: ui-to-vue` | Use the `npx ui-to-vue-converter@1.0.2` form or install the package globally. |\n| Cut images are ignored | Confirm the asset directory name is supported and nested under the matching page or module. |\n| Components ignore the requested UI library | Re-run with an explicit `--ui` value and inspect the generated imports. |\n| Generated layout dimensions look wrong | Confirm the screenshot export width matches the target library baseline. |\n\n## References\n\n- npm package: `ui-to-vue-converter`\n",{"name":5,"origin":39,"description":7},"master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fecc\u002Fui-to-vue",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add S3YED\u002Fappie-kit --skill ui-to-vue",{"tool":62,"command":63},"bunx","bunx skills add S3YED\u002Fappie-kit --skill ui-to-vue",{"tool":65,"command":66},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill ui-to-vue","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fecc\u002Fui-to-vue\u002FSKILL.md",true,[],[71,105,133,159,190,214],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":86,"publishedAt":43},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[77,80,83],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":84,"categoryName":85,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":115,"publishedAt":43},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[111,114],{"categoryNo":112,"categoryName":113,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[31,116,117,118,119,120,121,33,122,123,124,28,125,126,127,128,129,130,131,132],"agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","generate","design systems","website","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":141,"publishedAt":43},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[139,140],{"categoryNo":84,"categoryName":85,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[116,142,120,143,144,145,33,146,147,148,149,150,151,152,153,154,155,156,157,158],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":43},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[165,168],{"categoryNo":166,"categoryName":167,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":84,"categoryName":85,"taxonomyType":20,"taxonomyTypeDesc":21},[170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":197,"publishedAt":43},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[196],{"categoryNo":84,"categoryName":85,"taxonomyType":20,"taxonomyTypeDesc":21},[198,199,200,201,202,203,204,205,206,207,208,209,210,211,36,212,213],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","simplification","for",{"skillNo":215,"name":216,"nameZh":6,"description":217,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":218,"categories":219,"keywords":225,"publishedAt":43},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[220,223,224],{"categoryNo":221,"categoryName":222,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":84,"categoryName":85,"taxonomyType":20,"taxonomyTypeDesc":21},[226,227,228,229,230,231,232,233,173,234,235,33,236,176,237,207,238,239,240,241],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]