← Back to Skills Marketplace
wing8169

NextJS Frontend Development + Integration

by wing8169 · GitHub ↗ · v0.1.1
cross-platform ⚠ suspicious
3275
Downloads
0
Stars
33
Active Installs
2
Versions
Install in OpenClaw
/install frontend-dev
Description
Generate production-ready Next.js projects with TypeScript, Tailwind CSS, shadcn/ui, and API integration. Use when the user asks to build, create, develop, or scaffold a Next.js application, web app, full-stack project, or frontend with backend integration. Prioritizes modern stack (Next.js 14+, TypeScript, shadcn/ui, axios, react-query) and best practices. Also triggers on requests to add features, integrate APIs, or extend existing Next.js projects.
Usage Guidance
Install only if you are comfortable with a frontend skill that can manage local dev servers and may suggest sudo-based preview setup. Keep previews localhost-only by default, review any Nginx or sudo command before allowing it, avoid unscoped kill/delete-all PM2 commands, and do not use real credentials in generated .env.local files unless you are sure they will not be committed, zipped, screenshotted, or shared.
Capability Analysis
Type: OpenClaw Skill Name: frontend-dev Version: 0.1.1 The skill is classified as suspicious due to several high-risk capabilities and vulnerabilities. Most notably, the `scripts/screenshot.sh` script executes `chromium` with the `--no-sandbox` flag, which is a critical security vulnerability that could lead to arbitrary code execution on the host system if the URL parameter is manipulated or if the rendered web content is malicious. Additionally, the `SKILL.md` instructs the agent to use `sudo` for installing system-level packages (Chromium, Nginx) and modifying Nginx configuration, granting significant elevated privileges. The extensive use of `pm2` for process management, including `pm2 save`, also introduces a persistence mechanism for processes started by the agent. While these capabilities are presented for legitimate development purposes, they pose substantial security risks if the agent is compromised via prompt injection or if the generated project contains vulnerabilities.
Capability Assessment
Purpose & Capability
Next.js scaffolding, shadcn/ui setup, API integration, screenshots, and previews fit the stated frontend-development purpose, but the skill extends beyond code generation into process management and host preview administration.
Instruction Scope
The trigger language covers broad web-app and full-stack requests, while the runtime workflow defaults to PM2 and can include Chromium screenshots and Nginx exposure, so activation may bring operational actions the user did not explicitly request.
Install Mechanism
There is no hidden installer or install hook in the package, but the instructions recommend optional sudo package installs for Chromium and Nginx.
Credentials
Default PM2 use, optional external Nginx proxying, unscoped port-kill troubleshooting, and project zipping with weak secret-handling guidance create real local-environment and data-exposure risk.
Persistence & Privilege
The skill makes PM2 the default dev-server manager, mentions persistence with pm2 save, and provides privileged Nginx configuration commands; these are disclosed but broader than a typical frontend scaffolding skill needs.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install frontend-dev
  3. After installation, invoke the skill by name or use /frontend-dev
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.1
Initializes Git structure and streamlines project setup and developer workflow. - Added full project .git directory and hooks for version control and collaboration. - Updated documentation to include a Quick Start and common project patterns. - Clarified live preview and dev server management using PM2 on port 3002. - Provided clearer nginx proxy setup instructions for external previews. - Reorganized optional features with more actionable setup and clearer user prompts.
v0.1.0
Initial release of the UI Development skill for Next.js projects. - Generates production-ready Next.js 14+ projects with TypeScript, Tailwind CSS, shadcn/ui, axios, and react-query. - Supports API integration, modern project structure, and best practices for frontend and backend integration. - Optional features: auto-revision with visual review (Chromium) and live preview server (Nginx). - Outlines clear project structure with feature-based organization and detailed directory guidance. - Prompts user for optional advanced features before scaffolding a project.
Metadata
Slug frontend-dev
Version 0.1.1
License
All-time Installs 33
Active Installs 33
Total Versions 2
Frequently Asked Questions

What is NextJS Frontend Development + Integration?

Generate production-ready Next.js projects with TypeScript, Tailwind CSS, shadcn/ui, and API integration. Use when the user asks to build, create, develop, or scaffold a Next.js application, web app, full-stack project, or frontend with backend integration. Prioritizes modern stack (Next.js 14+, TypeScript, shadcn/ui, axios, react-query) and best practices. Also triggers on requests to add features, integrate APIs, or extend existing Next.js projects. It is an AI Agent Skill for Claude Code / OpenClaw, with 3275 downloads so far.

How do I install NextJS Frontend Development + Integration?

Run "/install frontend-dev" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is NextJS Frontend Development + Integration free?

Yes, NextJS Frontend Development + Integration is completely free (open-source). You can download, install and use it at no cost.

Which platforms does NextJS Frontend Development + Integration support?

NextJS Frontend Development + Integration is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created NextJS Frontend Development + Integration?

It is built and maintained by wing8169 (@wing8169); the current version is v0.1.1.

💬 Comments