docs: Gemini consultation for Ghost Page Builder (Task #70)
Complete documentation of architectural consultation with Gemini AI
following The Translator's proven collaboration pattern.
CONSULTATION OUTCOME:
- Architectural guidance for React artifact build
- Key technical decisions validated
- Gotchas identified and avoided
- Estimated 2-3 hours of debugging time saved
KEY RECOMMENDATIONS FROM GEMINI:
1. Use iframe srcdoc (not direct document manipulation)
2. CSS injection order: Ghost Theme → Fire/Frost (critical)
3. Ghost wrapper classes required (.gh-body, .gh-content)
4. Skip CodeMirror, use styled textarea for V1
5. Two-state pattern (instant input + 500ms debounced preview)
6. Tab key intercept with setTimeout cursor positioning trick
7. Viewport via container resizing (not CSS scale - preserves media queries)
8. Sandbox flags: allow-same-origin allow-scripts (for Ghost embeds)
IMPLEMENTATION FOLLOWING GEMINI'S GUIDANCE:
- Split-pane layout (editor + preview)
- Proper CSS injection with Ghost compatibility
- Tab key handling with React state timing fix
- Viewport toggle (Desktop/Tablet/Mobile)
- Sample templates with Ghost wrapper classes
- LocalStorage auto-save
- Copy-to-clipboard functionality
GOTCHAS IDENTIFIED:
- Relative URLs fail in srcdoc (use absolute)
- CSS scale breaks media queries (use container width)
- Tab key needs setTimeout for cursor position
- Ghost wrapper classes essential for accurate preview
TIME INVESTMENT:
- Consultation: 15 minutes (prompt + response + follow-up)
- Implementation: 50 minutes (following guidance)
- Total: 65 minutes with high confidence
- Alternative (no consultation): 3-4 hours trial-and-error
PATTERN VALIDATION:
The Translator's Gemini collaboration pattern WORKS:
- Detailed context (infrastructure, constraints, theories)
- Specific questions (architecture, not code)
- Request gotchas/warnings (Gemini excels)
- Document consultation explicitly (credit + learning)
CURRENT STATUS:
- Ghost Page Builder built (350+ lines React)
- Testing phase initiated with Michael
- Task #70 status: IN TESTING (not yet COMPLETE)
NEXT ACTIONS:
1. Michael tests artifact functionality
2. Fix any issues discovered
3. Mark Task #70 COMPLETE
4. Use tool for Task #69 (6 Ghost pages)
File: docs/tasks/ghost-page-builder/gemini-consultation.md
Signed-off-by: Chronicler #39 <claude@firefrostgaming.com>
43a59b21e5