Source: frameworks/kit-master-plan/05-master-plan-output-skill.md

Client Master Plan — Output Skill

What this produces: A fully styled, single-file HTML Client Master Plan. This is a living document — it grows with each session. Dark theme, Advisory OS branded (not client-branded).

Output filename: client-master-plan-[client-first-name]-[client-last-name].html (no date — living document)

Required inputs: Client profile data, session transcripts, constraint briefs, previous master plan (if updating).

Reference file: aos-brand-kit.html — consult for exact hex values, CSS variables, and typography specs.

Document Identity

The master plan is the advisor's strategic command center for a client engagement. It is NOT client-facing. It tracks everything: GPS, constraints, themes, quotes, wins, actions, conversations, seeds planted, and recommendations. It grows over time and becomes the single source of truth for the relationship.

How to Use This Skill

Copy the HTML template below. Replace all {{PLACEHOLDER}} content with actual client data. Do not modify the CSS, class names, or HTML structure. Add or remove repeating blocks (constraints, quotes, actions, conversations, modals) as needed.

Section Order

Header — Brand mark, "Client Master Plan" title, navigation buttons
Client Header — Name, firm, team size, relationship start, last updated date
GPS — Trajectory summary + Position/Direction/Speed grid + history toggle
Weekly Rhythm — Meeting cadence and recurring touchpoints (add when established)
Recurring Themes — Evidence-backed patterns with source tags
Card Grid:

Row 1: Relationship + Current Engagement (split row)
Seeds Planted (full width)
Constraints Diagnosed + Recommendations (split row)
Key Quotes + Latest Wins (split row)
Actions (full width)
Recent Conversations (two-thirds) + History/Notes (one-third)

Modals — Full conversation recaps (one per session)
Footer — Document title + last updated date

Update Rules

After every session, update in this order:

Conversation Recap (always) — add entry + modal
Action Items (always) — check off completed, add new
GPS (if changed) — push current to history, update current
Constraint Statuses (if changed) — update badges and detail text
Wins (if any) — add new wins
Recommendations (if changed) — update statuses
History (always) — add one-line entry with date

What NOT to update:

Historical conversation recaps — they document what was discussed at the time
GPS history entries — they're a timeline
Solved constraints — once marked solved, leave them

GPS Change Markers

Each GPS field gets a marker on update:

Changed — .changed — amber background, something moved
Consistent — .consistent — muted background, no change
Escalated — .escalated — red background, urgency increased

Constraint Status Progression

Open → In Progress → Active Solve → Designed → Deployed → Solved

Solved constraints move to the solved section with green left border, strikethrough text, and date.

Constraint Pattern Tags

Emoji	Term	Meaning
🔁	Recurring	Happens repeatedly on a cycle
📈	Escalating	Gets worse each cycle you don't solve it
📦	Same Root Cause	Multiple constraints from one missing system
↔️	Solve Together	Two constraints amplify each other, solve in one project
⬆️	Upstream	Root cause level
⬇️	Downstream	Symptom level, resolves when upstream is solved

Recommendation Statuses

Suggested → Accepted → In Progress → Designed → Implemented

Seed Statuses

Seed (planted) → Presented → Interested → Active (agreed/signed)

Content Rules

GPS Trajectory — 3–5 sentences. What's happening, what just happened, what's coming. No jargon.
Themes need evidence. Source tags showing where the pattern was observed.
Quotes stay close to what was said. Clean up filler and garble, never fabricate.
Action items get owner badges. Advisor (gold) or Client (blue). Group by session date.
Conversation recaps document what happened, not what was planned. If the conversation went off-script, document where it went.
Wins are evidence of progress. Operational wins, relationship wins, team wins.
Seeds Planted tracks future revenue. Each seed has a status and a "Next" action.

Repeating Block Templates

Constraint Card

<div class="constraint-item" style="border-left: 3px solid {{TIER_COLOR}};">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
        <div class="constraint-type" style="margin-bottom: 0;">{{TYPE_EMOJI}} {{TYPE}} · {{CATEGORY}} · {{TIER}}</div>
        <span style="font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.4rem; background: var(--slate); color: var(--cream);">{{STATUS}}</span>
    </div>
    <div class="constraint-text">{{ID}} — {{CONSTRAINT NAME}}</div>
    <div class="constraint-detail">{{DETAIL TEXT}}</div>
    <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
        <!-- Add pattern tags as needed -->
        <span style="font-size: 0.6rem; padding: 0.15rem 0.4rem; background: var(--warning); color: var(--charcoal);">🔁 Recurring</span>
    </div>
