Build Skill — Field Guide Production Workflow

How to Use This Skill

Follow this workflow in order for every field guide build. Do not skip steps. Do not jump to building before Gate 1 passes.

Step 1: Confirm Book Analysis Is Complete

Routing Check — Run This First

Has the consultant completed the book analysis (File 07)?

• Yes — 5 ideas selected, deliverables named, interactives designed, mental model defined, prompts engineered → proceed to Step 2
• No — stop here. Do not proceed. Go to 07-field-guide-consultant-methodology.md and complete the book analysis. The build cannot start without editorial decisions.

If the consultant has completed the analysis, the output should include:

• 5 idea summaries (idea name, argument, deliverable name, interactive/static designation)
• Mental model definition (contrast, traits, outcome statements, hard truth)
• Interactive designs (exercise type, items, labels, criteria, verdict text)
• Workflow prompt drafts (TASK/INTRODUCTION/STEP for all 5 sessions)

If any of these are missing, flag the gap and return to the consultant.

Step 2: Select 5 Ideas

Confirm the 5 ideas from the consultant's analysis against the selection criteria from 01-field-guide-context.md:

• Recognizable to the audience
• Produces a deliverable
• Builds on the previous
• Spans the book's argument
• At least 3 are interactive

For each idea, write one sentence: "This idea argues [X] and produces [deliverable name]."

Step 3: Design the Interactives

For the 3 interactive ideas, determine the exercise type:

Design the specific content for each interactive:

• What items appear? (Keep labels short — single line at 900px width, ~35 chars max)
• What criteria determine pass/fail tags?
• What does the summary/verdict say for each scenario?
• What are the edge cases?
• For ratings: level names, descriptions, stoplight colors (red/orange/yellow/green)
• For sliders: anchor labels for each dimension (what 1 and 10 look like in practice)

For the 2 static ideas, choose the reference visual:

• Process flow (sequential steps with milestones)
• Comparison grid (two-column contrast)

Step 4: Design the Mental Model

The mental model (Slide 3) frames the book's core argument visually. Define:

• The two-column comparison (what two paths does the book contrast?)
• 5 traits per column
• Outcome statement per column (what each path scales with)
• Hard truth sentence (one uncomfortable insight in a dark callout box)

Study the Built to Sell mental model: Generalist Practice vs. Specialized Practice. Your book has its own version of this contrast.

Step 5: Engineer the Prompts

For each of the 5 AI working sessions, build the workflow prompt. Full format and rules are in 01-field-guide-context.md. Key requirements:

• TASK/INTRODUCTION/STEP format, 5 steps per prompt
• Role assignment in #TASK
• Confirmation questions that push for honesty at every step
• Graceful handoffs (work with or without previous session output)
• Final prompt constrains output and prioritizes by leverage
• Pricing prompts present a range, not a number

Step 6: Run Gate 1

Open 04-field-guide-quality.md and run the Gate 1 pre-build checklist. Every item must be confirmed before proceeding.

Step 7: Open the Golden Example

Open field-guide-built-to-sell-light.html in a browser. Extract the CSS values listed in 03-field-guide-golden-example.md. Do not work from memory. The hex conversion table in File 03 is the canonical reference for every color value.

Step 8: Build

Build in this order. Complete each section before starting the next.

Critical rule: Zero rgba(). Every color is a hardcoded hex value from File 03's palette. No exceptions.

Build Order

1. HTML skeleton — DOCTYPE, head (charset, viewport, Google Fonts link, style block), body, app container, header, slide container, footer nav, script block. Google Fonts URL loads Cormorant Garamond at 300/400/500 only — never 600/700.

1. CSS foundation — Container (700px) and container-wide (900px). Section padding (80px). .section.off-white with background #faf9f7. .section.dark-bridge with background #1a1a1a and light text styles. Typography scale in rem with clamp() for headings. Gold accent bar via .slide-title::after (40px × 3px, #b79d64). Responsive breakpoints at 968/768/480. All color values from File 03's hex palette — zero rgba().

1. Slide 1: Intro — Uses container-wide. Badge, attribution line, title with clamp sizing, subtitle, thesis in book-frame, table of contents. Full width, no columns.

