ui-development
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.
Why use this skill?
Build production-ready Next.js apps with TypeScript, shadcn/ui, and Tailwind CSS. Automate your development workflow with OpenClaw's intelligent UI scaffolding and API integration.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wing8169/frontend-devWhat This Skill Does
The ui-development skill transforms OpenClaw into a full-stack Next.js 14+ powerhouse. It is designed to bridge the gap between abstract user requirements and production-ready codebases. By leveraging modern industry standards—including TypeScript, Tailwind CSS, shadcn/ui, and react-query—it ensures that every generated project is modular, type-safe, and highly maintainable. The skill manages the lifecycle of your development environment, utilizing PM2 to stabilize server instances and offering advanced optional features like Chromium-based visual regression testing and Nginx-backed live proxying for seamless collaboration.
Installation
To integrate this skill into your OpenClaw environment, execute the command: clawhub install openclaw/skills/skills/wing8169/frontend-dev. Ensure your host machine has Node.js 18+, Git, and the necessary package manager (npm, yarn, or pnpm) installed. If you intend to use the visual auto-review or live server features, please ensure the system dependencies (Chromium and Nginx) are configured correctly on your host operating system prior to the first build.
Use Cases
This skill is perfect for developers, startup founders, or product managers looking to rapidly prototype or deploy production-grade web applications. It excels in creating dashboard interfaces, complex SaaS platforms with nested routing and authentication, landing pages with high conversion focus, and data-heavy task management systems. Because it relies heavily on shadcn/ui, the output is always aesthetically polished and accessible.
Example Prompts
- "Build a professional SaaS dashboard with a sidebar navigation, a data table for user management using shadcn/ui, and integration with a mock REST API."
- "Create a clean, responsive landing page for a coffee shop, including a hero section with a call-to-action, a menu grid using Tailwind CSS, and a contact form with Zod validation."
- "Extend my current project by adding a secure authentication flow under a (auth) route group and implement a protected profile settings page using react-query for state management."
Tips & Limitations
Always confirm your preference for optional features like visual auto-revision before the agent initializes the file system. Visual review requires system-level access to execute headless browsers, which may not be necessary for simple text-based tasks. When building complex apps, define your data schemas early to allow the agent to generate robust TypeScript interfaces. Remember that project management is localized to the server instance via PM2, so ensure you have sufficient local storage permissions to allow for persistent file writing and editing.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-wing8169-frontend-dev": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution