DBAdmin/inbox/001_start.md

Welcome, **paweł**! 👋 Here are your prompts.

# Introduction

## What is the Agent Command Kit?

Mission Control is a single-file HTML dashboard that serves as your personal command center — tracking goals, projects, revenue, AI agents, and more. All in one place on your desktop.

📄 **Single HTML File**

No frameworks, no deploys, no dependencies. Just one file you open in your browser.

🤖 **AI-Built**

Copy a prompt, paste it into Claude or ChatGPT, and get a complete working dashboard in seconds.

🎨 **Fully Yours**

Every pixel is customizable. Change colors, add sections, make it match your workflow perfectly.

### Why It Works

Most dashboards require accounts, subscriptions, and fighting with someone else's idea of what you need. Mission Control flips that — it's a single HTML file:

- Opens instantly, works offline, zero loading screens
- Your data stays in your browser (localStorage) — no cloud, no accounts
- AI builds it to YOUR spec — not a template you have to hack around
- Version control it, back it up, share it — it's just a file

### How to Use This Guide

This guide contains **3 prompts** that build progressively. Each one is a complete, copy-paste-ready prompt designed to produce production-quality code.

1.  **Copy the Prompt**
    Click the copy button on any prompt block to copy it to your clipboard.
2.  **Fill in \[Brackets\]**
    Replace variables like `[YOUR_NAME]` with your actual info.
3.  **Paste & Build**
    Send to Claude or ChatGPT. Save the output as an HTML file. Done.

---

## Prompt 01: The Foundation

This mega-prompt builds your complete Mission Control dashboard from scratch — a premium dark-theme command center with live data, smooth animations, and persistent storage. One prompt, one file, zero dependencies.

### What You'll Get

A 2000+ line, production-quality HTML file containing:

- Dark glassmorphism theme with frosted-glass cards and subtle glow effects
- Sticky header with navigation tabs, live clock, and status indicator
- **Dashboard tab** — Welcome greeting, 4 metric cards, activity feed, priorities
- **Projects tab** — Full Kanban board (Backlog → In Progress → Done)
- **Timeline tab** — Phase-based roadmap with milestones
- **Notes tab** — Quick capture with auto-save
- All data persisted to localStorage — nothing lost on refresh
- Keyboard shortcut (Cmd+K) for search, responsive design, smooth animations

### Variables to Fill In

- `[YOUR_NAME]`: Your first name (used in the welcome greeting)
- `[YOUR_BUSINESS]`: Your company or project name
- `[YOUR_ROLE]`: Your title — CEO, Creator, Developer, etc.
- `[MAIN_GOAL]`: Your primary goal (e.g., "Hit $10K MRR")
- `[GOAL_DEADLINE]`: Target date (e.g., "December 2025")
- `[GOAL_METRIC]`: The key number you're tracking
- `[COLOR_ACCENT]`: Hex color for accents (e.g., `#6C63FF`, `#00D4AA`)

💡 **Tip:** Use Claude (Sonnet or Opus) for best results. The prompt is optimized for long-form code generation. If using ChatGPT, use GPT-4 with a "write the complete file" follow-up if it truncates.

### The Foundation Prompt

````text
I want you to build me a Mission Control dashboard as a single HTML file. This is my personal command center for tracking my life and business.

**About Me:**
- Name: [YOUR_NAME]
- Business/Role: [YOUR_BUSINESS] — [YOUR_ROLE]
- Main Goal: [MAIN_GOAL] by [GOAL_DEADLINE]
- Key Metric: [GOAL_METRIC]

**Technical Requirements:**
- Single self-contained HTML file (inline CSS + JS, no external dependencies except Google Fonts Inter)
- Dark theme with glassmorphism: primary bg #050508, cards with backdrop-filter blur, subtle borders rgba(255,255,255,0.06)
- Accent color: [COLOR_ACCENT] (use for highlights, active states, glows)
- Font: Inter from Google Fonts
- Fully responsive, smooth animations (fadeInUp on cards, pulse on status dot)
- All data saved to localStorage so nothing is lost on refresh

**Layout:**
- Sticky frosted-glass header: logo/title left, tab navigation center, search bar + live status dot right
- Tabs: 📊 Dashboard, 📋 Projects, 📅 Timeline, 📝 Notes
- Main content max-width 1600px, centered, 2.5rem padding

