refactor(document): move document domain core to document/ package
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
347
docs/presentation/personas/00-anatomy.html
Normal file
347
docs/presentation/personas/00-anatomy.html
Normal file
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aufbau einer Persona</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg:#0D1117;--surface:#161B22;--surface-2:#1C2128;--border:#21262D;
|
||||
--text:#C9D1D9;--text-muted:#6E7681;--text-bright:#F0F6FC;
|
||||
|
||||
/* per-persona accent colors */
|
||||
--amber:#F59E0B;
|
||||
--blue:#60A5FA;
|
||||
--green:#34D399;
|
||||
--purple:#A78BFA;
|
||||
--orange:#FB923C;
|
||||
--red:#F87171;
|
||||
--cyan:#22D3EE;
|
||||
}
|
||||
|
||||
body{
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
font-family:'Inter',system-ui,sans-serif;
|
||||
height:100vh;
|
||||
display:flex;
|
||||
align-items:stretch;
|
||||
padding:14px;
|
||||
}
|
||||
|
||||
/* ── Outer shell ── */
|
||||
.card{
|
||||
width:100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.card::before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background-image:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);
|
||||
background-size:26px 26px;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* ── Top bar ── */
|
||||
.topbar{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:15px 32px;
|
||||
border-bottom:1px solid var(--border);
|
||||
border-left:4px solid #4B5563;
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:13px;
|
||||
color:var(--text-muted);
|
||||
}
|
||||
.topbar .file{color:var(--text);font-weight:500}
|
||||
.topbar .right{display:flex;gap:20px;align-items:center}
|
||||
.topbar .project{color:#6B7280;font-weight:700;letter-spacing:1px;font-size:12px}
|
||||
|
||||
/* ── Layout: two columns ── */
|
||||
.body{
|
||||
flex:1;
|
||||
display:grid;
|
||||
grid-template-columns:270px 1fr;
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* ── Left: file outline ── */
|
||||
.outline{
|
||||
border-right:1px solid var(--border);
|
||||
padding:22px 18px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:5px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.outline-title{
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:11px;
|
||||
font-weight:700;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:1.5px;
|
||||
color:var(--text-muted);
|
||||
margin-bottom:12px;
|
||||
padding-left:4px;
|
||||
}
|
||||
.outline-item{
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:13px;
|
||||
padding:6px 10px;
|
||||
border-radius:4px;
|
||||
color:var(--text-muted);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:9px;
|
||||
cursor:default;
|
||||
transition:background .15s;
|
||||
}
|
||||
.outline-item .num{
|
||||
font-size:11px;
|
||||
color:#4B5563;
|
||||
flex-shrink:0;
|
||||
width:16px;
|
||||
text-align:right;
|
||||
}
|
||||
.outline-item.header-item{ color:var(--text); font-weight:500; }
|
||||
.outline-item.active{
|
||||
background:var(--surface-2);
|
||||
color:var(--text-bright);
|
||||
font-weight:500;
|
||||
}
|
||||
/* accent dot per section */
|
||||
.outline-item .dot{
|
||||
width:7px; height:7px; border-radius:50%;
|
||||
flex-shrink:0;
|
||||
}
|
||||
|
||||
/* ── Right: content ── */
|
||||
.content{
|
||||
padding:14px 26px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* ── Section row ── */
|
||||
.section{
|
||||
flex:1;
|
||||
background:var(--surface-2);
|
||||
border:1px solid var(--border);
|
||||
border-radius:8px;
|
||||
padding:12px 18px;
|
||||
display:grid;
|
||||
grid-template-columns:auto 1fr;
|
||||
gap:0 20px;
|
||||
align-items:center;
|
||||
border-left:3px solid transparent;
|
||||
transition:border-color .15s;
|
||||
}
|
||||
.section:hover{ border-left-color:var(--section-accent, #4B5563); }
|
||||
|
||||
.section-label-col{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:5px;
|
||||
align-items:flex-start;
|
||||
padding-top:2px;
|
||||
}
|
||||
.section-heading{
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:13px;
|
||||
font-weight:700;
|
||||
color:var(--text-muted);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.from-badge{
|
||||
font-family:'JetBrains Mono',monospace;
|
||||
font-size:11px;
|
||||
font-weight:700;
|
||||
padding:3px 9px;
|
||||
border-radius:3px;
|
||||
white-space:nowrap;
|
||||
letter-spacing:.3px;
|
||||
}
|
||||
|
||||
.section-text{
|
||||
font-size:14px;
|
||||
line-height:1.65;
|
||||
color:var(--text-muted);
|
||||
}
|
||||
.section-text strong{
|
||||
color:var(--text-bright);
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
/* ── identity section (wider badge, top of file) ── */
|
||||
.section.identity{
|
||||
background:transparent;
|
||||
border-color:transparent;
|
||||
border-left:3px solid #4B5563;
|
||||
padding-left:14px;
|
||||
}
|
||||
|
||||
/* Accent per persona */
|
||||
.acc-red { --section-accent:var(--red); background:color-mix(in srgb,var(--red) 10%,transparent); color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,transparent); }
|
||||
.acc-cyan { --section-accent:var(--cyan); background:color-mix(in srgb,var(--cyan) 10%,transparent); color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 35%,transparent); }
|
||||
.acc-purple{ --section-accent:var(--purple); background:color-mix(in srgb,var(--purple)10%,transparent); color:var(--purple); border-color:color-mix(in srgb,var(--purple)35%,transparent); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
|
||||
<!-- top bar -->
|
||||
<div class="topbar">
|
||||
<div>
|
||||
<span class="dir" style="color:var(--text-muted)">.claude/personas/</span>
|
||||
<span class="file">*.md</span>
|
||||
<span style="margin-left:12px;color:#4B5563">— alle Personas, gleicher Aufbau</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>7 Dateien · gleiche Struktur</span>
|
||||
<span class="project">FAMILIENARCHIV</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- left: outline panel -->
|
||||
<div class="outline">
|
||||
<div class="outline-title">Outline</div>
|
||||
|
||||
<div class="outline-item header-item">
|
||||
<span class="num">#</span>
|
||||
<span>identity</span>
|
||||
</div>
|
||||
<div class="outline-item">
|
||||
<span class="num">##</span>
|
||||
<span>hard_limits</span>
|
||||
</div>
|
||||
<div class="outline-item" style="height:10px"></div>
|
||||
|
||||
<div class="outline-item active">
|
||||
<span class="num">##</span>
|
||||
<div class="dot" style="background:var(--red)"></div>
|
||||
<span>readable_code</span>
|
||||
</div>
|
||||
<div class="outline-item active">
|
||||
<span class="num">##</span>
|
||||
<div class="dot" style="background:var(--cyan)"></div>
|
||||
<span>reliable_code</span>
|
||||
</div>
|
||||
<div class="outline-item active">
|
||||
<span class="num">##</span>
|
||||
<div class="dot" style="background:var(--red)"></div>
|
||||
<span>modern_code</span>
|
||||
</div>
|
||||
<div class="outline-item active">
|
||||
<span class="num">##</span>
|
||||
<div class="dot" style="background:var(--purple)"></div>
|
||||
<span>secure_code</span>
|
||||
</div>
|
||||
<div class="outline-item active">
|
||||
<span class="num">##</span>
|
||||
<div class="dot" style="background:var(--purple)"></div>
|
||||
<span>testable_code</span>
|
||||
</div>
|
||||
|
||||
<div class="outline-item" style="height:10px"></div>
|
||||
<div class="outline-item header-item">
|
||||
<span class="num">##</span>
|
||||
<span>domain_expertise</span>
|
||||
</div>
|
||||
<div class="outline-item" style="color:#4B5563;font-size:10px;padding-left:22px">
|
||||
(persona-spezifisch)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right: content -->
|
||||
<div class="content">
|
||||
|
||||
<!-- identity – neutral -->
|
||||
<div class="section identity">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:#6B7280"># identity</span>
|
||||
<span class="from-badge" style="background:#21262D;color:#6B7280;border:1px solid #30363D">
|
||||
alle
|
||||
</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
Name · Rolle · Philosophie · Hard Limits — was diese Persona <strong>niemals</strong> tut.
|
||||
Der Hard-Limits-Abschnitt ist die entscheidende Disziplinkontrolle.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- readable_code → Security -->
|
||||
<div class="section" style="--section-accent:var(--red)">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:var(--red)">## readable_code</span>
|
||||
<span class="from-badge acc-red">Nora "NullX"</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<strong>Security-Code muss der lesbarste Code im gesamten Codebase sein</strong> — weil er am wahrscheinlichsten während eines Incident Response auditiert, hinterfragt und unter Zeitdruck gelesen wird. Sicherheitsentscheidungen müssen explizit, zentralisiert und selbst-dokumentierend sein.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- reliable_code → DevOps -->
|
||||
<div class="section" style="--section-accent:var(--cyan)">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:var(--cyan)">## reliable_code</span>
|
||||
<span class="from-badge acc-cyan">Tobias "tobi"</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
Zuverlässige Infrastruktur bedeutet, dass das System ohne menschlichen Eingriff aus Fehlern zurückfindet. <strong>Ein Backup ohne getestetes Restore-Verfahren ist kein Backup — es ist eine Hoffnung.</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modern_code → Security -->
|
||||
<div class="section" style="--section-accent:var(--red)">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:var(--red)">## modern_code</span>
|
||||
<span class="from-badge acc-red">Nora "NullX"</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
<strong>Moderne Security nutzt Framework-eigene Controls, anstatt Schutzmechanismen selbst zu bauen.</strong> Deklarative Security-Annotationen sind auditierbar via Reflection — imperativ gestreute if-Checks nicht. Aktuelle Framework-Versionen enthalten Security-Verbesserungen, die ältere Versionen nicht haben. Aktuell bleiben ist eine Sicherheitsstrategie.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- secure_code → UX -->
|
||||
<div class="section" style="--section-accent:var(--purple)">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:var(--purple)">## secure_code</span>
|
||||
<span class="from-badge acc-purple">Leonie Voss</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
UI-Security schützt Nutzer vor schädlichen Interaktionen — irreführende Interfaces, exponierte Daten, unsichtbare Fallen. <strong>Accessible Interfaces sind inhärent sicherer, weil sie State-Änderungen explizit und navigierbar machen.</strong> Sicherheit und Usability sind Verbündete, keine Trade-offs.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- testable_code → UX -->
|
||||
<div class="section" style="--section-accent:var(--purple)">
|
||||
<div class="section-label-col">
|
||||
<span class="section-heading" style="color:var(--purple)">## testable_code</span>
|
||||
<span class="from-badge acc-purple">Leonie Voss</span>
|
||||
</div>
|
||||
<div class="section-text">
|
||||
UI-Code ist testbar, wenn visuelle Zustände verifizierbar sind und Design-Entscheidungen mit exakten Werten dokumentiert sind. <strong>Accessibility muss auf jeder Seite automatisch getestet werden</strong> — manuelle visuelle Prüfungen übersehen Regressionen. Visuelle Regression-Tests bei mehreren Breakpoints fangen Layout-Shifts auf, die kein Unit-Test erkennt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /body -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user