blackbox-builder

name: blackbox-builder description: > Guides usage of Blackbox Builder (build.blackbox.ai) for vibe coding full-stack apps from natural language, deploying to Blackbox hosting, and rapid prototyping. Activates when building apps with Builder, using voice input, or deploying to Blackbox hosting. compatibility: > Requires web browser with access to build.blackbox.ai. metadata: author: tradecraft version: "1.0.0"

Blackbox Builder

Blackbox Builder is a vibe coding platform that generates full-stack applications from natural language descriptions. Build, preview, iterate, and deploy — all without writing code manually.

When to Use This Skill

• Building full-stack apps via natural language at build.blackbox.ai
• Rapid prototyping with vibe coding
• Using voice input to describe application requirements
• Deploying apps to Blackbox hosting or custom domains
• Working within the 45-minute sandbox session
• Publishing to the community gallery
• Iterating on generated applications with refinement prompts

Quick Start

1. Go to build.blackbox.ai
2. Describe your application in natural language:

   Build a task management app with user auth, drag-and-drop kanban board,
   due dates, and team collaboration
   

3. Watch real-time generation with progress visualization
4. Iterate with follow-up requests:

   Add a calendar view and email notifications for due dates
   

5. Deploy when satisfied

Core Concepts

Vibe Coding

Describe what you want in plain English (or speak it). Builder generates:

• Frontend interfaces — React/Next.js components with styling
• Backend APIs — Server routes and business logic
• Databases — Schema and data models
• Authentication — User auth flows
• AI features — AI-powered functionality if requested

Voice Input

Click the microphone icon to speak your requirements aloud instead of typing. Powered by ElevenLabs.

Real-Time Visualization

During generation, you see:

• Components appearing as they're created
• Progress tracking for each part of the stack
• Connection visualization between frontend, backend, and database

Iterative Refinement

After initial generation, refine with natural language:

> Change the color scheme to dark mode with blue accents
> Add pagination to the user list, 20 per page
> Make the sidebar collapsible on mobile
> Add export to CSV for the analytics dashboard

Session Management

• Duration: 45-minute sandbox session limit
• Important: Save and deploy before your session expires
• Sessions outside Git repos run in sandbox mode without GitHub integration

Deployment

Three deployment options:

Common Patterns

SaaS Application

Build a project management SaaS with:
- User registration and login
- Team workspaces with invite links
- Kanban board with drag-and-drop
- Time tracking per task
- Stripe billing integration
- Admin dashboard with usage analytics

Landing Page + App

Create a landing page for a productivity app with:
- Hero section with animated demo
- Feature grid with icons
- Pricing table (free, pro, enterprise)
- FAQ accordion
- Contact form
Then build the actual app behind a login wall

API + Dashboard

Build a REST API with dashboard for monitoring IoT devices:
- Device registration and management
- Real-time data ingestion endpoint
- Dashboard with charts showing device metrics
- Alert rules with email notifications
- Export data as CSV/JSON

Tips

• Be specific — More detail in your prompt = better results
• Start simple — Build the core, then iterate
• Save often — Deploy before the 45-minute session expires
• Voice + text — Combine voice for brainstorming, text for precise requirements
• Reference examples — "Like Trello but with time tracking" helps the model understand

Troubleshooting

References

• See references/builder-guide.md for detailed workflow and constraints