**Dashboard Tab:**
- Welcome bar: "Good [morning/afternoon/evening], [NAME]" with live date/time
- 4 metric cards in a grid: each with colored top accent bar (3px), icon, label, value, and trend indicator
  Cards: [GOAL_METRIC] progress, Active Projects count, Tasks Today count, Days to Goal countdown
- Activity feed: scrollable list of recent items with timestamps (stored in localStorage)
- Top Priorities section: editable list with checkboxes, add new priority button

**Projects Tab:**
- Kanban board with 3 columns: Backlog, In Progress, Done
- Task cards: title, description preview, priority badge (high/medium/low with colors), created date
- Add task button per column, click card to edit, delete option
- All tasks persisted to localStorage

**Timeline Tab:**
- Visual roadmap with phases displayed vertically
- Each phase: title, date range, description, list of milestones with completion checkmarks
- Current phase highlighted...
````

---

## Prompt 02: The Modules

Now that you have the foundation, add power modules. Each prompt adds a new tab to your existing dashboard.

💡 **How to use:** Open a new conversation with your AI. Paste your existing `mission-control.html` file first, then paste the module prompt below it. The AI will return an updated file with the new tab integrated.

### 💰 Module A: Revenue Tracker

Track MRR, manage clients, visualize growth, and project annual revenue.

````text
Add a 💰 Revenue tab to my Mission Control. Include:
- Monthly revenue goal with visual gauge (circular or bar)
- Revenue chart showing last 6 months (simple bar chart, CSS-only or canvas)
- Client list with: name, monthly value, status (active/pending/churned), start date
- Add/edit/remove clients, auto-calculate MRR
- Revenue projections section: if current MRR continues, show projected annual + monthly growth needed to hit goal
- All data in localStorage
- Match the existing dark glassmorphism theme and animation style
````

### 🏢 Module B: AI Agent Command Center

Manage your AI agents, track their activity, send tasks, and log executive decisions.

