Briefing-Dokument für Claude Code
1. Projektübersicht
1.1 Was ist REBuilding?
REBuilding ist ein ganzheitliches Entwicklungsframework für Mitarbeiter einer Steuerberatungskanzlei. Es adressiert die Transformation der Branche durch KI, Fachkräftemangel, Prüfungsreformen und verteiltes Arbeiten. Das Framework operiert in drei Dimensionen:
Dimension
Inhalt
Mind
Persönlichkeits- und Urteilsentwicklung (John Wooden, Pyramid of Success)
Craft
Fachliche Exzellenz und kontinuierliche Verbesserung (Kaizen, Deming)
Crew
Teamkultur und systemisches Denken (All Blacks, HRO, Swiss Cheese Model)
1.2 Was ist REBuilding:Hub?
REBuilding:Hub ist das zentrale Portal – der Einstiegspunkt für alle Mitarbeiter in das REBuilding-Ökosystem. Es vereint alle Einzelapplikationen unter einer einheitlichen Oberfläche und bietet Navigation, Fortschrittsverfolgung und rollenbasierte Zugänge.
1.3 Abgrenzung
Die steuerliche Kernarbeit (Buchhaltung, Steuererklärungen, Jahresabschlüsse) findet in DATEV statt – einem geschlossenen System, das nicht Teil dieses Ökosystems ist. REBuilding:Hub bildet alles ab, was außerhalb von DATEV stattfindet: Ausbildung, Persönlichkeitsentwicklung, Teamkultur, Wissensmanagement und interne Prozesse.
2. Grundsatzentscheidungen
Entscheidung
Festlegung
Technik
React (komponentenbasiert, skalierbar)
Hosting
Netlify + Google Apps Script als Backend
Design
Dark Theme – Schwarz/Gold
Namenskonvention
REBuilding:Name (z.B. REBuilding:Tactics)
Sprache UI
Deutsch
Authentifizierung
Google OAuth (Workspace-Accounts)
Rollen
Admin, Mitarbeiter, Extern
Mobile
Responsive + PWA-fähig (Mobile First)
Backend/Daten
Google Apps Script → Google Sheets (bestehende Infrastruktur)
3. Design-System
3.1 Farbpalette
Das Design basiert auf einem dunklen Grundton mit Gold als Akzentfarbe. Die Farbwelt hebt sich bewusst von DATEV (hell/blau) ab und signalisiert: Hier geht es um etwas anderes als Tagesgeschäft.
Variable
Wert
--color-bg-primary
#0A0A0A (Haupthintergrund)
--color-bg-secondary
#141414 (Cards, Container)
--color-bg-tertiary
#1E1E1E (Hover-States, aktive Elemente)
--color-accent-gold
#D4AF37 (Primärer Akzent)
--color-accent-gold-light
#E8C84A (Hover Gold)
--color-accent-gold-dark
#B8960C (Pressed Gold)
--color-text-primary
#F5F5F5 (Haupttext)
--color-text-secondary
#A0A0A0 (Sekundärtext, Labels)
--color-text-muted
#666666 (Platzhalter, deaktiviert)
--color-border
#2A2A2A (Standardrahmen)
--color-border-active
#D4AF37 (Aktiver Rahmen)
--color-success
#4CAF50 (Erfolg, abgeschlossen)
--color-warning
#FF9800 (Warnung, in Bearbeitung)
--color-error
#F44336 (Fehler)
--color-mind
#7B68EE (Dimension Mind – Lila)
--color-craft
#20B2AA (Dimension Craft – Türkis)
--color-crew
#FF6347 (Dimension Crew – Koralle)
Hinweis zu den Dimensionsfarben: Jede der drei Dimensionen (Mind, Craft, Crew) erhält eine eigene Kennfarbe, die in Kacheln, Fortschrittsbalken und Navigations-Highlights verwendet wird. Gold bleibt die übergreifende Akzentfarbe des Gesamtsystems.
3.2 Typografie
Element
Spezifikation
Schriftfamilie
Inter (Google Font) – sauber, modern, exzellente Lesbarkeit auf Screens
Fallback
system-ui, -apple-system, sans-serif
H1 (Seitentitel)
28px / 700 (bold) / letter-spacing: -0.02em
H2 (Sektionen)
22px / 600 (semibold)
H3 (Subsektionen)
18px / 600 (semibold)
Body
15px / 400 (regular) / line-height: 1.6
Small / Labels
13px / 500 (medium) / text-transform: uppercase / letter-spacing: 0.05em
Monospace (Code)
JetBrains Mono, monospace / 14px
3.3 Spacing & Layout
Token
Wert
--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--radius-sm
6px (Buttons, Inputs)
--radius-md
10px (Cards)
--radius-lg
16px (Modals, große Container)
Max Content Width
1200px (zentriert)
Sidebar-Breite
260px (Desktop), collapsed auf Icon-Breite
3.4 Komponenten-Bibliothek
Alle UI-Elemente werden als wiederverwendbare React-Komponenten gebaut. Jede Einzelapplikation (REBuilding:Tactics etc.) importiert diese Komponenten, sodass Design-Änderungen zentral wirken.
Buttons
Variante
Styling
Primary
Background: Gold / Text: Schwarz / Hover: Gold-Light
Secondary
Background: transparent / Border: Gold / Text: Gold
Ghost
Background: transparent / Text: Text-Secondary / Hover: bg-tertiary
Danger
Background: Error / Text: Weiß
Größen: sm (32px Höhe), md (40px), lg (48px). Alle Buttons mit border-radius: var(--radius-sm).
Cards
Background: var(--color-bg-secondary). Border: 1px solid var(--color-border). Border-radius: var(--radius-md). Padding: var(--space-lg). Hover-State: border-color wechselt zur Dimensionsfarbe. Schatten: 0 2px 8px rgba(0,0,0,0.3).
Navigation (Sidebar)
Desktop: Sidebar links, 260px breit, collapsible auf Icon-Breite
Mobile: Bottom-Navigation mit 4-5 Icons (Home, Mind, Craft, Crew, Profil)
Aktiver Menüpunkt: Gold-Akzent links (Desktop) bzw. unten (Mobile)
Icons: Lucide React Icons (konsistenter Stil)
Fortschrittsanzeige
Kreisförmig (Donut) für Gesamtfortschritt pro Dimension
Linear (Balken) für Einzelmodule
Farben: Dimensionsfarbe als Füllfarbe, bg-tertiary als Hintergrund
Badges
Pro abgeschlossenem Modul ein Badge. Design: Rund, 48x48px, Gold-Outline, Icon in der Mitte. Gesperrt: Grau/transparent. Freigeschaltet: Gold mit Confetti-Animation.
Modale / Dialoge
Eigene Implementierung (keine browser-nativen alert/confirm – diese werden in iframes blockiert). Backdrop: rgba(0,0,0,0.7). Card-Style mit Titel, Text und Buttons.
4. Architektur
4.1 Projektstruktur
rebuilding-hub/
├── public/
│ ├── index.html
│ └── manifest.json (PWA)
├── src/
│ ├── components/
│ │ ├── ui/ (Design-System: Button, Card, Badge, Modal, Progress ...)
│ │ ├── layout/ (Sidebar, TopBar, BottomNav, PageShell)
│ │ └── shared/ (UserAvatar, DimensionBadge, AppTile ...)
│ ├── pages/
│ │ ├── Hub.jsx (Dashboard / Startseite)
│ │ ├── Mind.jsx (Übersicht Mind-Dimension)
│ │ ├── Craft.jsx (Übersicht Craft-Dimension)
│ │ ├── Crew.jsx (Übersicht Crew-Dimension)
│ │ └── Profile.jsx (Benutzerprofil, Fortschritt, Einstellungen)
│ ├── apps/ (Einzelne REBuilding-Apps als Module)
│ │ ├── tactics/
│ │ ├── strategy/
│ │ ├── rhetoric/
│ │ └── endure/
│ ├── hooks/ (useAuth, useProgress, useGoogleAPI ...)
│ ├── services/
│ │ ├── auth.js (Google OAuth)
│ │ ├── api.js (Google Apps Script Kommunikation)
│ │ └── storage.js (Fortschritt, Einstellungen)
│ ├── styles/
│ │ ├── tokens.css (CSS Custom Properties – das Design-System)
│ │ ├── globals.css (Reset, Base-Styles)
│ │ └── components.css (Komponentenspezifische Styles)
│ ├── utils/
│ │ └── constants.js (App-Definitionen, Routen, Dimensionen)
│ └── App.jsx (Router, Auth-Provider, Layout)
├── netlify.toml
├── package.json
└── README.md
4.2 Modularitätsprinzip
Jede Einzelapplikation (z.B. REBuilding:Tactics) muss in zwei Modi funktionieren:
Eingebettet im Hub: Als Route innerhalb des Hub-Routers, nutzt Sidebar/Navigation des Hubs
Standalone: Als eigenständige App unter eigener URL (z.B. tactics.rebuilding.de), mit eigener minimaler Navigation
Technisch bedeutet das: Jede App exportiert eine Root-Komponente, die beide Kontexte unterstützt. Im Hub wird sie als Kind-Route gemounted, standalone als eigene App mit eigenem Entry-Point. Die Design-System-Komponenten (ui/) werden als NPM-Paket oder Shared-Modul bereitgestellt.
4.3 Authentifizierung & Rollen
Rolle
Zugriff
Verwaltung
Admin
Alles – inkl. Nutzerverwaltung, Kurszuweisung, Statistiken aller Mitarbeiter
Kann Module freischalten/sperren, Nutzer einladen
Mitarbeiter
Freigeschaltete Module, eigener Fortschritt, Team-Interaktionen
Kann eigenes Profil verwalten
Extern
Nur einzelne, explizit freigegebene Apps (z.B. REBuilding:Rhetoric)
Kein Zugang zum Hub, nur zur Standalone-App
Authentifizierung über Google OAuth 2.0 – Mitarbeiter melden sich mit ihrem Google-Workspace-Account an. Externe Nutzer erhalten einen separaten Zugang (z.B. über Einladungslink mit Token).
4.4 Datenarchitektur
Backend: Google Apps Script als REST-API. Datenspeicherung: Google Sheets (bewährt bei REB:Endure). Struktur:
Sheet
Inhalt
users
Nutzer-ID, Name, E-Mail, Rolle, Erstelldatum
progress
Nutzer-ID, App-Name, Modul-ID, Status (offen/aktiv/abgeschlossen), Punktzahl, Zeitstempel
badges
Nutzer-ID, Badge-ID, App-Name, Freischaltdatum
sessions
Nutzer-ID, App-Name, Startzeitpunkt, Dauer, Ergebnisse
team_interactions
Nutzer-ID, Typ (Pre-Mortem, Challenge, Reflexion), Inhalt, Zeitstempel
5. Bestandsaufnahme: Bestehende Apps
Alle folgenden Apps existieren bereits in unterschiedlichen technischen Zuständen. Sie werden im Rahmen dieses Projekts mit einheitlichem Design-System in React neu aufgesetzt. Die Inhalte bleiben erhalten.
5.1 REBuilding:Tactics
Eigenschaft
Detail
Dimension
Mind
Inhalt
13 Kapitel taktische Gesprächsführung (basierend auf klassischen Strategieprinzipien)
Drei Säulen
1) Denken vor Handeln – 2) Ressourcen schonen – 3) Flexibel bleiben
Merksätze
13 Kernmerksätze (z.B. Erst rechnen, dann rennen / Handle nie aus Wut)
Pro Kapitel
8 Sections: Hook → Theory → Quiz → Scenario → Quiz → Quiz → Summary → Complete
Gamification
15 Punkte pro Quiz, Badges pro Kapitel, Confetti-Effekt
Navigation
Bottom-Navigation: Home, Badges, Stats
Aktueller Stand
Fertig als HTML-App (87 KB), funktionsfähig
Neuaufbau
React-Komponenten mit Design-System, Anbindung an Hub-Fortschrittssystem
5.2 REBuilding:Strategy
Eigenschaft
Detail
Dimension
Mind
Inhalt
6 Module Spieltheorie für den Beratungsalltag
Module
1) Das Spiel erkennen – 2) Das Dilemma verstehen – 3) Wiederholung ändert alles – 4) Mandanten & Behörden – 5) Team & Führung – 6) Die 12 Prinzipien
Konzepte
Gefangenendilemma, Nash-Gleichgewicht, TIT FOR TAT, Schatten der Zukunft
Format
Wie Tactics: Szenarien, Quizfragen, Gamification
Aktueller Stand
Basis erstellt, Kapiteldaten-Einbindung unvollständig
Neuaufbau
Komplett neu in React, gleiche Struktur wie Tactics
5.3 REBuilding:Rhetoric
Eigenschaft
Detail
Dimension
Mind
Inhalt
Rhetorische Selbstverteidigung – Waffengleichheit gegen destruktive Gesprächsführung
Vier Kernfähigkeiten
1) Status-Management (Haltung vor dem Wort) – 2) Bridging (Gespräch zur Sache führen) – 3) Professionelle schriftliche Kommunikation unter Druck – 4) Reframing (Rahmen verschieben statt sich drängen lassen)
Aktueller Stand
Als HTML-App erstellt
Neuaufbau
React mit Design-System
5.4 REBuilding:Endure
Eigenschaft
Detail
Dimension
Mind
Inhalt
Kognitives Training – Konzentration, Arbeitsgedächtnis, Reaktionsfähigkeit
Technik (aktuell)
React-App, gehostet auf Netlify, Backend via Google Apps Script → Google Sheets
Features
Login-System, Fortschrittsverfolgung, PWA-fähig, eigene Domain (reb-endure.com)
Aktueller Stand
Funktionsfähig, bereits deployed
Neuaufbau
Design-System-Angleichung, Integration in Hub-Fortschrittssystem
6. Geplante Erweiterungen (noch nicht erstellt)
6.1 Craft-Bereich (Steuerfachliche Ausbildung)
Der größte noch fehlende Bereich. Inhaltlich noch nicht spezifiziert, aber strukturell vorgesehen. Mögliche Module:
Umsatzsteuer (Grundlagen, Praxisfälle)
Jahresabschluss (Aufbau, Prüfung, typische Fehler)
Einkommensteuer
Mandantenkommunikation (fachlich korrekt und verständlich)
KI-gestützte Qualitätsprüfung (Wie prüfe ich, was die Maschine liefert?)
Umsetzung: Entweder als eigene REBuilding:Apps im Tactics-Format oder über Google Classroom-Integration. Entscheidung steht noch aus.
6.2 Crew-Bereich (Teaminteraktion)
Pre-Mortem-Tool: Strukturierte Vorab-Analyse möglicher Fehler als Team
Reflexions-Raum: Digitaler Raum für Team-Retrospektiven
Team-Challenges: Wettbewerbe und gemeinsame Lernziele
Diese Funktionen erfordern die Echtzeit-Interaktionsfähigkeit, die als Grundsatzentscheidung festgelegt wurde.
6.3 Google Classroom-Integration
Google Classroom ist als Lernplattform vorgesehen, insbesondere für den Craft-Bereich. Integration in den Hub bedeutet: Classroom-Kurse werden im Hub angezeigt (Titel, Fortschritt, nächste Aufgabe), der Klick führt zu Google Classroom. API-Zugriff über Google Classroom API ist möglich.
6.4 Weitere Tools im Ökosystem
Tool
Funktion
Meeting-Transkripte
Google Meet → automatische Transkription → NotebookLM (Workflow existiert)
AppSheet-Workflows
Mandanten-Onboarding, Checklisten, Projektsteuerung (existiert als Pilot)
Rebecca (KI-Telefonassistentin)
Anrufannahme, Weiterleitung, Terminvereinbarung (existiert)
KI-Mandantenschreiben
Template-basierte Briefgenerierung via KI (existiert)
Diese Tools werden im Hub als Kacheln/Links angezeigt, sind aber keine React-Apps – sie verlinken auf ihre jeweiligen Plattformen (AppSheet, Google Meet, etc.).
7. Umsetzungsreihenfolge
Phase 1: Fundament
Design-System als React-Komponentenbibliothek (ui/, layout/)
REBuilding:Hub Grundstruktur (Routing, Auth, Dashboard)
PWA-Konfiguration (manifest.json, Service Worker)
Phase 2: App-Migration
REBuilding:Tactics → React-Neuaufbau mit Design-System
REBuilding:Rhetoric → React-Neuaufbau
REBuilding:Strategy → Fertigstellung + React-Neuaufbau
REBuilding:Endure → Design-Angleichung, Hub-Integration
Phase 3: Erweiterung
Craft-Module (inhaltliche Konzeption → dann Umsetzung)
Crew-Interaktionstools (Pre-Mortem, Reflexion, Challenges)
Google Classroom API-Integration
Externe Nutzer: Standalone-Modus für einzelne Apps
8. Konventionen für Claude Code
8.1 Namenskonventionen
Element
Konvention
App-Name (Anzeige)
REBuilding:Name (mit Großbuchstabe, z.B. REBuilding:Tactics)
App-Name (technisch)
rebuilding-name (Kleinbuchstaben, Bindestrich, z.B. rebuilding-tactics)
Komponenten
PascalCase (z.B. AppTile.jsx, ProgressDonut.jsx)
CSS-Variablen
Kebab-case mit Präfix (z.B. --color-accent-gold)
Hooks
camelCase mit use-Präfix (z.B. useProgress, useAuth)
Routen
Kleinbuchstaben (z.B. /mind/tactics, /craft, /crew)
Dateien
Kebab-case für Utils/Services, PascalCase für Komponenten
8.2 Code-Standards
React Functional Components mit Hooks (keine Klassen)
CSS Custom Properties (tokens.css) – keine hartcodierten Farbwerte in Komponenten
Keine localStorage direkt – immer über storage.js-Abstraktionsschicht (wegen iframe-Kompatibilität und Memory-Fallback)
Keine nativen alert()/confirm() – immer eigene Modal-Komponente
Responsive: Mobile-First-Ansatz, Breakpoints bei 768px (Tablet) und 1024px (Desktop)
Kommentare auf Deutsch
8.3 Git-Konventionen
Branch: main (Production), develop (Entwicklung)
Commits auf Deutsch: feat: Neue Fortschrittsanzeige / fix: Badge-Anzeige korrigiert
Feature-Branches: feature/craft-modul-ust, fix/tactics-quiz-reset