From b7471c5cf8a709f03115b37e994fafc3241053bc Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Fri, 13 Feb 2026 00:20:25 +0000 Subject: [PATCH] Updated prompts --- .claude/settings.local.json | 14 +++++++++++++- .gitignore | 5 +++++ Ralph/IMPLEMENTATION_PLAN.md | 2 ++ Ralph/RALPH_PROMPT.md | 3 +++ 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index f340049..e0683ab 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -11,7 +11,19 @@ "Bash(ls \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\New CV website\\\\designs\"\" 2>nul || echo \"Directory does not exist \")", "Bash(npm run typecheck:*)", "Bash(npm run dev:*)", - "Bash(npm run build:*)" + "Bash(npm run build:*)", + "Bash(dir:*)", + "mcp__playwright__browser_snapshot", + "mcp__playwright__browser_navigate", + "mcp__playwright__browser_take_screenshot", + "Bash(npm run lint:*)", + "Bash(curl:*)", + "mcp__playwright__browser_click", + "mcp__playwright__browser_wait_for", + "mcp__playwright__browser_evaluate", + "Bash(git add:*)", + "Bash(git commit -m \"$\\(cat <<''EOF''\nTask 4: Rebuild PatientBanner with premium fonts, tooltip, and animations\n\n- Replace font-inter with font-ui \\(Elvaro Grotesque\\) throughout banner\n- Add custom NHSNumberWithTooltip with Framer Motion animated reveal\n- Add AnimatePresence crossfade between full/condensed banner states\n- Animate mobile overflow menu enter/exit\n- Add SkipButton to App.tsx for boot/ECG phase skip\n- Add shadow-pmr-banner, focus ring styles, prefers-reduced-motion support\n- Fix mobile banner to use patient data instead of hardcoded values\n\nCo-Authored-By: Claude Opus 4.6 \nEOF\n\\)\")", + "Bash(git commit:*)" ] } } diff --git a/.gitignore b/.gitignore index a5bf830..055d4c6 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,8 @@ dist-ssr # TypeScript *.tsbuildinfo + +#Playwrite Screenshots +*.png + +nul \ No newline at end of file diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 18e0227..0dc7c2f 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -40,6 +40,8 @@ Also read `CLAUDE.md` for font setup instructions (Elvaro Grotesque and Blumir c - [x] **Task 4: Rebuild PatientBanner.** Read `Ralph/refs/ref-banner-sidebar.md` (Patient Banner section). Full banner (80px) with surname-first format, demographic details, action buttons. Condensed banner (48px) via IntersectionObserver at 100px scroll. Mobile minimal banner with overflow menu. Uses [UI font] throughout. NHS Number tooltip: "GPhC Registration Number". +- [ ] **Task 4b: Fix PatientBanner scroll condensation.** Read `Ralph/refs/ref-banner-sidebar.md` (Patient Banner section + Implementation Patterns). The full 3-row banner (80px — name/status, demographics, contact) never displays because the IntersectionObserver sentinel is broken. The sentinel (`absolute top-0` with `h-0`) is inside a React fragment next to the sticky header — it positions relative to the viewport, and the `-100px` rootMargin means it's immediately "not intersecting", so the banner always shows as condensed. Fix: ensure the sentinel is placed in the document flow ABOVE the scrollable content area (not absolute-positioned inside the banner fragment), so it's naturally visible on load and only scrolls out of view when the user scrolls 100px. Verify that on page load the full banner displays, and after scrolling 100px it smoothly condenses to the single-row 48px layout. + - [ ] **Task 5: Rebuild ClinicalSidebar.** Read `Ralph/refs/ref-banner-sidebar.md` (Left Sidebar + Navigation sections). CV-friendly labels: Summary, Experience, Skills, Achievements, Projects, Education, Contact. 220px fixed width. Header branding, search input, navigation items with exact states (default/hover/active), separator line, footer with session info. Tablet mode: 56px icon-only. Keyboard shortcuts: Alt+1-7, arrow keys, "/" for search. URL hash routing. - [ ] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed. diff --git a/Ralph/RALPH_PROMPT.md b/Ralph/RALPH_PROMPT.md index 1b310ad..13a75b6 100644 --- a/Ralph/RALPH_PROMPT.md +++ b/Ralph/RALPH_PROMPT.md @@ -39,6 +39,8 @@ The sidebar uses CV-intuitive labels, NOT clinical jargon. But each view's conte 5. **Implement the item**: Complete the single task you selected. Keep changes focused - one task per iteration. Write production-quality React/TypeScript code that faithfully reproduces a clinical information system. This is a design showcase requiring absolute thematic fidelity. + **IMPORTANT — Ref files are the source of truth, not existing code.** The current codebase contains errors and legacy patterns from earlier iterations. Do NOT treat the existing component structure, layout, or behaviour as authoritative. If the existing code does not match what the ref file specifies, **rebuild the component from the ref spec** rather than patching around the existing implementation. The ref files define the target; the existing code is just a starting point that may need to be replaced entirely. + 6. **Run quality checks**: Execute the quality check commands listed in `IMPLEMENTATION_PLAN.md` under "Quality Checks". Fix any issues before proceeding. 7. **Visual Review** (Tasks 1b-11 only — skip for non-visual tasks like Task 1, 12-15): After quality checks pass, verify your work visually in the browser using the Playwright MCP browser tools: @@ -114,6 +116,7 @@ The sidebar uses CV-intuitive labels, NOT clinical jargon. But each view's conte - **If a task is blocked or unclear**, document why in progress.txt and move to the next unchecked item - **Keep commits atomic and well-described** - **If quality checks fail, fix the issues before committing** +- **Ref files are the spec — existing code is not.** If the current implementation contradicts the ref file, rebuild from the ref spec. Do not preserve broken patterns just because they exist in the codebase. - **The visual quality bar is HIGH** — this must look like real clinical software - **Preserve clinical system authenticity** — instant navigation, proper tables, NHS blue, coded entries, traffic lights - **Sidebar labels are CV-friendly** — Experience (not Consultations), Skills (not Medications), etc.