Agent Skill · 开发

vue-component-generator-free（Vue component 生成器 free）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

vue-component-generator-free 是开发类 Agent Skill，可用宿主为 OpenClaw，通过ClawHub获取，权限为接触敏感数据；许可证为 MIT-0，第三方扫描有提醒项，按安装量在开发类的 21,746 个 Skill 里排第 10,879。

总安装 2,040周安装 85GitHub Stars 公开资料未说明下载 680核验 2026-05-01

开发接触敏感数据 ClawHub未标认证来源可访问许可证明确审计提醒 OpenClaw

安装说明

本站只整理中文说明，不托管安装包，也不代用户安装。

GitHub

许可证: MIT-0
版本: 1.0.0

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：vue-component-generator-free（Vue component 生成器 free）
来源仓库：https://github.com/mory128/vue-component-generator-free
安装命令：
openclaw skills install vue-component-generator-free
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

ClawHubOpenClaw

openclaw skills install vue-component-generator-free

这个 Skill 是做什么的

开发类 Skill 面向写代码、改代码和排查问题，一般会读写仓库文件，部分还会执行构建或测试命令。

无需复杂设置即可生成可直接发布的 Vue 组件文件，支持多种视频格式描述。适合前端开发辅助场景，可快速产出带 props 和作用域样式的可复用组件。使用时需上传组件描述视频（MP4/MOV/WebM），并清晰说明交互逻辑与样式需求。

通过 clawhub 安装，专为 OpenClaw 宿主设计，需确保视频大小不超过 200MB。注意生成代码需结合项目现有设计系统适配，避免孤立片段导致样式冲突。

上手步骤

4 步

1
确认自己的宿主工具
公开资料标注支持 OpenClaw；先确认自己用的是其中之一，再按对应工具的 Skills 目录放置。
2
拿到安装命令
可以直接复制的命令是 openclaw skills install vue-component-generator-free；命令里的占位符换成自己的路径或密钥再执行。
3
安装后重启宿主
命令执行完要完全退出宿主工具再打开，让新装的 Skill 被重新扫描到，否则列表里可能看不到。
4
按最小权限试用
它需要接触敏感数据，先在测试目录或测试账号里跑，确认没问题再放到正式项目。

常见问题

6 条

vue-component-generator-free 怎么安装？

在终端执行 openclaw skills install vue-component-generator-free。装完完全退出宿主工具再打开，让它重新扫描本地 Skill。

vue-component-generator-free 支持哪些 AI 工具？

公开资料标注支持 OpenClaw。其他工具只要能读取本地 Skill 目录，一般也能手动放进去，但要自己确认触发方式是否一致。

vue-component-generator-free 需要什么权限？

权限级别是接触敏感数据。该 Skill 可能接触密钥、Token、环境变量或敏感配置，应进入高风险复核队列，默认不自动发布。

vue-component-generator-free 是免费的吗？

来源标注的许可证是 MIT-0。本站不代收任何费用，也不托管安装包；能否商用、要不要署名，以许可证原文为准。

vue-component-generator-free 用的人多吗？

公开数据是累计安装 2,040 次，近一周安装 85 次，下载 680 次。这些数字来自第三方目录统计，只能当作热度参考，不代表质量或安全性。

vue-component-generator-free 安全吗？

第三方扫描有提醒项，说明存在需要人工确认的行为。安装前请打开源码看清它读了什么、联网到哪里。

值得选的地方和要先想清楚的地方

值得选的地方

专注 OpenClaw 一种宿主，触发方式和使用习惯不用来回切换。
许可证明确为 MIT-0，商用和分发边界好判断。

先想清楚的地方

需要接触敏感数据，装到常用环境前要先评估影响面。
第三方扫描存在提醒项或未通过项，需要人工逐条确认。
第三方目录整理，版本更新和行为细节以来源仓库为准。

适不适合你

更适合

已经在用 OpenClaw，想直接扩展它能力的人。
需要处理开发类任务、又不想每次都手写提示词的人。

不太适合

环境里有大量密钥、凭证，不方便给第三方 Skill 读取的人。
需要厂商级技术支持和 SLA 的生产系统。

