Basic Workflows

Learn NikCLI through practical examples and real-world workflows

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.

1. Start NikCLI

   nikcli
   
2. Create Component

   /agent universal-agent "Create a reusable Button component with TypeScript, styled-components, and Jest tests"
   
3. 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
   
4. Run Tests

   /run npm test Button.test.tsx
   

What NikCLI Does:

• 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.

1. Initialize Project

   /agent universal-agent "Create a new Next.js project with TypeScript, Tailwind CSS, and ESLint configuration"
   
2. Add Dependencies

   /run npm install @types/node @types/react @types/react-dom
   /run npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
   
3. Configure Tools

   /agent universal-agent "Set up ESLint configuration for Next.js and TypeScript with strict rules"
   
4. Verify Setup

   /run npm run build
   /run npm run lint
   

What NikCLI Creates:

• Complete Next.js project structure
• TypeScript configuration
• Tailwind CSS setup
• ESLint configuration
• Package.json with scripts
• README with setup instructions

🎯 Intermediate Workflows

Example 3: Build an Authentication System

Create a complete authentication system with frontend and backend.

1. Plan the System

   /plan "Build a complete authentication system with React frontend, Node.js backend, JWT tokens, and password hashing"
   
2. Create Backend API

   /agent universal-agent "Create Express.js API with user registration, login, JWT authentication, and password hashing using bcrypt"
   
3. Build Frontend

   /agent universal-agent "Create React components for login, registration, and protected routes with context API for state management"
   
4. Add Database

   /agent universal-agent "Set up PostgreSQL database with Prisma ORM and create user schema with migrations"
   
5. Integrate and Test

   /agent universal-agent "Connect frontend to backend API and add comprehensive testing for the authentication flow"
   

Complete System Includes:

• 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.

1. Analyze Codebase

   /agent universal-agent "Analyze this React codebase for performance issues, code quality problems, and security vulnerabilities"
   
2. Review Analysis

   # NikCLI provides detailed analysis:
   # - Performance bottlenecks identified
   # - Code quality issues found
   # - Security vulnerabilities detected
   # - Optimization recommendations
   
3. Apply Optimizations

   /agent universal-agent "Apply the recommended optimizations: implement code splitting, add memoization, optimize bundle size, and fix security issues"
   
4. Verify Improvements

   /run npm run build
   /run npm run test
   /run npm run audit
   

Optimizations Applied:

• Code splitting and lazy loading
• React.memo and useMemo optimization
• Bundle size reduction
• Security vulnerability fixes
• Performance monitoring setup

🔥 Advanced Workflows

Example 5: Full-Stack E-commerce Platform

Build a complete e-commerce platform with modern architecture.

1. Architecture Planning

   /plan "Create a full-stack e-commerce platform with React frontend, Node.js microservices, PostgreSQL database, Redis caching, and Docker deployment"
   
2. Backend Microservices

   /agent universal-agent "Create microservices architecture with user service, product service, order service, and payment service using Express.js and PostgreSQL"
   
3. Frontend Application

   /agent universal-agent "Build React e-commerce frontend with product catalog, shopping cart, user authentication, and payment integration"
   
4. Database Design

   /agent universal-agent "Design and implement PostgreSQL database schema with proper relationships, indexes, and constraints for e-commerce data"
   
5. DevOps Setup

   /agent universal-agent "Set up Docker containers, Kubernetes deployment, CI/CD pipeline, monitoring, and logging for the e-commerce platform"
   

Complete Platform Features:

• 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.

1. 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"
   
2. Backend Implementation

   /agent universal-agent "Implement Socket.io server with room management, message broadcasting, user presence, and message persistence in MongoDB"
   
3. Frontend Development

   /agent universal-agent "Create React chat interface with real-time messaging, user list, room management, and message history"
   
4. Advanced Features

   /agent universal-agent "Add advanced features: file sharing, emoji reactions, message editing, typing indicators, and push notifications"
   

Chat Application Features:

• 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.

1. Data Pipeline

   /agent universal-agent "Create a data analysis dashboard with data ingestion, processing, and visualization using Python, Pandas, and React"
   
2. Backend API

   /agent universal-agent "Build FastAPI backend for data processing with endpoints for data upload, analysis, and chart generation"
   
3. 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.

1. Mobile App Setup

   /agent universal-agent "Create a React Native mobile app with navigation, state management, and API integration"
   
2. Backend API

   /agent universal-agent "Build REST API for mobile app with authentication, data endpoints, and image upload capabilities"
   
3. 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

Advanced Workflows

Explore complex automation scenarios

Agent System

Deep dive into cognitive orchestration

Command Reference

Master all commands

Troubleshooting

Solve common problems

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.