</div>

Tier colors:

Tier 1 (Solve This Week): var(--gold) border
Tier 2 (Find Upstream): var(--slate) border
Tier 3 (Queue): var(--slate) border
Tier 4 (May Self-Resolve): var(--muted) border, add opacity: 0.8

Solved Constraint

<div class="solved-item">
    <div class="constraint-text">{{CONSTRAINT NAME}}</div>
    <div class="solved-detail">Solved: {{SOLUTION}} · {{DATE}} · {{STATUS NOTE}}</div>
</div>

Solve Together Marker

<span class="solve-together-marker">↔️ Solve Together with {{OTHER_ID}}</span>

Theme Item

<div class="theme-item" style="border-left: 3px solid {{COLOR}};">
    <div class="theme-name" style="display: flex; align-items: center; gap: 0.75rem;">{{THEME NAME}} <span style="font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.4rem; background: {{BADGE_BG}}; color: {{BADGE_TEXT}};">{{BADGE}}</span></div>
    <div class="theme-evidence">{{EVIDENCE TEXT}}</div>
    <div class="theme-sources">
        <span class="theme-source">{{SOURCE 1}}</span>
        <span class="theme-source">{{SOURCE 2}}</span>
    </div>
</div>

Theme border colors:

Critical/active: var(--danger) (#8b4049)
Strategic/structural: var(--gold) (#b79d64)
Informational: var(--warning) (default)

Recommendation Item

<div class="recommendation-item">
    <div class="recommendation-text">{{RECOMMENDATION}}</div>
    <div class="recommendation-linked">Linked: {{CONSTRAINT IDS}} · {{CONTEXT}}</div>
    <span class="recommendation-status {{STATUS_CLASS}}">{{STATUS}}</span>
</div>

Status classes: open, presented, accepted, implemented

Seed Item

<div class="offer-item">
    <div class="offer-top">
        <div class="offer-info">
            <div class="offer-name">{{OFFER NAME}}</div>
            <div class="offer-note">{{DESCRIPTION}}</div>
        </div>
        <span class="offer-status {{STATUS_CLASS}}">{{STATUS}}</span>
    </div>
    <div class="offer-next"><strong>Next:</strong> {{NEXT ACTION}}</div>
</div>

Status classes: planted, presented, interested, active, agreed

Quote Item

<div class="quote-item">
    "{{QUOTE TEXT}}"
    <div class="quote-context">{{CONTEXT}} — {{DATE}}</div>
</div>

Win Item

<div class="win-item">
    <div class="win-title">{{WIN TITLE}}</div>
    <div class="win-detail">{{WHY IT MATTERS}}</div>
    <div class="win-date">{{DATE}}</div>
</div>

Action Item

<div class="action-item">
    <input type="checkbox" class="action-checkbox">
    <div class="action-content">
        <div class="action-task">{{TASK}}</div>
        <div class="action-meta"><span class="action-owner {{OWNER_CLASS}}">{{OWNER}}</span> <span>Source: {{DATE}}</span></div>
    </div>
</div>

Owner classes: advisor (gold), client (blue) Completed: Add checked to checkbox, add ✓ {{COMPLETION NOTE}} to meta.

Conversation Item + Modal

<!-- In conversation list -->
<div class="conversation-item" onclick="openModal('modal-{{ID}}')">
    <div class="conversation-header">
        <span class="conversation-date">{{DATE}}</span>
        <span class="conversation-type">{{TYPE}}</span>
    </div>
    <div class="conversation-summary">{{3-5 SENTENCE SUMMARY}}</div>
    <div class="conversation-outcomes"><strong>Outcomes:</strong> {{BULLET-STYLE OUTCOMES}}</div>
    <div class="conversation-expand">View Full Recap →</div>
</div>

<!-- Modal (place after footer) -->
<div class="modal-overlay" id="modal-{{ID}}" onclick="if(event.target===this)closeModal('modal-{{ID}}')">
    <div class="modal">
        <h3>{{DATE}} — {{TYPE}}</h3>
        <div class="recap-section">
            <div class="recap-section-title">Full Recap</div>
            <div class="recap-content">{{DETAILED NARRATIVE}}</div>
        </div>
        <div class="recap-outcomes">
            <div class="recap-outcomes-title">Key Outcomes</div>
            <div class="recap-content">{{OUTCOMES}}</div>
        </div>
        <button class="modal-close" onclick="closeModal('modal-{{ID}}')">Close</button>
    </div>
</div>

Full HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Master Plan - {{CLIENT NAME}}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --gold: #b79d64;
            --gold-dim: rgba(183, 157, 100, 0.3);
            --charcoal: #1a1a1a;
            --deep-charcoal: #2a2a2a;
            --panel: #232323;
            --cream: #f5f4f0;
            --stone: #8a8680;
            --slate: #4a5a6a;
            --success: #4a7c6f;
            --warning: #a08347;
            --danger: #8b4049;
            --muted: #3a3a3a;
            --owner-advisor: #b79d64;
            --owner-client: #5a8a9a;
            --owner-team: #8a6a9a;
            /* Backward compatibility */
            --owner-mine: var(--owner-advisor);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', -apple-system, sans-serif; background: var(--charcoal); color: var(--cream); line-height: 1.6; min-height: 100vh; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--charcoal); }
        ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
        scrollbar-color: var(--gold-dim) var(--charcoal);
        h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--cream); }

        header { background: linear-gradient(180deg, var(--deep-charcoal) 0%, var(--charcoal) 100%); border-bottom: 1px solid var(--gold-dim); padding: 1.5rem 3rem; display: flex; justify-content: space-between; align-items: center; }
        .brand { display: flex; align-items: center; gap: 1rem; }
        .brand-mark { width: 32px; height: 32px; background: var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--charcoal); }
        .brand-text { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--cream); letter-spacing: 0.02em; }
        .brand-text span { color: var(--gold); }
        .header-actions { display: flex; gap: 1rem; }
        .btn { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.75rem 1.25rem; border: none; cursor: pointer; transition: all 0.2s ease; }
        .btn-primary { background: var(--gold); color: var(--charcoal); }
        .btn-primary:hover { background: var(--cream); }
        .btn-secondary { background: transparent; color: var(--stone); border: 1px solid var(--muted); }
        .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
        .edit-btn { background: none; border: none; color: var(--stone); cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .edit-btn:hover { color: var(--gold); }

        main { max-width: 1400px; margin: 0 auto; padding: 2rem 3rem; }
        /* ... all remaining CSS identical to golden example ... */

        .action-owner { padding: 0.15rem 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
        .action-owner.advisor { background: var(--owner-advisor); color: var(--charcoal); }
        .action-owner.mine { background: var(--owner-advisor); color: var(--charcoal); } /* backward compat */
        .action-owner.client { background: var(--owner-client); color: var(--cream); }
        .action-legend { display: flex; gap: 1.5rem; margin-bottom: 1rem; padding: 0.75rem 1rem; background: var(--charcoal); border: 1px solid var(--muted); }
        .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--stone); }
        .legend-dot { width: 12px; height: 12px; border-radius: 2px; }
        .legend-dot.advisor { background: var(--owner-advisor); }
        .legend-dot.mine { background: var(--owner-advisor); } /* backward compat */
        .legend-dot.client { background: var(--owner-client); }
    </style>