````text
Add a 🏢 Command Center tab to my Mission Control for managing my AI agents/team. Include:
- Agent cards in a grid: each shows name, role/title, status (online/busy/offline with colored dots), model being used, last active timestamp
- Click agent card to open a slide-out detail panel with: full description, capabilities list, recent activity log, performance notes
- "Send Task" button that opens a modal with a text area (simulates sending tasks — saves to agent's activity log)
- Executive Decisions section below agents: list of key decisions made with date, question asked, decision summary, which agents were consulted
- Store all agent data in localStorage, include 3-4 sample agents to start
````

### 🎬 Module C: YouTube Studio

Plan video content, track growth milestones, and manage a content calendar.

````text
Add a 🎬 YouTube tab to my Mission Control for planning video content. Include:
- Video ideas pipeline: cards with title, topic, status (idea/scripting/filming/editing/published), target publish date
- Add/edit ideas, move between statuses
- YouTube growth tracker: current sub count (editable), milestone levels with fun titles (e.g., "Rising Creator" at 1K, "Growth Engine" at 10K), XP-style progress bar to next milestone
- Content calendar: simple month grid showing planned publish dates
- All data in localStorage, match existing theme
````

### 📞 Module D: Meeting Prep

Never walk into a meeting unprepared. Track agendas, notes, and action items.

````text
Add a 📞 Meetings tab to my Mission Control. Include:
- Upcoming meetings list: title, date/time, attendee(s), type (call/zoom/in-person), prep notes
- Add/edit/delete meetings
- Each meeting card expands to show: agenda items (editable checklist), notes textarea, action items that come out of it
- Past meetings archive (auto-moves when date passes)
- Today's meetings highlighted at top with countdown timers
- localStorage persistence, match theme
````

### 📡 Module E: Daily Intel Feed

Curate your own intel feed — AI news, trends, competitor moves, and opportunities.

````text
Add a 📡 Intel tab to my Mission Control. Include:
- Sections for different intel categories: AI News, Industry Trends, Competitor Watch, Opportunities
- Each item: title, summary, source link, date added, importance tag (🔥 hot / ⚡ notable / 📌 reference)
- Add new intel items with a simple form
- Filter by category and importance
- "Daily Brief" section at top: 3-5 most important items auto-sorted by date
- localStorage persistence, match theme
````

---

## Prompt 03: The Engine

Make Mission Control a living dashboard. This prompt builds a lightweight Node.js server for live data, weather, and backup.

````text
I need a lightweight local server to power my Mission Control dashboard with live data. Build me a complete Node.js server with these specs:

**Setup:**
- Single file: server.js (or server.mjs)
- Port: 8899
- Serve my mission-control.html file at the root
- CORS enabled for local development
- No heavy frameworks — just built-in Node http/https modules (or Express if cleaner)

**API Endpoints:**
Create RESTful endpoints that Mission Control can fetch from:
1.  `GET /mc/status` — Returns system status:
    - Server uptime, last data refresh timestamp, connection health: "online"
2.  `GET /mc/data` — Returns dashboard data:
    - Read from a local JSON file (mc-data.json) that stores all dashboard state
3.  `POST /mc/data` — Save dashboard data:
    - Accepts JSON body, writes to mc-data.json
    - Lets Mission Control sync its localStorage to the server as backup
4.  `GET /mc/weather?city=[CITY]` — Fetch current weather:
    - Use wttr.in API (free, no key): https://wttr.in/[CITY]?format=j1
    - Return: temperature, condition, feels_like
5.  `GET /mc/activity` — Returns recent activity log:
    - Read from mc-activity.json, returns last 50 entries
6.  `POST /mc/activity` — Add activity entry:
    - Appends to mc-activity.json with timestamp

**Auto-start (macOS):**
Also generate a LaunchAgent plist file that auto-starts this server on login:
- File: `~/Library/LaunchAgents/com.missioncontrol.server.plist`
- Points to the server.js file
- Runs on load, restarts if crashed
- Include the terminal commands to install it

**Setup instructions:**
Print clear step-by-step setup instructions:
1.  Save `server.js` to a folder
2.  Run `node server.js`
3.  Open http://localhost:8899
4.  (Optional) Install the LaunchAgent for auto-start

Keep it simple. No database, no auth, no complexity. Just a clean local server that makes Mission Control come alive.
````

### Prompt 03 — Bonus

#### Connecting Your Dashboard to the Server

Once your server is running, use this mini-prompt to wire up your dashboard:

````text
⚡ **Connection Prompt**

Update my mission-control.html to connect to the local server at http://localhost:8899. Add:

1.  On page load, fetch `GET /mc/data` and merge with localStorage (server = backup, localStorage = primary)
2.  Every 5 minutes, `POST` current localStorage state to `/mc/data` as backup
3.  Fetch weather from `GET /mc/weather?city=[YOUR_CITY]` and display temp + condition in the header next to the status dot
4.  When any data changes, `POST` to `/mc/activity` with a description of what changed
5.  Update the status dot: green = server connected, red = offline (fallback to localStorage-only mode)
6.  Add a small "Server: Online/Offline" indicator in the header

Keep all existing localStorage functionality as the primary data layer. The server is a backup + data enrichment layer, not a replacement.
````

💡 **Pro tip:** You don't need The Engine to use Mission Control. The HTML file works perfectly standalone. The server just adds superpowers — live weather, backup, and a clean localhost URL.

---

## You're Ready

### Now Make It Yours

These prompts are starting points. The best agent setup is the one built around _your_ life, _your_ goals, _your_ workflow. Customize relentlessly.

Change the colors. Add new tabs. Rip out what you don't need. Ask the AI to rebuild sections. This is _your_ command center.

---

**Watch the full build series on YouTube**

[youtube.com/@Zach_Babiarz_ai](https://youtube.com/@Zach_Babiarz_ai)

**Follow on all socials**: [zachbabiarz.com](https://zachbabiarz.com/)

**Questions? Ideas? Show me what you built.**

Drop a comment on any video — I read every single one.

---

### WANT EXTRA HELP?

#### Book a 1-on-1 with Zach

Get your OpenClaw setup dialed in for your specific business — workflows, memory, automations, and agents built around you.

[Book a Consult Call →](https://automatewithzach.com/)

---

BUILT WITH OPENCLAW + CLAUDE
© 2026 Zach Babiarz. Share freely.