What You'll Build
A single-page Session Context Manager that helps you survive long, complex AI coding sessions by keeping your prompts sharp, your context fresh, and your handoffs clean.
- ✓ Onboarding Prompt Generator — paste in your project details and get a ready-to-copy AI onboarding prompt that gives any AI tool full context from day one
- ✓ Context Health Tracker — a live meter that estimates how much useful context remains in your session and warns you when to apply the Shrinking Context technique
- ✓ Auto-Compact Summary Builder — a panel that helps you write the kind of structured summaries Claude Code's auto-compact feature uses, so you can trigger manual handoffs cleanly
- ✓ Layered Prompt Composer — a two-panel editor for writing Operator and User system prompts side by side, inspired by ChatGPT's layered prompt architecture
- ✓ Session Export — export your full session bundle (onboarding prompt + context summary + layered prompts) as a single copyable block ready to paste into any AI tool
What You'll Need
Here's the problem nobody warns you about: the longer your AI coding session goes, the worse the AI gets — not because the model got dumber, but because your context got stale. You forgot to onboard the AI properly at the start. The conversation got too long. Decisions from an hour ago are now buried under hundreds of messages. And when you finally start a fresh session, you're rebuilding context from scratch.
This week's tutorials gave you the four tools to fix all of that: onboarding prompts, shrinking context technique, Claude Code's auto-compact, and ChatGPT's layered system prompts. This project is where you put them all together into something you'll actually keep using.
Let's Build It
Build the App Shell and Layout
Start by getting the full page structure scaffolded. This step applies the onboarding prompt tutorial directly — before you ask Claude to build anything, you're going to give it a thorough onboarding prompt yourself, so it understands the whole project from the first message. This is the meta-lesson: you're using the technique to teach the technique.
I want you to fully understand this project before writing any code.
Project: Session Context Manager
Type: Single HTML file, runs in the browser, no backend
Purpose: A tool that helps developers manage long AI coding sessions by generating onboarding prompts, tracking context health, building auto-compact summaries, composing layered system prompts, and exporting a full session bundle.
Tech stack: Vanilla HTML, CSS (Tailwind via CDN), and JavaScript. No frameworks.
Design system:
- Background: #0a0f1a
- Surface cards: #111827 and #1a2332
- Primary green: #22c55e
- Accent violet: #a78bfa
- Accent cyan: #22d3ee
- Accent amber: #fbbf24
- Fonts: DM Sans (body), JetBrains Mono (code/labels) — load from Google Fonts
- All buttons use rounded-xl, no transition-all
Sections to scaffold (no logic yet, just layout):
1. Header with app title "Session Context Manager" and a subtitle
2. Four main panel cards in a 2x2 grid:
- Panel A: "Onboarding Prompt Generator" (violet accent)
- Panel B: "Context Health Tracker" (green accent)
- Panel C: "Auto-Compact Summary Builder" (amber accent)
- Panel D: "Layered Prompt Composer" (cyan accent)
3. A full-width "Session Export" section at the bottom
Each panel should have a heading, a short placeholder description, and empty content areas we'll fill in the next steps. Use the design system colors for card borders and accent text.
Before writing code, confirm you understand all five sections and the design constraints. Then generate the full HTML shell.
What to look for: Claude should confirm it understands the five sections before generating code. The output should be a single self-contained HTML file with Tailwind loaded via CDN, four clearly labeled panel cards in a 2x2 grid, the right background colors applied, and the Session Export section at the bottom. If Claude skips the confirmation step and just writes code, send it the prompt again and explicitly say: "Please confirm your understanding first, then write the code."
Build the Onboarding Prompt Generator and Context Health Tracker
Now you'll add real functionality to Panels A and B. Panel A is a form-driven prompt generator — the user fills in fields about their project and the tool assembles a structured onboarding prompt. Panel B is a context health tracker: a visual meter that the user updates manually as their session grows, with a warning that triggers the Shrinking Context technique at the right moment.
Notice that this is also where you'll apply the shrinking context technique yourself. Your conversation with Claude already has one big message in it. Before sending this prompt, include a quick context recap at the top — this teaches the habit while keeping Claude focused on exactly what's needed next.
Quick context recap: We're building a Session Context Manager — a single HTML file with four panels and a session export section. You just generated the shell. Now I need you to add functionality to the first two panels only. Do not touch the other panels yet.
--- PANEL A: Onboarding Prompt Generator ---
Add a form with these labeled text inputs:
- Project Name
- Project Type (dropdown: Web App, CLI Tool, API, Library, Other)
- Tech Stack (text)
- Current Goal (textarea, 2 rows)
- Known Constraints or Rules (textarea, 2 rows)
- Your Role / Expertise Level (dropdown: Beginner, Intermediate, Advanced)
Add a "Generate Onboarding Prompt" button (green, rounded-xl).
When clicked, JavaScript should assemble a formatted onboarding prompt string using the field values and display it in a read-only textarea below the button. The prompt should follow this template:
"You are helping me with a project. Here is everything you need to know before we start:
Project: [Project Name]
Type: [Project Type]
Stack: [Tech Stack]
Current Goal: [Current Goal]
Constraints: [Known Constraints]
My Experience Level: [Role/Expertise]
Please confirm you understand this context before responding to anything else."
Add a "Copy Prompt" button below the output textarea.
--- PANEL B: Context Health Tracker ---
Add:
- A horizontal progress bar styled in green that the user can update via a range slider (0–100)
- A label showing "Context Health: X%" that updates live as the slider moves
- Three status zones:
* 70–100%: green — "Session is fresh. Keep going."
* 30–69%: amber — "Context drifting. Consider a shrinking context summary."
* 0–29%: rose — "Context critical. Start a new session with your onboarding prompt."
- A "What should I do?" text block that updates dynamically based on the zone, giving a one-sentence action tip
The slider should start at 100. Use #22c55e, #fbbf24, and #fb7185 for the three zones.
Update only these two panels in the existing HTML file. Return the complete updated file.
What to look for: Panel A should render a working form where filling in the fields and clicking the button produces a formatted, copy-able prompt. Panel B should show a slider that moves and changes both the percentage label and the status text dynamically. The color of the bar should shift between green, amber, and rose as the slider crosses the thresholds. If the status text doesn't update live, ask Claude to wire the slider's oninput event properly.
Build the Auto-Compact Summary Builder
Panel C is the Auto-Compact Summary Builder — inspired directly by how Claude Code's auto-compact feature works under the hood. When Claude Code runs out of context space, it summarizes what's happened so the session can continue. This panel lets you build that kind of structured summary manually, so you can hand off between sessions or tools without losing your place.
This step gives you something genuinely useful: a repeatable format for session handoffs that works whether you're using Claude Code, Claude.ai, or ChatGPT. Think of it as the "save game" feature for your AI sessions.
Context recap: Session Context Manager, single HTML file. Panels A (Onboarding Prompt Generator) and B (Context Health Tracker) are done. Now build Panel C only.
--- PANEL C: Auto-Compact Summary Builder ---
This panel helps users write a structured session summary they can use to hand off to a new AI session — similar to what Claude Code's auto-compact feature generates automatically. Build the following:
Section heading: "Auto-Compact Summary Builder" with amber accent color (#fbbf24).
Form fields:
1. "What were you building?" — textarea, 2 rows, placeholder: "e.g. A Stripe payment form with error handling"
2. "What did you complete?" — textarea, 3 rows, placeholder: "List the things that are done and working"
3. "What's still in progress?" — textarea, 2 rows, placeholder: "What were you working on when the session got long?"
4. "What decisions were made?" — textarea, 2 rows, placeholder: "Key choices: libraries chosen, patterns used, things ruled out"
5. "What should the next session start with?" — textarea, 2 rows, placeholder: "The exact first task for the fresh session"
Add a "Build Summary" button (amber/yellow styled, rounded-xl).
When clicked, assemble the fields into this formatted output:
"--- SESSION HANDOFF SUMMARY ---
Building: [field 1]
Completed:
[field 2]
In Progress:
[field 3]
Decisions Made:
[field 4]
Next Session Should Start With:
[field 5]
--- END SUMMARY ---"
Display the result in a read-only textarea below the button with a "Copy Summary" button.
Add a small helper tip below the panel in muted text: "Paste this summary at the start of your next session along with your onboarding prompt."
Return the full updated HTML file with Panel C added.
What to look for: The five form fields should appear cleanly inside Panel C. Clicking "Build Summary" should assemble a clearly formatted block of text with all the section headers intact, displayed in a scrollable read-only textarea. The "Copy Summary" button should work correctly. The helper tip should appear below the panel in a muted color. Test it by filling in all five fields and copying the result — it should be something you'd actually paste into Claude to kick off a fresh session.
Build the Layered Prompt Composer
Panel D brings in the ChatGPT Operator/User system prompt concept. In ChatGPT's architecture, an Operator prompt sets the rules and persona for the whole experience, while a User prompt handles session-specific context. This panel lets you write both side by side, see how they layer together, and copy the combined result ready to use in ChatGPT's system prompt fields or any other tool that supports layered prompting.
After Claude builds this panel, you'll actually test the output in ChatGPT — opening the API Playground or a Custom GPT to paste in your Operator and User prompts and see the layered effect in action.
Context recap: Session Context Manager, single HTML file. Panels A, B, and C are complete. Now add Panel D and the Session Export section.
--- PANEL D: Layered Prompt Composer ---
Cyan accent (#22d3ee). This panel teaches the ChatGPT Operator/User layered prompt architecture.
Layout: Two columns side by side (stack on mobile).
Left column — Operator Prompt:
- Label: "Operator Prompt" with a tooltip icon and tooltip text: "Sets the AI's persona, rules, and capabilities. Written by the developer or tool builder."
- Textarea (6 rows), placeholder: "e.g. You are a senior TypeScript developer assistant. You always follow strict typing. You never suggest 'any' as a type. You ask clarifying questions before writing code."
Right column — User Prompt:
- Label: "User Prompt" with tooltip: "Adds session-specific context. Written by the end user or pasted from the Onboarding Generator above."
- Textarea (6 rows), placeholder: "e.g. I am building a React component library. My current task is creating a typed Button component with variant props."
Below both columns:
- A "Preview Layered Prompt" button (cyan styled, rounded-xl)
- A read-only output textarea that shows:
"[OPERATOR]
[operator textarea content]
[USER]
[user textarea content]"
- A "Copy Layered Prompt" button
- A small note in muted text: "Paste the Operator prompt into ChatGPT's system prompt field, and the User prompt into the first message or user system prompt field."
--- SESSION EXPORT SECTION (full width, below the 2x2 grid) ---
Heading: "Export Your Full Session Bundle"
Subtext: "Combines your onboarding prompt, context summary, and layered prompts into one block ready to paste into any AI tool."
Add an "Export Session Bundle" button (green, large, rounded-xl).
When clicked, JavaScript should:
1. Pull the generated text from Panel A's output textarea
2. Pull the generated text from Panel C's output textarea
3. Pull the generated text from Panel D's output textarea
4. Combine them into one block with clear section dividers and display in a large read-only textarea
5. Add a "Copy Full Bundle" button
If any section hasn't been generated yet, show a placeholder note like "[Onboarding Prompt not yet generated — use Panel A]"
Return the complete updated HTML file.
What to look for: Panel D should show two side-by-side textareas with clear Operator/User labels. The "Preview Layered Prompt" button should assemble both into the formatted output block. The Session Export section should appear below the grid as a full-width banner. Test the export by generating outputs in all three panels first, then clicking "Export Session Bundle" — you should see all three blocks combined with clear dividers. Then open ChatGPT's Playground or a Custom GPT and paste the Operator prompt into the system field and the User prompt into the message field to see the layering in action.
Polish, Validate, and Do a Full Session Run-Through
The tool is built — now you validate it by running a real session through it end to end. You'll also ask Claude to clean up the UI, add any missing details, and make sure the copy buttons all work reliably. This final step is also a good test of the shrinking context technique: notice how much context Claude is carrying from your earlier messages, and whether its code quality has drifted.
After the polish pass, you'll do a live run-through: pick a real project you're working on, fill in every panel, export the bundle, and paste it into Claude or ChatGPT to start a fresh session. This proves the tool works and cements every concept from the week into muscle memory.
Final polish pass for the Session Context Manager. All four panels and the export section are complete. I need you to:
1. AUDIT all copy buttons — each should use the Clipboard API (navigator.clipboard.writeText) and give a brief visual confirmation (change button text to "Copied!" for 1.5 seconds then revert). Make sure none of them are referencing undefined variables.
2. RESPONSIVENESS — check that the 2x2 panel grid stacks to 1 column on small screens. The two-column layout inside Panel D should also stack on mobile.
3. EMPTY STATE HANDLING — if the user clicks "Export Session Bundle" before generating output in any panel, show a styled warning message inside the export textarea explaining which panels still need to be completed. Use amber (#fbbf24) for the warning text.
4. HEADER POLISH — update the main header to include:
- App name: "Session Context Manager"
- Subtitle: "Keep your AI sessions sharp from start to handoff"
- A small row of four colored dots (violet, green, amber, cyan) representing the four panels
5. FOOTER — add a minimal footer with the text: "Built with Claude · danbyers.ai"
6. FINAL CHECK — scan the JavaScript for any functions that reference DOM elements by ID and confirm all IDs exist in the HTML. Fix any mismatches.
Return the final, complete, production-ready HTML file.
What to look for: Every copy button should flash "Copied!" briefly when clicked. The layout should stack cleanly if you resize the browser window to mobile width. The export section should show a clear amber warning if you click it with empty panels. The header should look polished and the footer should appear at the bottom. Once Claude returns the final file, save it, open it in your browser, and run a real project through all four panels in sequence. The exported bundle should be something you'd genuinely paste into a new AI session.
Common Issues
onclick is referencing an element ID that doesn't exist or a variable that's out of scope. Ask Claude: "Audit every copy button in the file. Print a list of all button IDs, the element ID they're trying to read from, and whether that element ID exists in the HTML. Then fix any mismatches."text-[#fbbf24], Tailwind's JIT might not detect them. Switch to inline styles for any dynamic color values, or add a safelist configuration. Ask Claude to convert dynamic color classes to inline style attributes.