</head>
<!-- Body structure identical to golden example -->
</html>

Note: The full template body is identical to the golden example (03-example-client-master-plan.html). Only the :root variables, owner classes, and scrollbar rules differ from the original. Copy the body from the golden example and apply these CSS changes.

Changes from v1.0

What changed	Old	New
Ownership variable	`--owner-mine`	`--owner-advisor` (with `--owner-mine` alias)
Owner CSS class	`.mine` only	`.advisor` canonical, `.mine` backward compat
Legend label	"Mine (Kathryn)"	"Advisor (Kathryn)"
Scrollbar hover	Not specified	`--gold-dim` default, `--gold` on hover
Reference file	Not specified	`aos-brand-kit.html`

Checklist Before Delivery

[ ] Client name, firm name, team size correct
[ ] GPS reflects latest session data
[ ] GPS history preserves all previous snapshots
[ ] All constraints accounted for with current statuses
[ ] Solved constraints in solved section with dates
[ ] Matrix insight summary current
[ ] Recommendations reflect current status progression
[ ] Seeds planted reflect current pipeline state
[ ] New conversation recap added with modal
[ ] Action items updated — completed checked, new added
[ ] Quotes attributed with date and context
[ ] Wins documented with why they matter
[ ] History has one-line entry for this session
[ ] Footer date updated
[ ] HTML renders as single self-contained file
[ ] Uses --owner-advisor (not --owner-mine) in new builds
[ ] Scrollbar: --gold-dim default, --gold on hover

Skill file for Advisory OS Client Master Plan output · Updated February 16, 2026