React Nextjs Generator

Generates complete React Next.js projects from requirements and UI designs using Ant Design, Tailwind CSS, and Zustand for state management.

Security Scan

The skill's files broadly match its stated purpose (generating Next.js projects) but contain several inconsistencies and some unsafe coding patterns (hardcoded local paths, running shell/npm tooling, and unsanitized inputs) that warrant caution before use.

Purpose & Capability

Name/description match the bundled code: generator.ts, runner.ts and create-react-app.sh implement project generation with Next.js/AntD/Tailwind/Zustand. However, the controller documentation references a hardcoded local path (/Users/batype/.openclaw/...) to runner.ts which is environment-specific and inappropriate for a distributable skill.

Instruction Scope

SKILL.md/controller.md instruct the agent to save the requirements to a temp file, call runner.ts and execute create-react-app.sh. That is expected for a generator, but the code executes npx/npm (network installs) and runs shell scripts. generator.ts creates files and directories directly from parsed text without sanitizing extracted route names — this can enable directory-traversal or arbitrary file writes if the requirements document contains malicious paths. The controller's absolute path and reliance on exec assumes local filesystem layout that may not exist.

Install Mechanism

There is no install spec (instruction-only skill), which is low risk for installation. However, the included create-react-app.sh will invoke npx create-next-app and npm install to fetch and run external packages at runtime — expected for this functionality but it means network downloads and execution of third-party code when the script runs.

Credentials

The skill declares no required environment variables or credentials, which is consistent with a local project generator. No secrets are requested.

Persistence & Privilege

always is false and the skill does not request elevated or permanent presence. It does instruct file creation in a user-specified output directory and references an absolute path in docs, but it does not modify other skills or system-wide agent settings.

What to consider before installing

This skill appears to do what it claims (generate Next.js projects), but exercise caution before running it: - Review the included files (create-react-app.sh, generator.ts, runner.ts) yourself. The shell script runs `npx create-next-app` and `npm install`, which will download and execute third-party packages from the network. - Do not run the scripts on a sensitive machine without inspection—use a disposable or sandboxed environment (container or VM). - The controller docs reference a hardcoded local path (/Users/batype/...), which likely won't match your environment; expect to supply correct paths or adjust invocation. - The generator constructs filesystem paths from parsed text in the requirements document without sanitization. Malicious or malformed requirements could cause files to be written outside the intended output directory (path traversal). Validate or sanitize any user-provided input and always set an explicit output directory you control. - If you plan to use it, test first with minimal, well-formed requirements in an isolated workspace, and run `npm install` and `npm run dev` yourself after reviewing package.json. What would change this assessment: evidence that input strings are sanitized/validated before use (prevents path traversal), removal of hardcoded local paths in docs, or signatures/source provenance showing the code comes from a trusted author. Without those, treat the skill as functional but potentially unsafe.

React Next.js 项目生成器技能

描述

根据需求文档和UI设计图生成完整的React + Next.js项目，使用Ant Design、Tailwind CSS和Zustand技术栈。

使用方法

当用户上传需求文档和UI设计图时，执行以下步骤：

1. 分析需求文档内容
2. 解析UI设计图元素
3. 生成项目结构
4. 创建页面组件
5. 配置状态管理
6. 设置样式系统

技术栈

• React
• Next.js
• Ant Design (antd)
• Tailwind CSS
• Zustand (状态管理)

工作流程

1. 接收需求文档和UI图
2. 分析并提取关键信息
3. 创建项目目录结构
4. 生成基础配置文件
5. 创建页面和组件
6. 集成状态管理
7. 应用样式配置