Skip to content

Commit fc03022

Browse files
rdmuellerrdmueller
authored
Merge pull request #367 from raifdmueller/feat/contracts-tldr-eli5
feat: add TLDR and ELI5 as Semantic Contracts
2 parents 9b7679a + cfac1a2 commit fc03022

5 files changed

Lines changed: 50 additions & 13 deletions

File tree

‎website/public/data/contracts.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,27 @@
5353
"template": "All documentation uses:\n- Plain English according to Strunk & White (or Gutes Deutsch nach Wolf Schneider for German)\n- Docs-as-Code with AsciiDoc\n- Diataxis for document types",
5454
"templateDe": "Alle Dokumentation verwendet:\n- Gutes Deutsch nach Wolf Schneider (oder Plain English nach Strunk & White für Englisch)\n- Docs-as-Code mit AsciiDoc\n- Diataxis für Dokumenttypen",
5555
"category": "documentation"
56+
},
57+
{
58+
"id": "concise-response",
59+
"title": "Concise Response (TLDR)",
60+
"titleDe": "Knappe Antwort (TLDR)",
61+
"description": "How responses should be structured for brevity",
62+
"descriptionDe": "Wie Antworten für Kürze strukturiert sein sollen",
63+
"anchors": ["bluf", "plain-english-strunk-white"],
64+
"template": "Responses lead with the conclusion first (BLUF). Keep to essential points. No filler, no preamble. Use short sentences, active voice, and no unnecessary words (Strunk & White).",
65+
"templateDe": "Antworten beginnen mit der Schlussfolgerung (BLUF). Nur das Wesentliche. Kein Fülltext, keine Einleitung. Kurze Sätze, aktive Sprache, keine überflüssigen Wörter (Wolf Schneider).",
66+
"category": "communication"
67+
},
68+
{
69+
"id": "simple-explanation",
70+
"title": "Simple Explanation (ELI5)",
71+
"titleDe": "Einfache Erklärung (ELI5)",
72+
"description": "How to explain complex concepts simply",
73+
"descriptionDe": "Wie man komplexe Konzepte einfach erklärt",
74+
"anchors": ["feynman-technique"],
75+
"template": "Explain complex concepts using simple language and everyday analogies. When the explanation feels hard to write, that reveals gaps in understanding — study those areas first (Feynman Technique).",
76+
"templateDe": "Komplexe Konzepte mit einfacher Sprache und Alltagsanalogien erklären. Wenn die Erklärung schwerfällt, zeigt das Wissenslücken — diese zuerst vertiefen (Feynman-Technik).",
77+
"category": "communication"
5678
}
5779
]

