Each task in this document includes clear instructions, example commands, and best practices to help you get the most from BLACKBOX CLI.

​
Create new projects from scratch

​
Build a complete web application

Suppose you want to create a full-featured web application with modern technologies.
1

Start BLACKBOX CLI session

blackbox session
2

Request project creation

> create a todo list web app using React, TypeScript, and Tailwind CSS
3

Add advanced features

> add user authentication and data persistence to the todo app

> implement drag-and-drop functionality for reordering tasks

> add dark mode toggle and responsive design
4

Set up development environment

> configure the development server and build scripts
Tips:
  • Start with a clear description of what you want to build
  • Ask for modern best practices and technologies
  • Request proper project structure and organization

​
Generate API backends

Suppose you need to create a REST API for your application.
1

Specify API requirements

> create a Node.js Express API for a blog application with user management
2

Add database integration

> add PostgreSQL database integration with Prisma ORM
3

Implement authentication

> add JWT authentication and authorization middleware
4

Add comprehensive endpoints

> create CRUD endpoints for posts, comments, and user profiles
Tips:
  • Specify the database and ORM you prefer
  • Request proper error handling and validation
  • Ask for API documentation generation

​
Debug and fix existing code

Suppose you’ve encountered errors in your application and need to identify and fix them quickly.
1

Describe the problem

> my React app crashes when users try to submit the contact form
2

Let BLACKBOX CLI analyze the issue

> analyze the contact form component and find the bug
3

Apply the recommended fix

> fix the form validation error and add proper error handling
4

Test the solution

> test the contact form to ensure it works correctly now
Tips:
  • Provide specific error messages when available
  • Mention the steps to reproduce the issue
  • Ask for explanations of why the bug occurred

​
Improve and optimize existing code

Suppose you need to enhance the performance and maintainability of your codebase.
1

Identify optimization opportunities

> analyze my React components for performance issues
2

Apply performance improvements

> optimize the user dashboard component to reduce re-renders
3

Refactor for better maintainability

> refactor the authentication logic into reusable hooks
4

Add modern patterns

> update the state management to use React Query for server state
Tips:
  • Ask for specific performance metrics and improvements
  • Request explanations of optimization techniques used
  • Focus on one area at a time for manageable changes

​
Add new features to existing projects

Suppose you want to extend your application with additional functionality.
1

Analyze current architecture

> review my e-commerce app structure and suggest where to add a wishlist feature
2

Implement the new feature

> add a wishlist feature with add/remove functionality and persistence
3

Integrate with existing components

> update the product cards to include wishlist buttons
4

Add supporting features

> create a wishlist page where users can view and manage saved items
Tips:
  • Consider how new features integrate with existing code
  • Ask for consistent styling and user experience
  • Request proper testing for new functionality

​
Set up development environments

Suppose you need to configure a complete development environment for your project.
1

Configure build tools

> set up Webpack configuration for my React TypeScript project
2

Add development server

> configure hot reloading and development server with proxy settings
3

Set up testing environment

> configure Jest and React Testing Library for unit testing
4

Add code quality tools

> set up ESLint, Prettier, and Husky for code formatting and pre-commit hooks
Tips:
  • Ask for modern development best practices
  • Request configuration for your specific tech stack
  • Include deployment preparation in your setup

​
Generate comprehensive tests

Suppose you need to add thorough testing coverage to your application.
1

Analyze testing needs

> identify which components and functions need test coverage
2

Generate unit tests

> create comprehensive unit tests for the user authentication service
3

Add integration tests

> write integration tests for the shopping cart functionality
4

Create end-to-end tests

> set up Cypress tests for the complete user registration flow
Tips:
  • Ask for tests that cover edge cases and error conditions
  • Request both positive and negative test scenarios
  • Include tests for user interactions and API calls

​
Deploy applications

Suppose you need to deploy your application to production.
1

Prepare for deployment

> optimize my React app for production deployment
2

Configure deployment platform

> set up deployment to Vercel with environment variables
3

Set up CI/CD pipeline

> create GitHub Actions workflow for automated testing and deployment
4

Configure monitoring

> add error tracking and performance monitoring to the deployed app
Tips:
  • Specify your preferred deployment platform
  • Ask for environment-specific configurations
  • Include monitoring and error handling setup

​
Work with databases

Suppose you need to design and implement database functionality.
1

Design database schema

> design a PostgreSQL schema for a social media application
2

Set up database connection

> configure Prisma ORM with PostgreSQL for my Node.js API
3

Create database operations

> implement CRUD operations for users, posts, and comments
4

Add advanced queries

> create queries for user feed with pagination and filtering
Tips:
  • Specify your database technology and ORM preferences
  • Ask for proper indexing and performance considerations
  • Request data validation and security measures

​
Convert between technologies

Suppose you need to migrate or convert your project to different technologies.
1

Analyze current implementation

> review my jQuery application and plan migration to React
2

Convert components gradually

> convert the user dashboard from jQuery to React component
3

Update styling approach

> migrate CSS styles to Tailwind CSS classes
4

Modernize JavaScript

> convert JavaScript functions to TypeScript with proper types
Tips:
  • Plan migrations in small, manageable steps
  • Ask for compatibility considerations during transition
  • Request testing strategies for converted code

​
Learn and understand code

Suppose you need to understand an existing codebase or learn new concepts.
1

Get project overview

> explain the architecture and main components of this React application
2

Understand specific patterns

> explain how the state management works in this Redux setup
3

Learn implementation details

> walk me through how user authentication is implemented here
4

Get improvement suggestions

> suggest modern alternatives to the patterns used in this codebase
Tips:
  • Ask for explanations in terms you understand
  • Request examples and comparisons to familiar concepts
  • Focus on one area at a time for better comprehension