app-builder

What This Skill Does

The app-builder skill empowers your OpenClaw AI agent to become a full-stack engineering partner. It automates the complex lifecycle of developing, maintaining, and deploying web applications using the Instant.dev ecosystem. By leveraging npx instant-cli, gh (GitHub CLI), and vercel, the agent can scaffold new Next.js projects with integrated backend capabilities, manage source control, and handle production deployments seamlessly. The skill ensures that all your applications are structured consistently under ~/apps, enabling the agent to maintain context, handle environment variables, and enforce deployment best practices without manual intervention.

Installation

To install this skill, use the OpenClaw CLI in your terminal: clawhub install openclaw/skills/skills/stopachka/app-builder

Use Cases

• Rapid Prototyping: Instantly scaffold a functional Next.js application with a real-time database backend using Instant.dev.
• Feature Expansion: Efficiently add new functionality to existing projects by having the agent pull, modify, commit, and redeploy automatically.
• Deployment Automation: Ensure your code is always reflected in production by having the agent handle the entire git-push-to-vercel pipeline.
• Bug Rectification: Quickly address production issues by allowing the agent to perform hotfixes and redeploy with minimal downtime.

Example Prompts

1. "I need a new task management app called 'TaskFlow'. Can you build it using the Instant.dev stack and push it to a private GitHub repo, then deploy to Vercel?"
2. "Please add a user authentication page to the 'marketing-site' app in my ~/apps folder, then push the changes and update the Vercel deployment."
3. "The 'finance-tracker' app is broken. Please investigate the logs, apply a fix, and make sure the latest version is live on Vercel."

Tips & Limitations

• Pre-requisites: Ensure you have the GitHub CLI and Vercel CLI installed and authenticated on your system before initiating the agent. If the agent prompts you, follow the provided links to complete the setup.
• Directory Structure: Always respect the ~/apps directory constraint. The agent relies on this standard to locate and manage your codebase effectively.
• Security: Always review the AGENTS.md file in your repository. This allows you to give the agent specific instructions or constraints on how to handle code modifications.
• Error Handling: If an installation or deployment step fails, the agent is designed to stop and report the issue. Check the logs provided in the chat interface to resolve potential permission or authentication errors.