Skill: vynbosserman65/free-react-component-generator (version 1.0.0)

--- name: free-react-component-generator version: "1.0.0" displayName: "Free React Component Generator — Generate React Components From Prompts" description: > Get coded React components ready to post, without touching a single slider. Upload your text prompts (MP4, MOV, AVI, WebM, up to 200MB), say something like "generate a responsive card component with image, title, and button", and download 1080p MP4 when it's done. Built for frontend developers who move fast and want ready-to-use components without writing boilerplate code. metadata: {"openclaw": {"emoji": "⚛️", "requires": {"env": ["NEMO_TOKEN"], "configPaths": ["~/.config/nemovideo/"]}, "primaryEnv": "NEMO_TOKEN", "variant": "short_prompts"}} --- ## Getting Started > Share your text prompts and I'll get started on AI component generation. Or just tell me what you're thinking. **Try saying:** - "generate my text prompts" - "export 1080p MP4" - "generate a responsive card component with" ### 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. 1. **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. 2. **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. # Free React Component Generator — Generate React Components From Prompts Send me your text prompts and describe the result you want. The AI component generation runs on remote GPU nodes — nothing to install on your machine. A quick example: upload a description of a login form with email and password fields, type "generate a responsive card component with image, title, and button", and you'll get a 1080p MP4 back in roughly 20-40 seconds. All rendering happens server-side. Worth noting: more specific prompts produce cleaner, more usable component output. ## Matching Input to Actions User prompts referencing free react component generator, 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: 1. **Session** — `POST /api/tasks/me/with-session/nemo_agent` with `{"task_name":"project","language":"<lang>"}`. Gives you a `session_id`. 2. **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. 3. **Upload** — `POST /api/upload-video/nemo_agent/me/<sid>` — multipart file or JSON with URLs. 4. **Credits** — `GET /api/credits/balance/simple` — returns `available`, `frozen`, `total`. 5. **State** — `GET /api/state/nemo_agent/me/<sid>/latest` — current draft and media info. 6. **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. Headers are derived from this file's YAML frontmatter. `X-Skill-Source` is `free-react-component-generator`, `X-Skill-Version` comes from the `version` field, and `X-Skill-Platform` is detected from the install path (`~/.clawhub/` = `clawhub`, `~/.cursor/skills/` = `cursor`, otherwise `unknown`). Include `Authorization: Bearer <NEMO_TOKEN>` and all attribution headers on every request — omitting them triggers a 402 on export. Draft JSON uses short keys: `t` for tracks, `tt` for track type (0=video, 1=audio, 7=text), `sg` for segments, `d` for duration in ms, `m` for metadata. Example timeline summary: ``` Timeline (3 tracks): 1. Video: city timelapse (0-10s) 2. BGM: Lo-fi (0-10s, 35%) 3. Title: "Urban Dreams" (0-3s) ``` ### Translating GUI Instructions The backend responds as if there's a visual interface. Map its instructions to API calls: - "click" or "点击" → execute the action via the relevant endpoint - "open" or "打开" → query session state to get the data - "drag/drop" or "拖拽" → send the edit command through SSE - "preview in timeline" → show a text summary of current tracks - "Export" or "导出" → run the export workflow ### Reading the SSE Stream Text events go straight to the user (after GUI translation). Tool calls stay internal. Heartbeats and empty `data:` lines mean the backend is still working — show "⏳ Still working..." every 2 minutes. About 30% of edit operations close the stream without any text. When that happens, poll `/api/state` to confirm the timeline changed, then tell the user what was updated. ### 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 responsive card component with image, title, and button" — 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 responsive card component with image, title, and button" → 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.


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)