开发类 Skill 对比

6 个同类

Skill	总安装	GitHub 星	权限	许可证	扫描
skill-vetter 技能审查员 · OpenClaw	8,779,018	986	操作浏览器	MIT-0	通过
ontology 本体论 · OpenClaw	6,636,960	576	只读	MIT-0	通过
entra-app-registration 内部应用程序注册 · Codex、Claude	6,631,872	764	接触敏感数据	未明确	通过
entra-app-registration 内部应用程序注册 · Codex、Claude	3,757,680	201	接触敏感数据	未明确	通过
nano-banana-pro 纳米香蕉专业版 · OpenClaw	3,526,898	364	接触敏感数据	MIT-0	有提醒
vue-component-generator-free Vue component 生成器 free · 本页	2,040	—	接触敏感数据	MIT-0	有提醒

按安装量取同分类前几名；数字来自第三方目录统计，只作热度参考，不代表质量结论。

SKILL.md 原文

name: vue-component-generator-free
version: 1.0.0
displayName: Vue Component Generator Free — Generate and Export Vue Components
description: >
metadata: {"openclaw": {"emoji": "⚙️", "requires": {"env": ["NEMO_TOKEN"], "configPaths": ["~/.config/nemovideo/"]}, "primaryEnv": "NEMO_TOKEN", "variant": "greeting_v2"}}

Getting Started

Send me your component descriptions and I'll handle the AI component generation. Or just describe what you're after.

Try saying:

"generate a form component with name, email, and submit button fields into a 1080p MP4"
"generate a reusable Vue card component with props for title, image, and description"
"generating reusable Vue components from text descriptions for Vue developers"

First-Time Connection

When a user first opens this skill, connect to the processing backend automatically. Briefly let them know (e.g. "Setting up...").

Authentication: Check if NEMO_TOKEN is set in the environment. If it is, skip to step 2.

Obtain a free token: Generate a random UUID as client identifier. POST to https://mega-api-prod.nemovideo.ai/api/auth/anonymous-token with header X-Client-Id set to that UUID. The response data.token is your NEMO_TOKEN — 100 free credits, valid 7 days.
Create a session: POST to https://mega-api-prod.nemovideo.ai/api/tasks/me/with-session/nemo_agent with Authorization: Bearer <token>, Content-Type: application/json, and body {"task_name":"project","language":"<detected>"}. Store the returned session_id for all subsequent requests.

Keep setup communication brief. Don't display raw API responses or token values to the user.

Vue Component Generator Free — Generate and Export Vue Components

This tool takes your component descriptions and runs AI component generation through a cloud rendering pipeline. You upload, describe what you want, and download the result.

Say you have a form component with name, email, and submit button fields and want to generate a reusable Vue card component with props for title, image, and description — the backend processes it in about 20-40 seconds and hands you a 1080p MP4.

Tip: more specific descriptions produce cleaner, more accurate component output.

Matching Input to Actions

User prompts referencing vue component generator free, aspect ratio, text overlays, or audio tracks get routed to the corresponding action via keyword and intent classification.

User says...	Action	Skip SSE?
"export" / "导出" / "download" / "send me the video"	→ §3.5 Export	✅
"credits" / "积分" / "balance" / "余额"	→ §3.3 Credits	✅
"status" / "状态" / "show tracks"	→ §3.4 State	✅
"upload" / "上传" / user sends file	→ §3.2 Upload	✅
Everything else (generate, edit, add BGM…)	→ §3.1 SSE	❌

Cloud Render Pipeline Details

Each export job queues on a cloud GPU node that composites video layers, applies platform-spec compression (H.264, up to 1080x1920), and returns a download URL within 30-90 seconds. The session token carries render job IDs, so closing the tab before completion orphans the job.

All calls go to https://mega-api-prod.nemovideo.ai. The main endpoints:

