> ## Documentation Index
> Fetch the complete documentation index at: https://nikcli.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Steps>
  <Step title="Start NikCLI">
    ```bash theme={null}
    nikcli
    ```
  </Step>

  <Step title="Create Component">
    ```bash theme={null}
    /agent universal-agent "Create a reusable Button component with TypeScript, styled-components, and Jest tests"
    ```
  </Step>

  <Step title="Review Results">
    ```bash theme={null}
    # Check what was created
    /ls src/components/

    # Read the component
    /read src/components/Button.tsx

    # Check tests
    /read src/components/Button.test.tsx
    ```
  </Step>

  <Step title="Run Tests">
    ```bash theme={null}
    /run npm test Button.test.tsx
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Initialize Project">
    ```bash theme={null}
    /agent universal-agent "Create a new Next.js project with TypeScript, Tailwind CSS, and ESLint configuration"
    ```
  </Step>

  <Step title="Add Dependencies">
    ```bash theme={null}
    /run npm install @types/node @types/react @types/react-dom
    /run npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
    ```
  </Step>

  <Step title="Configure Tools">
    ```bash theme={null}
    /agent universal-agent "Set up ESLint configuration for Next.js and TypeScript with strict rules"
    ```
  </Step>

  <Step title="Verify Setup">
    ```bash theme={null}
    /run npm run build
    /run npm run lint
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Plan the System">
    ```bash theme={null}
    /plan "Build a complete authentication system with React frontend, Node.js backend, JWT tokens, and password hashing"
    ```
  </Step>

  <Step title="Create Backend API">
    ```bash theme={null}
    /agent universal-agent "Create Express.js API with user registration, login, JWT authentication, and password hashing using bcrypt"
    ```
  </Step>

  <Step title="Build Frontend">
    ```bash theme={null}
    /agent universal-agent "Create React components for login, registration, and protected routes with context API for state management"
    ```
  </Step>

  <Step title="Add Database">
    ```bash theme={null}
    /agent universal-agent "Set up PostgreSQL database with Prisma ORM and create user schema with migrations"
    ```
  </Step>

  <Step title="Integrate and Test">
    ```bash theme={null}
    /agent universal-agent "Connect frontend to backend API and add comprehensive testing for the authentication flow"
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Analyze Codebase">
    ```bash theme={null}
    /agent universal-agent "Analyze this React codebase for performance issues, code quality problems, and security vulnerabilities"
    ```
  </Step>

  <Step title="Review Analysis">
    ```bash theme={null}
    # NikCLI provides detailed analysis:
    # - Performance bottlenecks identified
    # - Code quality issues found
    # - Security vulnerabilities detected
    # - Optimization recommendations
    ```
  </Step>

  <Step title="Apply Optimizations">
    ```bash theme={null}
    /agent universal-agent "Apply the recommended optimizations: implement code splitting, add memoization, optimize bundle size, and fix security issues"
    ```
  </Step>

  <Step title="Verify Improvements">
    ```bash theme={null}
    /run npm run build
    /run npm run test
    /run npm run audit
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Architecture Planning">
    ```bash theme={null}
    /plan "Create a full-stack e-commerce platform with React frontend, Node.js microservices, PostgreSQL database, Redis caching, and Docker deployment"
    ```
  </Step>

  <Step title="Backend Microservices">
    ```bash theme={null}
    /agent universal-agent "Create microservices architecture with user service, product service, order service, and payment service using Express.js and PostgreSQL"
    ```
  </Step>

  <Step title="Frontend Application">
    ```bash theme={null}
    /agent universal-agent "Build React e-commerce frontend with product catalog, shopping cart, user authentication, and payment integration"
    ```
  </Step>

  <Step title="Database Design">
    ```bash theme={null}
    /agent universal-agent "Design and implement PostgreSQL database schema with proper relationships, indexes, and constraints for e-commerce data"
    ```
  </Step>

  <Step title="DevOps Setup">
    ```bash theme={null}
    /agent universal-agent "Set up Docker containers, Kubernetes deployment, CI/CD pipeline, monitoring, and logging for the e-commerce platform"
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Project Setup">
    ```bash theme={null}
    /agent universal-agent "Create a real-time chat application with React frontend, Node.js backend with Socket.io, and MongoDB for message storage"
    ```
  </Step>

  <Step title="Backend Implementation">
    ```bash theme={null}
    /agent universal-agent "Implement Socket.io server with room management, message broadcasting, user presence, and message persistence in MongoDB"
    ```
  </Step>

  <Step title="Frontend Development">
    ```bash theme={null}
    /agent universal-agent "Create React chat interface with real-time messaging, user list, room management, and message history"
    ```
  </Step>

  <Step title="Advanced Features">
    ```bash theme={null}
    /agent universal-agent "Add advanced features: file sharing, emoji reactions, message editing, typing indicators, and push notifications"
    ```
  </Step>
</Steps>

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

<Steps>
  <Step title="Data Pipeline">
    ```bash theme={null}
    /agent universal-agent "Create a data analysis dashboard with data ingestion, processing, and visualization using Python, Pandas, and React"
    ```
  </Step>

  <Step title="Backend API">
    ```bash theme={null}
    /agent universal-agent "Build FastAPI backend for data processing with endpoints for data upload, analysis, and chart generation"
    ```
  </Step>

  <Step title="Frontend Dashboard">
    ```bash theme={null}
    /agent universal-agent "Create React dashboard with interactive charts using Chart.js, data tables, and filtering capabilities"
    ```
  </Step>
</Steps>

### Example 8: Mobile App with React Native

Develop a cross-platform mobile application.

<Steps>
  <Step title="Mobile App Setup">
    ```bash theme={null}
    /agent universal-agent "Create a React Native mobile app with navigation, state management, and API integration"
    ```
  </Step>

  <Step title="Backend API">
    ```bash theme={null}
    /agent universal-agent "Build REST API for mobile app with authentication, data endpoints, and image upload capabilities"
    ```
  </Step>

  <Step title="App Features">
    ```bash theme={null}
    /agent universal-agent "Implement core mobile features: user authentication, data synchronization, offline support, and push notifications"
    ```
  </Step>
</Steps>

## 🎯 Best Practices

### 1. Start with Planning

Always use planning mode for complex projects:

```bash theme={null}
/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:

```bash theme={null}
/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:

```bash theme={null}
# 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:

```bash theme={null}
# Check agent performance
/agents --metrics

# Monitor resource usage
/memory --stats

# Review execution times
/stats
```

## 🚀 Next Steps

<CardGroup cols={2}>
  <Card title="Advanced Workflows" icon="zap" href="/examples/advanced-automation">
    Explore complex automation scenarios
  </Card>

  <Card title="Agent System" icon="robot" href="/agent-system/architecture">
    Deep dive into cognitive orchestration
  </Card>

  <Card title="Command Reference" icon="terminal" href="/cli-reference/commands-overview">
    Master all commands
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/troubleshooting/common-issues">
    Solve common problems
  </Card>
</CardGroup>

<Tip>
  **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.
</Tip>