‎website/src/components/contracts-page.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,11 @@ export function renderContractsPage() {
4343
<h1 class="text-3xl font-bold text-[var(--color-text)] mb-2" data-i18n="contracts.title">
4444
${i18n.t('contracts.title')}
4545
</h1>
46-
<p class="text-[var(--color-text-secondary)] mb-6" data-i18n="contracts.subtitle">
47-
${i18n.t('contracts.subtitle')}
46+
<p class="text-[var(--color-text-secondary)] mb-4" data-i18n="contracts.explanation">
47+
${i18n.t('contracts.explanation')}
48+
</p>
49+
<p class="text-sm text-[var(--color-text-secondary)] mb-6">
50+
<a href="https://www.linkedin.com/feed/update/urn:li:activity:7438137401019105281/" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline" data-i18n="contracts.linkedinLink">${i18n.t('contracts.linkedinLink')}</a>
4851
</p>
4952
5053
<div class="flex items-center gap-4 mb-6">
@@ -71,7 +74,7 @@ export function renderContractsPage() {
7174
</div>
7275
</div>
7376
74-
<div id="contracts-grid" class="grid gap-4">
77+
<div id="contracts-grid" class="grid gap-4 md:grid-cols-2">
7578
</div>
7679
</div>
7780
`

‎website/src/components/header.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,20 @@ export function renderHeader() {
3535
<div class="flex items-center justify-between">
3636
<div class="flex items-center gap-6 text-2xl">
3737
<a href="#/" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/" data-i18n="nav.catalog">${i18n.t('nav.catalog')}</a>
38-
<a href="#/about" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/about" data-i18n="nav.about">${i18n.t('nav.about')}</a>
39-
<a href="#/contributing" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/contributing" data-i18n="nav.contributing">${i18n.t('nav.contributing')}</a>
40-
<a href="#/changelog" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/changelog" data-i18n="nav.changelog">${i18n.t('nav.changelog')}</a>
41-
<a href="#/agentskill" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/agentskill" data-i18n="nav.agentskill">${i18n.t('nav.agentskill')}</a>
42-
<a href="#/workflow" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/workflow" data-i18n="nav.workflow">${i18n.t('nav.workflow')}</a>
4338
<a href="#/contracts" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/contracts" data-i18n="nav.contracts">${i18n.t('nav.contracts')}</a>
39+
<a href="#/workflow" class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors" data-route="/workflow" data-i18n="nav.workflow">${i18n.t('nav.workflow')}</a>
40+
<div class="relative group">
41+
<button class="nav-link text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors flex items-center gap-1" data-i18n="nav.more">
42+
${i18n.t('nav.more')}
43+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
44+
</button>
45+
<div class="absolute left-0 top-full mt-1 hidden group-hover:block bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg py-2 min-w-[160px] z-50">
46+
<a href="#/about" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/about" data-i18n="nav.about">${i18n.t('nav.about')}</a>
47+
<a href="#/agentskill" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/agentskill" data-i18n="nav.agentskill">${i18n.t('nav.agentskill')}</a>
48+
<a href="#/contributing" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/contributing" data-i18n="nav.contributing">${i18n.t('nav.contributing')}</a>
49+
<a href="#/changelog" class="nav-link block px-4 py-2 text-base text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/changelog" data-i18n="nav.changelog">${i18n.t('nav.changelog')}</a>
50+
</div>
51+
</div>
4452
</div>
4553
<div class="flex items-center gap-3">
4654
<button
@@ -142,12 +150,12 @@ export function renderHeader() {
142150
<div id="mobile-menu" class="hidden sm:hidden mt-3 pb-2 border-t border-[var(--color-border)] pt-3">
143151
<div class="flex flex-col gap-2">
144152
<a href="#/" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/" data-i18n="nav.catalog">${i18n.t('nav.catalog')}</a>
153+
<a href="#/contracts" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/contracts" data-i18n="nav.contracts">${i18n.t('nav.contracts')}</a>
154+
<a href="#/workflow" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/workflow" data-i18n="nav.workflow">${i18n.t('nav.workflow')}</a>
145155
<a href="#/about" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/about" data-i18n="nav.about">${i18n.t('nav.about')}</a>
156+
<a href="#/agentskill" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/agentskill" data-i18n="nav.agentskill">${i18n.t('nav.agentskill')}</a>
146157
<a href="#/contributing" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/contributing" data-i18n="nav.contributing">${i18n.t('nav.contributing')}</a>
147158
<a href="#/changelog" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/changelog" data-i18n="nav.changelog">${i18n.t('nav.changelog')}</a>
148-
<a href="#/agentskill" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/agentskill" data-i18n="nav.agentskill">${i18n.t('nav.agentskill')}</a>
149-
<a href="#/workflow" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/workflow" data-i18n="nav.workflow">${i18n.t('nav.workflow')}</a>
150-
<a href="#/contracts" class="nav-link mobile-nav-link px-3 py-2 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-route="/contracts" data-i18n="nav.contracts">${i18n.t('nav.contracts')}</a>
151159
</div>
152160
</div>
153161
</nav>

‎website/src/translations/de.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"nav.changelog": "Änderungsprotokoll",
1212
"nav.agentskill": "AgentSkill",
1313
"nav.workflow": "Workflow",
14+
"nav.more": "Mehr",
1415
"nav.contracts": "Contracts",
1516
"contracts.title": "Semantic Contracts",
16-
"contracts.subtitle": "Wähle Konventionen für dein Projekt. Lade sie als fertige Datei für AGENTS.md oder CLAUDE.md herunter.",
17+
"contracts.explanation": "Semantic Anchors referenzieren öffentliches Wissen, das LLMs bereits kennen. Aber die Konventionen, Templates und Definitionen deines Teams? Dafür braucht es Semantic Contracts. Ein Contract kombiniert etablierte Anker zu projektspezifischen Konventionen — wähle die passenden aus und lade sie für deine AGENTS.md oder CLAUDE.md herunter.",
18+
"contracts.linkedinLink": "Lies die ganze Geschichte hinter Semantic Contracts auf LinkedIn \u2192",
1719
"contracts.download": "semantic-contracts.md herunterladen",
1820
"contracts.selectAll": "Alle auswählen",
1921
"contracts.deselectAll": "Alle abwählen",

‎website/src/translations/en.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"nav.changelog": "Changelog",
1212
"nav.agentskill": "AgentSkill",
1313
"nav.workflow": "Workflow",
14+
"nav.more": "More",
1415
"nav.contracts": "Contracts",
1516
"contracts.title": "Semantic Contracts",
16-
"contracts.subtitle": "Select conventions for your project. Download as a ready-to-use file for AGENTS.md or CLAUDE.md.",
17+
"contracts.explanation": "Semantic Anchors reference public knowledge that LLMs already understand. But your team's conventions, templates, and definitions? Those need Semantic Contracts. A contract composes established anchors into project-specific conventions — select the ones that fit your team and download them for your AGENTS.md or CLAUDE.md.",
18+
"contracts.linkedinLink": "Read the full story behind Semantic Contracts on LinkedIn \u2192",
1719
"contracts.download": "Download semantic-contracts.md",
1820
"contracts.selectAll": "Select all",
1921
"contracts.deselectAll": "Deselect all",

0 commit comments

Comments
 (0)