Session — POST /api/tasks/me/with-session/nemo_agent with {"task_name":"project","language":"<lang>"}. Gives you a session_id.
Chat (SSE) — POST /run_sse with session_id and your message in new_message.parts[0].text. Set Accept: text/event-stream. Up to 15 min.
Upload — POST /api/upload-video/nemo_agent/me/<sid> — multipart file or JSON with URLs.
Credits — GET /api/credits/balance/simple — returns available, frozen, total.
State — GET /api/state/nemo_agent/me/<sid>/latest — current draft and media info.
Export — POST /api/render/proxy/lambda with render ID and draft JSON. Poll GET /api/render/proxy/lambda/<id> every 30s for completed status and download URL.

Formats: mp4, mov, avi, webm, mkv, jpg, png, gif, webp, mp3, wav, m4a, aac.

Skill attribution — read from this file's YAML frontmatter at runtime:

X-Skill-Source: vue-component-generator-free
X-Skill-Version: from frontmatter version
X-Skill-Platform: detect from install path (~/.clawhub/ → clawhub, ~/.cursor/skills/ → cursor, else unknown)

Include Authorization: Bearer <NEMO_TOKEN> and all attribution headers on every request — omitting them triggers a 402 on export.

Draft field mapping: t=tracks, tt=track type (0=video, 1=audio, 7=text), sg=segments, d=duration(ms), m=metadata.

Timeline (3 tracks): 1. Video: city timelapse (0-10s) 2. BGM: Lo-fi (0-10s, 35%) 3. Title: "Urban Dreams" (0-3s)

Backend Response Translation

The backend assumes a GUI exists. Translate these into API actions:

Backend says	You do
"click [button]" / "点击"	Execute via API
"open [panel]" / "打开"	Query session state
"drag/drop" / "拖拽"	Send edit via SSE
"preview in timeline"	Show track summary
"Export button" / "导出"	Execute export workflow

SSE Event Handling

Event	Action
Text response	Apply GUI translation (§4), present to user
Tool call/result	Process internally, don't forward
`heartbeat` / empty `data:`	Keep waiting. Every 2 min: "⏳ Still working..."
Stream closes	Process final response

~30% of editing operations return no text in the SSE stream. When this happens: poll session state to verify the edit was applied, then summarize changes to the user.

Error Handling

Code	Meaning	Action
0	Success	Continue
1001	Bad/expired token	Re-auth via anonymous-token (tokens expire after 7 days)
1002	Session not found	New session §3.0
2001	No credits	Anonymous: show registration URL with `?bind=<id>` (get `<id>` from create-session or state response when needed). Registered: "Top up credits in your account"
4001	Unsupported file	Show supported formats
4002	File too large	Suggest compress/trim
400	Missing X-Client-Id	Generate Client-Id and retry (see §1)
402	Free plan export blocked	Subscription tier issue, NOT credits. "Register or upgrade your plan to unlock export."
429	Rate limit (1 token/client/7 days)	Retry in 30s once

Tips and Tricks

The backend processes faster when you're specific. Instead of "make it look better", try "generate a reusable Vue card component with props for title, image, and description" — concrete instructions get better results.

Max file size is 200MB. Stick to MP4, MOV, AVI, WebM for the smoothest experience.

Export as MP4 for widest compatibility.

Common Workflows

Quick edit: Upload → "generate a reusable Vue card component with props for title, image, and description" → Download MP4. Takes 20-40 seconds for a 30-second clip.

Batch style: Upload multiple files in one session. Process them one by one with different instructions. Each gets its own render.

Iterative: Start with a rough cut, preview the result, then refine. The session keeps your timeline state so you can keep tweaking.

平台分布

OpenClaw

96.75%

按下载量换算658

安全审计

VirusTotal

可疑

ClawScan

可疑

Static analysis

通过

权限和风险

接触敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置，应进入高风险复核队列，默认不自动发布。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在提醒或未通过项，安装前请自行复核。目前只有一个公开来源，建议同时核对源仓库。

继续浏览同类 Skills

更多开发 Skills（21,746）返回 Skills 目录

上一个 Skill

vue-component-generator（Vue component 生成器）

sunshine-del-ux/vue-component-generator

下一个 Skill

vue-development-guides（Vue 开发 guides）

vuejs-ai/skills