---
name: build-context-gatherer
description: "Gathers all relevant design, brand, and product context before spawning build subagents. MANDATORY before any landing page or app build. Ensures subagents have full context to maintain brand consistency and follow design protocols."
---

# Build Context Gatherer

## ⛔ HARD REQUIREMENT — NO EXCEPTIONS

**This skill MUST be run before spawning ANY build subagent.**

- ❌ **DO NOT** spawn build tasks with manually-specified file paths
- ❌ **DO NOT** tell subagents "read design-system-prompt.md"
- ❌ **DO NOT** bypass this by embedding context directly in spawn task

- ✅ **ALWAYS** run `gather-context.sh` first
- ✅ **ALWAYS** include the output bundle in your spawn task
- ✅ **ALWAYS** use the spawn template provided below

**Why this matters:** Even if you manually specify the right files, subagents often skip them or partially read them. The gather script bundles everything into a single block that gets embedded in the task — guaranteeing the context is in the prompt, not just referenced.

---

## Why This Exists

Subagents are born without context. Without explicit instructions, they:
- Use generic colors instead of brand palette
- Ignore established typography
- Miss design patterns and anti-patterns
- Produce inconsistent, off-brand work

This skill solves that by gathering everything upfront and **embedding** it in the spawn task.

## Quick Usage

```bash
# Generate context bundle for a product
bash scripts/gather-context.sh <product-slug> <build-type>

# build-type: "landing" | "app" | "both"
```

This outputs a context bundle to `/tmp/build-context-<slug>.md` that you include in your spawn task.

## What Gets Gathered

### 1. Product Identity
- `product.yaml` - Name, tagline, phase
- `brain.md` - Product intelligence (first 500 lines)
- `discovery/brief.md` - Core value proposition

### 2. Design Context (CRITICAL)
- `design/brand-guidelines.md` - Colors, typography, logo usage
- `design/design-system-prompt.md` - Design rules and patterns
- `design/assets/` inventory - Available logos, images, fonts

### 3. Target Audience
- `discovery/target-market.md` - Who we're building for
- `discovery/personas/` - User personas if they exist

### 4. Technical Context (for apps)
- `build/tech-stack.md` - Framework, libraries
- Existing component patterns from codebase

### 5. Skills to Follow
- `frontend-design` - Design principles
- `landing-page-builder` - Landing page patterns
- `frontend-design-excellence` - Quality gate

## Spawn Template

After gathering context, spawn with this template:

```
sessions_spawn({
  task: `
## BUILD TASK: [Landing Page / App Feature]

### CRITICAL: Read These First
1. Read skill: /home/aria/.openclaw/workspace/skills/frontend-design/SKILL.md
2. Read skill: /home/aria/.openclaw/workspace/skills/landing-page-builder/SKILL.md
3. Read the context bundle below carefully

### Context Bundle
[PASTE OUTPUT FROM gather-context.sh HERE]

### Your Task
[Specific build instructions]

### Quality Gate
Before reporting done:
1. Verify brand colors match exactly (check hex values)
2. Verify typography matches brand guidelines
3. Verify logo is used correctly
4. Run the build and verify no errors
5. Check responsive behavior

### Post-Deploy (REQUIRED)
After the app is running:
\`\`\`bash
~/.openclaw/workspace/scripts/post-deploy-hook.sh "<slug>" landing|app "Change 1" "Change 2" "Change 3"
\`\`\`
This triggers the before/after approval card for human review.

### Deliverables
- Working code committed to worktree
- Brief summary of what was built
- Approval card triggered for review
`,
  label: "build-<slug>-<feature>"
})
```

## Manual Context Gathering

If the script isn't available, gather manually:

### Step 1: Product Identity
```bash
SLUG="product-slug"
PRODUCT_DIR="/home/aria/products/$SLUG"

cat $PRODUCT_DIR/product.yaml
head -100 $PRODUCT_DIR/brain.md
cat $PRODUCT_DIR/discovery/brief.md 2>/dev/null || echo "No brief"
```

### Step 2: Design Context
```bash
cat $PRODUCT_DIR/design/brand-guidelines.md 2>/dev/null
cat $PRODUCT_DIR/design/design-system-prompt.md 2>/dev/null
ls -la $PRODUCT_DIR/design/assets/ 2>/dev/null
```

### Step 3: Check Existing Work
```bash
# For landing pages
ls -la /home/aria/projects/${SLUG}-landing/src/ 2>/dev/null

# For apps
ls -la $PRODUCT_DIR/apps/main/src/ 2>/dev/null
```

## Context Bundle Format

The gathered context should be formatted as:

```markdown
# Build Context: [Product Name]

## Product Identity
- **Name:** [name]
- **Tagline:** [tagline]
- **Phase:** [current phase]

## Brand Guidelines
[Paste brand-guidelines.md content]

## Design System
[Paste design-system-prompt.md content]

## Available Assets
- Logo: [path]
- Fonts: [list]
- Images: [list]

## Target Audience
[Key points from target-market.md]

## Technical Stack (if app)
[From tech-stack.md]

## Anti-Patterns to Avoid
- Generic SaaS look
- Stock photos
- Corporate speak
- Inconsistent colors
- Wrong typography
```

## Post-Build Checklist

After subagent completes, verify:

- [ ] Brand colors used correctly (check actual hex values in code)
- [ ] Typography matches guidelines (font family, weights, sizes)
- [ ] Logo used correctly (right version, proper spacing)
- [ ] Copy tone matches brand voice
- [ ] No generic stock imagery
- [ ] Responsive design works
- [ ] Build compiles without errors
- [ ] Matches the design-system-prompt.md direction

If ANY check fails → fix before delivering.

## Integration with Worktree Manager

Always use worktrees for builds:

```bash
# 1. Create worktree first
SKILL_DIR="/home/aria/.openclaw/workspace/skills/worktree-manager/scripts"
$SKILL_DIR/create-worktree.sh "$SLUG" "$TASK_ID" "$REQUESTER" "$REQUESTER_ID" "description"

# 2. Gather context
bash /home/aria/.openclaw/workspace/skills/build-context-gatherer/scripts/gather-context.sh "$SLUG" landing

# 3. Spawn with context
# 4. After completion, merge worktree
$SKILL_DIR/merge-worktree.sh "$SLUG" "$TASK_ID"
```

## Troubleshooting

| Issue | Cause | Fix |
|-------|-------|-----|
| Subagent uses wrong colors | Brand guidelines not included | Re-run with full context bundle |
| Generic typography | design-system-prompt.md missing | Ensure it exists and is included |
| Wrong logo | Assets not inventoried | List assets explicitly in context |
| Off-brand copy | Target audience not included | Add target-market.md to context |
