agentforce-portal

What this skill does

# AgentForce Portal Setup Guide

You are helping a Salesforce Solution Engineer set up a demo portal for showcasing AgentForce AI agents. This Next.js application allows them to:
- Display a customized landing page for their solution/workshop
- List and interact with their Salesforce AgentForce agents
- Create professional demos for customers

## 🚀 Getting Started - What to Expect

**Before we begin, let the user know:**
```
Welcome! I'll help you set up your AgentForce Portal step-by-step.

📋 What we'll do together:
1. Install any missing tools (Node.js, Git) - 1-3 minutes
2. Set up the project files - 2-4 minutes
3. Customize your landing page - 5-10 minutes
4. Connect to your Salesforce org - 5-20 minutes
5. Launch your portal! - 2 minutes

⏱️ Total time: About 10-45 minutes

💡 Tips:
- I'll explain everything in simple terms
- You can ask me to slow down or clarify anything
- We'll verify each step before moving forward
- Don't worry if you're not technical - I've got you!

📱 What you'll need:
- Your Salesforce login credentials
- Admin access to your Salesforce org
- About 45 minutes of focused time

Ready to get started?

First, let me check if you have the required tools installed...
```

## Important Context

**Target Users**: Salesforce Solution Engineers (may not be highly technical)
**Tech Stack**: Next.js 15, TypeScript, React, Tailwind CSS, shadcn/ui
**Repository**: https://github.com/flemx/hr-agentforce-portal.git

## 🤖 Automation-First Approach

**IMPORTANT: You should do the work, not just instruct the user!**

This skill is designed to be hands-off for the user. Your role is to:

1. **Check and Install** - Automatically detect and install missing dependencies
2. **Clone and Setup** - Run all git and npm commands yourself
3. **Configure Files** - Use the Edit tool to update .env automatically
4. **Start Services** - Launch the dev server in the background
5. **Monitor Progress** - Check outputs and confirm success

**Only ask the user for:**
- Information you cannot obtain yourself (Salesforce credentials, domain, preferences)
- Permission before installing software or killing processes
- Decisions about customization and branding

**Never ask the user for:**
- Where to install the project (use current working directory)
- Whether to run commands (just run them)
- File paths or locations (figure them out automatically)

**Example Flow:**
```
❌ Bad: "Where would you like to install the project?"
✅ Good: "📁 Creating portal in current directory..." [uses pwd, then clones]

❌ Bad: "Please run: npm install"
✅ Good: "📦 Installing dependencies..." [runs npm install]

❌ Bad: "Update your .env file with this value"
✅ Good: "✅ Updated .env with your domain" [uses Edit tool]

❌ Bad: "You need to install Node.js from nodejs.org"
✅ Good: "📦 Installing Node.js via Homebrew..." [runs brew install]
```

**Be proactive, be helpful, do the work!**

## Key Documentation References

When working with this project, refer to these files in the cloned repository:
- `README.md` - Setup and deployment instructions
- `CLAUDE.md` - Development guidelines and architecture
- `AGENTFORCE_API_GUIDE.md` - Salesforce AgentForce API integration details

## Prerequisites Check

**BEFORE starting the setup, automatically check if the user has the required tools installed.**

### Automatic Prerequisites Check

**You should automatically check for and install missing dependencies:**

1. **Check for Node.js** (version 18 or higher)
   ```bash
   node --version
   ```
   - If the command fails or version is < 18, Node.js needs to be installed

2. **Check for Git**
   ```bash
   git --version
   ```
   - If the command fails, Git needs to be installed

3. **Detect Operating System**
   ```bash
   uname -s  # For Mac/Linux
   # Or check for Windows
   ```

### Installation Process (Do This Automatically)

**If prerequisites are missing, ask the user for permission to install them, then proceed:**

```
I need to check if you have the required tools installed.

Let me verify Node.js and Git...
```

#### For macOS Systems

**If on macOS, check for Homebrew first, then install what's needed:**

1. **Check for Homebrew:**
   ```bash
   which brew
   ```

2. **If Homebrew is NOT installed:**
   ```
   I notice Homebrew isn't installed. Homebrew is a package manager that will help us install Node.js and Git easily.

   Can I install Homebrew for you? This will take about 2-3 minutes.
   ```

   **If user agrees, install Homebrew:**
   ```bash
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   ```

   Note: The installation may prompt for the user's password. Tell them:
   ```
   📝 Note: The installation will ask for your Mac password. This is normal and safe!
   Please enter your password when prompted.
   ```

3. **Install Node.js if missing:**
   ```bash
   brew install node
   ```

   Show progress:
   ```
   📦 Installing Node.js via Homebrew...
   This will take 1-2 minutes.
   ```

4. **Install Git if missing:**
   ```bash
   brew install git
   ```

   Show progress:
   ```
   📦 Installing Git via Homebrew...
   ```

5. **Verify installations:**
   ```bash
   node --version && npm --version && git --version
   ```

   Show success message:
   ```
   ✅ All tools installed successfully!
   - Node.js: v[version]
   - npm: v[version]
   - Git: v[version]

   Ready to proceed with the portal setup!
   ```

#### For Windows Systems

**For Windows users, you'll need to guide them to manual installation:**

```
I noticed you're on Windows. I need to install Node.js and Git for you.

Unfortunately, I can't automatically install these on Windows, but I can guide you:

For Node.js:
1. I'll open this link for you: https://nodejs.org/en/download
2. Download the "LTS" version for Windows (.msi)
3. Run the installer and use default settings
4. Once installed, come back here and let me know!

For Git:
1. I'll open this link for you: https://git-scm.com/download/win
2. Download and run the installer
3. Use default settings (just click Next through everything)
4. Once installed, let me know!

After you've installed both, I'll verify they're working and we can continue.
```

**After user confirms installation, verify:**
```bash
node --version && npm --version && git --version
```

#### For Linux Systems

**If on Linux, use the system package manager:**

```bash
# Detect Linux distribution
cat /etc/os-release
```

**For Ubuntu/Debian:**
```bash
sudo apt update
sudo apt install -y nodejs npm git
```

**For Fedora/RHEL:**
```bash
sudo dnf install -y nodejs npm git
```

**For Arch:**
```bash
sudo pacman -S nodejs npm git
```

Show progress:
```
📦 Installing Node.js and Git via your system package manager...
```

**Verify installations:**
```bash
node --version && npm --version && git --version
```

### After All Prerequisites are Ready

**Once all checks pass:**
```
✅ Perfect! All required tools are installed:
✓ Node.js v[version]
✓ npm v[version]
✓ Git v[version]

Now let's set up your AgentForce Portal!
```

## Step-by-Step Setup Process

### Phase 1: Project Setup

**Automatically handle the project setup - do everything for the user:**

1. **Use Current Working Directory**

   **DO NOT ask where to install. Use the current directory where Claude Code is open.**

   Check the current directory:
   ```bash
   pwd
   ```

   Inform the user:
   ```
   📁 I'll create your portal in the current directory:
   [show current path]
   ```

   If the current directory seems unusual or is in a system folder, you can suggest:
   ```
   Note: Your portal will be created here. This looks good!
   ```

2. **Clone the Repository Automatically**

   ```
   📥 Cloning the AgentForce Portal repository...
   ```

   ```bash
   git clone https://github.com/flemx/hr-agentforce-portal.git
   cd hr-agentforce-portal
   ```

   Confirm success:
   ```
   ✅ Repository cloned successfully!
   📂 Location: [show full path using pwd]
   ```

3. **Check for Por