Basic Workflows
Master NikCLI through hands-on examples that demonstrate real-world development scenarios. These workflows showcase the power of cognitive orchestration and intelligent automation.
🚀 Getting Started Examples
Example 1: Create a React Component
Learn how to create a complete React component with TypeScript, styling, and tests.
Create Component
/agent universal-agent "Create a reusable Button component with TypeScript, styled-components, and Jest tests"
Review Results
# Check what was created
/ls src/components/
# Read the component
/read src/components/Button.tsx
# Check tests
/read src/components/Button.test.tsx
Run Tests
/run npm test Button.test.tsx
- Analyzes requirements using cognitive orchestration
- Creates TypeScript interfaces and props
- Implements styled-components for styling
- Generates comprehensive Jest tests
- Follows React best practices and patterns
Example 2: Set Up a New Project
Create a complete project structure with modern tooling.
Initialize Project
/agent universal-agent "Create a new Next.js project with TypeScript, Tailwind CSS, and ESLint configuration"
Add Dependencies
/run npm install @types/node @types/react @types/react-dom
/run npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
Configure Tools
/agent universal-agent "Set up ESLint configuration for Next.js and TypeScript with strict rules"
Verify Setup
/run npm run build
/run npm run lint
- Complete Next.js project structure
- TypeScript configuration
- Tailwind CSS setup
- ESLint configuration
- Package.json with scripts
- README with setup instructions
Example 3: Build an Authentication System
Create a complete authentication system with frontend and backend.
Plan the System
/plan "Build a complete authentication system with React frontend, Node.js backend, JWT tokens, and password hashing"
Create Backend API
/agent universal-agent "Create Express.js API with user registration, login, JWT authentication, and password hashing using bcrypt"
Build Frontend
/agent universal-agent "Create React components for login, registration, and protected routes with context API for state management"
Add Database
/agent universal-agent "Set up PostgreSQL database with Prisma ORM and create user schema with migrations"
Integrate and Test
/agent universal-agent "Connect frontend to backend API and add comprehensive testing for the authentication flow"
- User registration and login forms
- JWT token management
- Password hashing with bcrypt
- Protected route components
- Database models and migrations
- API endpoints with validation
- Comprehensive test suite
Example 4: Optimize Existing Code
Analyze and optimize an existing codebase for performance and quality.
Analyze Codebase
/agent universal-agent "Analyze this React codebase for performance issues, code quality problems, and security vulnerabilities"
Review Analysis
# NikCLI provides detailed analysis:
# - Performance bottlenecks identified
# - Code quality issues found
# - Security vulnerabilities detected
# - Optimization recommendations
Apply Optimizations
/agent universal-agent "Apply the recommended optimizations: implement code splitting, add memoization, optimize bundle size, and fix security issues"
Verify Improvements
/run npm run build
/run npm run test
/run npm run audit
- Code splitting and lazy loading
- React.memo and useMemo optimization
- Bundle size reduction
- Security vulnerability fixes
- Performance monitoring setup
🔥 Advanced Workflows
Build a complete e-commerce platform with modern architecture.
Architecture Planning
/plan "Create a full-stack e-commerce platform with React frontend, Node.js microservices, PostgreSQL database, Redis caching, and Docker deployment"
Backend Microservices
/agent universal-agent "Create microservices architecture with user service, product service, order service, and payment service using Express.js and PostgreSQL"
Frontend Application
/agent universal-agent "Build React e-commerce frontend with product catalog, shopping cart, user authentication, and payment integration"
Database Design
/agent universal-agent "Design and implement PostgreSQL database schema with proper relationships, indexes, and constraints for e-commerce data"
DevOps Setup
/agent universal-agent "Set up Docker containers, Kubernetes deployment, CI/CD pipeline, monitoring, and logging for the e-commerce platform"
- User authentication and authorization
- Product catalog with search and filters
- Shopping cart and checkout process
- Payment integration (Stripe)
- Order management system
- Admin dashboard
- Microservices architecture
- Docker containerization
- Kubernetes deployment
- CI/CD pipeline
- Monitoring and logging
Example 6: Real-Time Chat Application
Create a real-time chat application with WebSocket communication.
Project Setup
/agent universal-agent "Create a real-time chat application with React frontend, Node.js backend with Socket.io, and MongoDB for message storage"
Backend Implementation
/agent universal-agent "Implement Socket.io server with room management, message broadcasting, user presence, and message persistence in MongoDB"
Frontend Development
/agent universal-agent "Create React chat interface with real-time messaging, user list, room management, and message history"
Advanced Features
/agent universal-agent "Add advanced features: file sharing, emoji reactions, message editing, typing indicators, and push notifications"
- Real-time messaging with Socket.io
- Multiple chat rooms
- User presence indicators
- Message history and persistence
- File sharing capabilities
- Emoji reactions
- Typing indicators
- Push notifications
- Responsive design
🛠️ Specialized Workflows
Example 7: Data Analysis Dashboard
Build a data analysis dashboard with charts and visualizations.
Data Pipeline
/agent universal-agent "Create a data analysis dashboard with data ingestion, processing, and visualization using Python, Pandas, and React"
Backend API
/agent universal-agent "Build FastAPI backend for data processing with endpoints for data upload, analysis, and chart generation"
Frontend Dashboard
/agent universal-agent "Create React dashboard with interactive charts using Chart.js, data tables, and filtering capabilities"
Example 8: Mobile App with React Native
Develop a cross-platform mobile application.
Mobile App Setup
/agent universal-agent "Create a React Native mobile app with navigation, state management, and API integration"
Backend API
/agent universal-agent "Build REST API for mobile app with authentication, data endpoints, and image upload capabilities"
App Features
/agent universal-agent "Implement core mobile features: user authentication, data synchronization, offline support, and push notifications"
🎯 Best Practices
1. Start with Planning
Always use planning mode for complex projects:
/plan "Your project description"
# Creates detailed execution plan
# Breaks down into manageable phases
# Sets up approval workflows
2. Use Parallel Execution
Leverage parallel execution for independent tasks:
/parallel "Create frontend components" "Set up backend API" "Configure database"
# Executes tasks simultaneously
# Saves development time
# Maintains coordination
3. Iterate and Refine
Use NikCLI’s learning capabilities:
# First iteration
/agent universal-agent "Create basic component"
# Refine based on results
/agent universal-agent "Improve the component with better styling and accessibility"
# Add advanced features
/agent universal-agent "Add animations and micro-interactions to the component"
4. Monitor and Optimize
Use monitoring tools to track performance:
# Check agent performance
/agents --metrics
# Monitor resource usage
/memory --stats
# Review execution times
/stats
🚀 Next Steps
Pro Tip: Use /plan for complex projects to break them down into manageable phases. This helps NikCLI create more accurate execution plans and better coordinate parallel tasks.