1. Slide 2: Diagnostic — Uses container-wide. 3 questions with radio-style options. All options must render on single lines. Scoring matrix in data attributes. Result: "Idea 0X will hit hardest." Intro text: "start with Idea 01 and work forward."

1. Slide 3: Mental Model — Text in container, comparison grid in container-wide. Two-column grid (stacks on mobile via responsive class). Traits per column, outcome statements, dark insight callout box with gold top bar (#b79d64).

1. Slides 4–13: Idea pairs — Build each pair in order:

• Concept slide: Text in container. Interactive or static in container-wide. Frame header merges instruction. Cream background.
• Session slide: Text in container. Prompt card in container-wide. Workflow prompt in TASK/INTRODUCTION/STEP format. Add .off-white class to section for visual rhythm.

1. Slide 14: Bridge — Uses container with .section.dark-bridge. Dark background, cream text, gold eyebrow, gold accent bar. Single centered CTA. No offer cards.

1. Navigation JS — Slide switching, dot navigation (all circles, same size), keyboard arrows, visited tracking. totalSlides = 14.

1. Interactive JS — One function block per interactive. Summary/verdict logic. Threshold triggers. Dependency bar denominator uses dynamic rated count, not hardcoded.

1. Copy prompt JS — Clipboard API, copied state: dark bg #1a1a1a + gold text #b79d64, 2-second reset.

Content Rules

• Body text density: One paragraph on interactive concept slides. Two max on static. One–two on session slides.
• Exercise instruction: Merged into frame header: "YOUR EXERCISE — [what to do] + [what it means]."
• No act labels. Eyebrows say "Idea 01 — Specialization" not "Act I — Specialization."
• Item label length: Single line at 900px width (~35 characters max for service items and diagnostic options).
• Slider anchor labels: Describe what each end looks like in daily practice.
• Rating legend: Vertical stack with stoplight colors, bold level name, real description.
• All text must pass copy QC. Including frame headers, verdicts, instruction lines, bridge copy.

Step 9: Test Everything

Test the Interactives

Open the file in a browser. For each interactive:

1. Click through 3+ scenarios with different input combinations
2. Verify math — percentages, averages, counts
3. Test edge cases — all selected, none selected, ties
4. Read every verdict/summary message — accurate for this scenario?
5. Verify threshold triggers

Test the Prompts

For each of the 5 prompts:

1. Click the copy button — does it copy the full prompt text?
2. Paste into Claude
3. Does the AI introduce itself and list the steps?
4. Does it walk through each step with confirmation questions?
5. Does it produce the named deliverable?
6. For prompts 2–5: test graceful handoff both ways

Test Navigation

1. Click through all 14 slides forward and backward
2. Test dot navigation — click various slides out of order
3. Test keyboard arrows
4. Verify slide counter shows correct total (14)
5. All dots are circles — no squares

Test Readability and Brand

1. All diagnostic options render on single lines
2. All service item labels render on single lines
3. Slider anchor labels readable and don't overlap
4. Mental model grid stacks on mobile
5. Visual rhythm visible — session slides subtly different from concept slides
6. Bridge is dark with light text
7. Gold accent bars appear under every slide title
8. grep -c 'rgba(' file.html returns 0
9. grep -c 'var(--' file.html returns 0
10. Check at 768px and 480px viewports

Step 10: Run Gate 2 QC

Run the full Gate 2 checklist from 04-field-guide-quality.md. Fix every blocking failure. After fixing, re-run the full checklist.

Step 11: Build the Campaign Spec

Follow 06-field-guide-campaign.md to build the distribution architecture.

Step 12: Build the LinkedIn Visual

Follow the LinkedIn Image Skill. Format: Quote Card, light theme. Primary text 108px+, secondary 68px+.

Attribution on the visual: Book title in the footer. "Based on the book by [Author Name]" underneath. Campaign label says "FIELD GUIDE."

Step 13: Deliver

• Host the field guide at a public URL
• Schedule the campaign emails as broadcasts
• Publish the LinkedIn post
• Begin DM sequence for keyword commenters
• Verify all links — field guide URL, Calendly/booking URL