From ae3bc3f24610a3b5bf5134319bc92f16850ad774 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 22 Apr 2026 10:50:35 +0200
Subject: [PATCH] docs(claude): update back link pattern to use BackButton
 component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 3dd52a15..d0b67fe4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -311,13 +311,15 @@ Save bar pattern — use **sticky full-bleed** for long forms (edit document), *
 <div class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm">
 ```
 
-Back link pattern:
+Back button pattern — use the shared `<BackButton>` component from `$lib/components/BackButton.svelte`:
 ```svelte
-<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group mb-4">
-    <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" .../>
-    Zurück zur Übersicht
-</a>
+<script lang="ts">
+    import BackButton from '$lib/components/BackButton.svelte';
+</script>
+
+<BackButton />
 ```
+The component calls `history.back()` so the user returns to wherever they came from. Label is always "Zurück" (no contextual suffix — destination is unknown). Touch target ≥ 44px and focus ring are built in. Do not use a static `<a href>` for back navigation.
 
 Subtle action link (e.g. "new document/person"):
 ```svelte