|
| 1 | +# Chief Documentation Website |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +A VitePress documentation site for Chief, hosted on GitHub Pages at `minicodemonkey.github.io/chief`. The site includes a stunning landing page and comprehensive documentation explaining how Chief works, with a Tokyo Night-inspired dark theme and Tailwind CSS styling. |
| 6 | + |
| 7 | +## Goals |
| 8 | + |
| 9 | +- Provide a beautiful, modern landing page that explains what Chief is and why developers need it |
| 10 | +- Document the complete PRD → Ralph loop workflow with clear diagrams |
| 11 | +- Offer a full CLI reference generated from the codebase |
| 12 | +- Enable easy sharing of docs with LLMs (copy as markdown, open in Claude/ChatGPT) |
| 13 | +- Deploy automatically via GitHub Actions |
| 14 | + |
| 15 | +## Key Messages |
| 16 | + |
| 17 | +The documentation should emphasize Chief's core philosophy: |
| 18 | + |
| 19 | +1. **Single binary, zero dependencies** - Drop it on any machine and it works |
| 20 | +2. **All state in `.chief/`** - Portable, self-contained, nothing global |
| 21 | +3. **Works anywhere** - Local dev machine or remote server, same experience |
| 22 | +4. **Simple core** - The loop is ~80 lines, easy to understand and debug |
| 23 | + |
| 24 | +## External Resources |
| 25 | + |
| 26 | +- **Blog Post:** [Ship Features in Your Sleep with Ralph Loops](https://www.geocod.io/code-and-coordinates/2026-01-27-ralph-loops/) - Background on the motivation and concepts behind Ralph loops. Should be linked prominently in the "How Chief Works" and "Ralph Loop" documentation pages. |
| 27 | + |
| 28 | +## User Stories |
| 29 | + |
| 30 | +### US-001: VitePress Project Setup |
| 31 | +**Priority:** 1 |
| 32 | +**Description:** As a developer, I want a VitePress project scaffolded in `/docs` so that I can build the documentation site. |
| 33 | + |
| 34 | +**Acceptance Criteria:** |
| 35 | +- [ ] VitePress installed and configured in `/docs` directory |
| 36 | +- [ ] `package.json` with dev/build/preview scripts |
| 37 | +- [ ] Basic `.vitepress/config.ts` with site metadata |
| 38 | +- [ ] Site title: "Chief" with tagline "Autonomous PRD Agent" |
| 39 | +- [ ] Base URL configured for `/chief/` (GitHub Pages project site) |
| 40 | +- [ ] `npm run docs:dev` starts the dev server successfully |
| 41 | + |
| 42 | +### US-002: Tailwind CSS v4 Integration |
| 43 | +**Priority:** 2 |
| 44 | +**Description:** As a developer, I want Tailwind CSS v4 integrated with VitePress so that I can style the landing page with utility classes. |
| 45 | + |
| 46 | +**Acceptance Criteria:** |
| 47 | +- [ ] Tailwind CSS v4 installed (`@tailwindcss/vite` plugin) |
| 48 | +- [ ] Vite config updated to use Tailwind v4 plugin |
| 49 | +- [ ] CSS file with `@import "tailwindcss"` directive |
| 50 | +- [ ] Utility classes work in Vue components and markdown |
| 51 | +- [ ] No conflicts with VitePress default styles |
| 52 | + |
| 53 | +### US-003: Tokyo Night Theme Configuration |
| 54 | +**Priority:** 3 |
| 55 | +**Description:** As a user, I want a dark theme inspired by Tokyo Night so that the site has a modern, developer-friendly aesthetic. |
| 56 | + |
| 57 | +**Acceptance Criteria:** |
| 58 | +- [ ] Custom CSS variables for Tokyo Night color palette |
| 59 | +- [ ] Colors: background `#1a1b26`, foreground `#a9b1d6`, accent `#7aa2f7`, green `#9ece6a`, red `#f7768e`, yellow `#e0af68`, purple `#bb9af7`, cyan `#7dcfff` |
| 60 | +- [ ] Tailwind v4 theme extension using `@theme` directive for custom colors |
| 61 | +- [ ] VitePress theme overrides for sidebar, nav, and content |
| 62 | +- [ ] Code blocks use Tokyo Night syntax highlighting |
| 63 | +- [ ] Consistent dark mode throughout (no light mode toggle needed) |
| 64 | + |
| 65 | +### US-004: Landing Page Hero Section |
| 66 | +**Priority:** 4 |
| 67 | +**Description:** As a visitor, I want an impactful hero section so that I immediately understand what Chief does. |
| 68 | + |
| 69 | +**Acceptance Criteria:** |
| 70 | +- [ ] Large headline: "Autonomous PRD Agent" |
| 71 | +- [ ] Subheadline explaining the value proposition in one sentence |
| 72 | +- [ ] Animated terminal showing `chief new` → `chief` workflow (CSS animation, not real recording) |
| 73 | +- [ ] Install command with copy button: `brew install minicodemonkey/chief/chief` |
| 74 | +- [ ] "Get Started" button linking to quick start docs |
| 75 | +- [ ] "View on GitHub" secondary button |
| 76 | +- [ ] Responsive design (looks good on mobile) |
| 77 | + |
| 78 | +### US-005: Landing Page "How It Works" Section |
| 79 | +**Priority:** 5 |
| 80 | +**Description:** As a visitor, I want a visual explanation of Chief's workflow so that I understand the concept before diving into docs. |
| 81 | + |
| 82 | +**Acceptance Criteria:** |
| 83 | +- [ ] Three-step visual flow: Write PRD → Chief Runs Loop → Code Gets Built |
| 84 | +- [ ] Simple icons or illustrations for each step |
| 85 | +- [ ] Brief description under each step (1-2 sentences) |
| 86 | +- [ ] Emphasize autonomous nature - "you watch, Claude works" |
| 87 | + |
| 88 | +### US-006: Landing Page Key Features Section |
| 89 | +**Priority:** 6 |
| 90 | +**Description:** As a visitor, I want to see Chief's key features highlighted so that I understand why it's valuable. |
| 91 | + |
| 92 | +**Acceptance Criteria:** |
| 93 | +- [ ] Feature: "Single Binary" - No runtime dependencies, download and run |
| 94 | +- [ ] Feature: "Self-Contained State" - Everything in `.chief/`, fully portable |
| 95 | +- [ ] Feature: "Works Anywhere" - Local machine or remote server, SSH in and run |
| 96 | +- [ ] Feature: "Beautiful TUI" - Real-time progress, keyboard controls |
| 97 | +- [ ] Each feature has icon, title, and 1-2 sentence description |
| 98 | +- [ ] Grid layout, responsive |
| 99 | + |
| 100 | +### US-007: Landing Page Footer with CTA |
| 101 | +**Priority:** 7 |
| 102 | +**Description:** As a visitor, I want a footer section so that I have clear next steps. |
| 103 | + |
| 104 | +**Acceptance Criteria:** |
| 105 | +- [ ] Final CTA: "Ready to automate your PRDs?" |
| 106 | +- [ ] Link to quick start guide |
| 107 | +- [ ] Link to GitHub repository |
| 108 | +- [ ] Copyright notice |
| 109 | + |
| 110 | +### US-008: Navigation and Sidebar Structure |
| 111 | +**Priority:** 8 |
| 112 | +**Description:** As a user, I want clear navigation so that I can find documentation easily. |
| 113 | + |
| 114 | +**Acceptance Criteria:** |
| 115 | +- [ ] Top nav: Home, Docs, GitHub link |
| 116 | +- [ ] Sidebar sections: Getting Started, Concepts, Reference, Troubleshooting |
| 117 | +- [ ] Getting Started: Quick Start, Installation |
| 118 | +- [ ] Concepts: How Chief Works, The Ralph Loop, PRD Format, The .chief Directory |
| 119 | +- [ ] Reference: CLI Commands, Configuration, PRD Schema |
| 120 | +- [ ] Troubleshooting: Common Issues, FAQ |
| 121 | +- [ ] Mobile-friendly navigation |
| 122 | + |
| 123 | +### US-009: Quick Start Guide |
| 124 | +**Priority:** 9 |
| 125 | +**Description:** As a new user, I want a quick start guide so that I can get Chief running in under 5 minutes. |
| 126 | + |
| 127 | +**Acceptance Criteria:** |
| 128 | +- [ ] Prerequisites section (Claude Code CLI installed) |
| 129 | +- [ ] Installation options (Homebrew, install script, from source) |
| 130 | +- [ ] Step 1: Install Chief (with copy-able commands) |
| 131 | +- [ ] Step 2: Create your first PRD (`chief new`) |
| 132 | +- [ ] Step 3: Run the loop (`chief`) |
| 133 | +- [ ] Step 4: Watch it work (brief TUI explanation) |
| 134 | +- [ ] "Next steps" linking to deeper docs |
| 135 | + |
| 136 | +### US-010: Installation Guide |
| 137 | +**Priority:** 10 |
| 138 | +**Description:** As a user, I want detailed installation instructions for all platforms so that I can install Chief on my system. |
| 139 | + |
| 140 | +**Acceptance Criteria:** |
| 141 | +- [ ] Homebrew installation (macOS/Linux) |
| 142 | +- [ ] Install script with options (version, custom dir) |
| 143 | +- [ ] Manual binary download with platform matrix |
| 144 | +- [ ] Building from source instructions |
| 145 | +- [ ] Verifying installation (`chief --version`) |
| 146 | +- [ ] Prerequisites clearly listed |
| 147 | + |
| 148 | +### US-011: How Chief Works Overview |
| 149 | +**Priority:** 11 |
| 150 | +**Description:** As a user, I want an overview of how Chief works so that I understand the system before using it. |
| 151 | + |
| 152 | +**Acceptance Criteria:** |
| 153 | +- [ ] High-level explanation of the autonomous agent concept |
| 154 | +- [ ] Diagram showing: User → PRD → Chief → Claude → Code |
| 155 | +- [ ] Explanation of "one iteration = one story" |
| 156 | +- [ ] Mention of conventional commits, progress tracking |
| 157 | +- [ ] Link to the blog post for motivation and background |
| 158 | +- [ ] Link to detailed Ralph Loop explanation |
| 159 | + |
| 160 | +### US-012: The Ralph Loop Deep Dive |
| 161 | +**Priority:** 12 |
| 162 | +**Description:** As a user, I want an in-depth explanation of the Ralph Loop so that I understand exactly what happens during execution. |
| 163 | + |
| 164 | +**Acceptance Criteria:** |
| 165 | +- [ ] Link to blog post "Ship Features in Your Sleep with Ralph Loops" at top for additional context |
| 166 | +- [ ] Mermaid flowchart showing the loop: Read State → Build Prompt → Invoke Claude → Stream Output → Check Completion → Repeat |
| 167 | +- [ ] Explanation of each step with what files are read/written |
| 168 | +- [ ] Diagram showing stream-json output parsing |
| 169 | +- [ ] Explanation of how Claude knows what to do (embedded prompt) |
| 170 | +- [ ] Explanation of `<chief-complete/>` signal |
| 171 | +- [ ] Iteration limits and why they exist |
| 172 | +- [ ] Simple, straightforward language - no jargon |
| 173 | + |
| 174 | +### US-013: The .chief Directory Guide |
| 175 | +**Priority:** 13 |
| 176 | +**Description:** As a user, I want to understand the `.chief/` directory structure so that I know where state is stored. |
| 177 | + |
| 178 | +**Acceptance Criteria:** |
| 179 | +- [ ] Directory tree visualization |
| 180 | +- [ ] Explanation of `prds/` subdirectory structure |
| 181 | +- [ ] File explanations: `prd.md`, `prd.json`, `progress.txt`, `claude.log` |
| 182 | +- [ ] Emphasis on portability - "move your project, state moves with it" |
| 183 | +- [ ] Emphasis on self-contained nature - no global config, no home directory files |
| 184 | +- [ ] Explanation of multiple PRDs in same project |
| 185 | +- [ ] Git considerations (what to commit, what to ignore) |
| 186 | + |
| 187 | +### US-014: PRD Format Reference |
| 188 | +**Priority:** 14 |
| 189 | +**Description:** As a user, I want complete documentation of the PRD format so that I can write effective PRDs. |
| 190 | + |
| 191 | +**Acceptance Criteria:** |
| 192 | +- [ ] `prd.md` markdown format with examples |
| 193 | +- [ ] `prd.json` schema documentation |
| 194 | +- [ ] Field-by-field explanation with types and descriptions |
| 195 | +- [ ] Story selection logic (priority, inProgress handling) |
| 196 | +- [ ] Best practices for writing good user stories |
| 197 | +- [ ] Example PRD with annotations |
| 198 | + |
| 199 | +### US-015: CLI Reference |
| 200 | +**Priority:** 15 |
| 201 | +**Description:** As a user, I want a complete CLI reference so that I know all available commands and options. |
| 202 | + |
| 203 | +**Acceptance Criteria:** |
| 204 | +- [ ] All commands documented: (default), init, edit, status, list |
| 205 | +- [ ] All flags documented with descriptions and defaults |
| 206 | +- [ ] Usage examples for each command |
| 207 | +- [ ] Keyboard shortcuts reference (TUI controls) |
| 208 | +- [ ] Exit codes documentation |
| 209 | +- [ ] Structure mirrors `chief --help` output |
| 210 | + |
| 211 | +### US-016: Troubleshooting Guide |
| 212 | +**Priority:** 16 |
| 213 | +**Description:** As a user, I want a troubleshooting guide so that I can solve common problems. |
| 214 | + |
| 215 | +**Acceptance Criteria:** |
| 216 | +- [ ] "Claude not found" - installation verification |
| 217 | +- [ ] "Permission denied" - explanation of `--dangerously-skip-permissions` |
| 218 | +- [ ] "No sound on completion" - audio troubleshooting |
| 219 | +- [ ] "PRD not updating" - file watcher issues |
| 220 | +- [ ] "Loop not progressing" - checking claude.log |
| 221 | +- [ ] "Max iterations reached" - increasing limits |
| 222 | +- [ ] Each issue has: symptom, cause, solution |
| 223 | + |
| 224 | +### US-017: LLM Actions Component |
| 225 | +**Priority:** 17 |
| 226 | +**Description:** As a user, I want to copy documentation pages as markdown or open them in Claude/ChatGPT so that I can get AI help with Chief. |
| 227 | + |
| 228 | +**Acceptance Criteria:** |
| 229 | +- [ ] Vue component with dropdown menu |
| 230 | +- [ ] "Copy as Markdown" - copies raw page markdown to clipboard |
| 231 | +- [ ] "Open in ChatGPT" - opens ChatGPT with prompt about the page |
| 232 | +- [ ] "Open in Claude" - opens Claude with prompt about the page |
| 233 | +- [ ] Component appears on every documentation page (not landing page) |
| 234 | +- [ ] Styled to match Tokyo Night theme |
| 235 | +- [ ] Raw markdown available via `__DOC_RAW` window variable (requires VitePress transformer config) |
| 236 | + |
| 237 | +### US-018: Search Configuration |
| 238 | +**Priority:** 18 |
| 239 | +**Description:** As a user, I want to search the documentation so that I can find information quickly. |
| 240 | + |
| 241 | +**Acceptance Criteria:** |
| 242 | +- [ ] VitePress local search enabled |
| 243 | +- [ ] Search triggered by `/` or clicking search icon |
| 244 | +- [ ] Results show page titles and content previews |
| 245 | +- [ ] Keyboard navigation in search results |
| 246 | + |
| 247 | +### US-019: Screenshot and Recording Placeholders |
| 248 | +**Priority:** 19 |
| 249 | +**Description:** As a documentation author, I want placeholder images for screenshots and recordings so that the docs are ready for visual content. |
| 250 | + |
| 251 | +**Acceptance Criteria:** |
| 252 | +- [ ] Placeholder image component with customizable dimensions and label |
| 253 | +- [ ] Placeholders for: TUI dashboard, TUI log view, chief new flow |
| 254 | +- [ ] Placeholder for asciinema recording embed (with instructions for later) |
| 255 | +- [ ] `/docs/public/images/` directory created |
| 256 | +- [ ] README in images folder explaining what screenshots are needed |
| 257 | + |
| 258 | +### US-020: GitHub Actions Deployment |
| 259 | +**Priority:** 20 |
| 260 | +**Description:** As a maintainer, I want automatic deployment to GitHub Pages so that docs update when I push to main. |
| 261 | + |
| 262 | +**Acceptance Criteria:** |
| 263 | +- [ ] `.github/workflows/docs.yml` workflow file |
| 264 | +- [ ] Triggers on push to main (changes in /docs or workflow file) |
| 265 | +- [ ] Builds VitePress site |
| 266 | +- [ ] Deploys to GitHub Pages |
| 267 | +- [ ] Uses `actions/deploy-pages` for deployment |
| 268 | +- [ ] Workflow tested and working |
| 269 | + |
| 270 | +### US-021: SEO and Social Cards |
| 271 | +**Priority:** 21 |
| 272 | +**Description:** As a maintainer, I want proper SEO and social sharing cards so that the site looks good when shared. |
| 273 | + |
| 274 | +**Acceptance Criteria:** |
| 275 | +- [ ] Meta description for all pages |
| 276 | +- [ ] Open Graph tags (title, description, image) |
| 277 | +- [ ] Twitter card tags |
| 278 | +- [ ] Favicon configured |
| 279 | +- [ ] Default social image created (placeholder acceptable) |
| 280 | + |
| 281 | +### US-022: Mobile Responsiveness Verification |
| 282 | +**Priority:** 22 |
| 283 | +**Description:** As a mobile user, I want the site to work well on mobile devices so that I can read docs on my phone. |
| 284 | + |
| 285 | +**Acceptance Criteria:** |
| 286 | +- [ ] Landing page responsive at 375px, 768px, 1024px breakpoints |
| 287 | +- [ ] Navigation collapses to hamburger menu on mobile |
| 288 | +- [ ] Code blocks horizontally scroll on mobile |
| 289 | +- [ ] Tables are readable on mobile (horizontal scroll or stacked) |
| 290 | +- [ ] Touch targets are appropriately sized |
| 291 | + |
| 292 | +## Non-Goals |
| 293 | + |
| 294 | +- Light mode theme (dark only for v1) |
| 295 | +- Blog or changelog section |
| 296 | +- Internationalization (English only) |
| 297 | +- Comments or feedback system |
| 298 | +- Analytics integration |
| 299 | +- API documentation (Chief has no API) |
| 300 | +- Video tutorials (text and diagrams only) |
| 301 | + |
| 302 | +## Technical Considerations |
| 303 | + |
| 304 | +- VitePress 1.x for static site generation |
| 305 | +- Tailwind CSS v4 with `@tailwindcss/vite` plugin |
| 306 | +- Vue 3 components for interactive elements |
| 307 | +- Mermaid for diagrams (built into VitePress) |
| 308 | +- GitHub Pages for hosting (project site at /chief/) |
| 309 | + |
| 310 | +## Success Metrics |
| 311 | + |
| 312 | +- Site builds without errors |
| 313 | +- All documentation pages render correctly |
| 314 | +- Navigation works on desktop and mobile |
| 315 | +- Search returns relevant results |
| 316 | +- LLM actions component functions correctly |
| 317 | +- GitHub Actions deploys successfully on merge to main |
0 commit comments