public/tutorials
1
0
Fork 0
Code Actions Activity

feat(agentic-guide): link setup doc, add Claude Code start command and repo link
Deploy / deploy (push) Successful in 0s
Details

Browse Source
This commit is contained in:
Pouya
2026-06-04 16:47:43 +02:00
parent 3111b9ea7c
commit 897ef2519b
1 changed files with 98 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agentic-setup/agentic-setup-overview.html
+98 -2
View File
@@ -552,6 +552,60 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
}
.motto em{font-style:normal;color:var(--accent)}
/* ---- "Get started" call-to-action — accent-bordered concrete next step ---- */
.getstarted{
margin-top:18px;border:1px solid var(--border);border-left:5px solid var(--accent);
border-radius:0 14px 14px 0;overflow:hidden;box-shadow:var(--shadow);
background:
radial-gradient(120% 140% at 0% 0%, var(--accent-wash) 0%, transparent 55%),
var(--surface);
padding:clamp(1.3rem,3.5vw,2rem) clamp(1.3rem,3.5vw,2.2rem);
}
.getstarted .gsk{
font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);font-weight:700;display:flex;
align-items:center;gap:.5rem;margin-bottom:.5rem;
}
.getstarted .gsk svg{flex:none}
.getstarted h3{font-size:var(--step-2);margin:0 0 .55rem;font-family:var(--serif)}
.getstarted .gslede{margin:0;color:var(--ink-soft);font-size:var(--step-0);line-height:1.55;max-width:62ch}
.getstarted .gslede b{color:var(--ink)}
.getstarted ol.gssteps{
margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem;counter-reset:gs;
}
.getstarted ol.gssteps > li{
display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
font-size:var(--step--1);line-height:1.55;color:var(--ink-soft);
}
.getstarted ol.gssteps > li::before{
counter-increment:gs;content:counter(gs);
font-family:var(--mono);font-weight:700;font-size:.72rem;
width:1.55rem;height:1.55rem;flex:none;border-radius:50%;
display:grid;place-items:center;background:var(--accent-wash);
color:var(--accent-ink);border:1px solid var(--border-strong);
}
.getstarted ol.gssteps > li b{color:var(--ink)}
.getstarted .dl{
display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
font-family:var(--mono);font-weight:700;font-size:var(--step--1);letter-spacing:.02em;
color:#fff;background:var(--accent);border:1px solid var(--accent-ink);
padding:.5em .95em;border-radius:8px;box-shadow:var(--shadow);
transition:background-color .16s ease, transform .12s ease;
}
.getstarted .dl svg{flex:none}
.getstarted .dl:hover{background:var(--accent-ink)}
.getstarted .dl:active{transform:translateY(1px)}
@media(prefers-color-scheme: dark){.getstarted .dl{color:#15130f}}
.getstarted .cmd{
margin-top:.55rem;display:block;font-family:var(--mono);font-size:.82rem;line-height:1.5;
background:var(--ink);color:var(--bg);border:1px solid var(--border-strong);
border-radius:9px;padding:.75rem .9rem;white-space:pre-wrap;word-break:break-word;
}
@media(prefers-color-scheme: dark){
.getstarted .cmd{background:var(--surface-2);color:var(--ink);}
}
.getstarted .cmd .cprompt{color:var(--accent);user-select:none;margin-right:.4rem}
/* =========================================================================
SECTION 7 — PRINCIPLES & ANTI-PATTERNS (two columns)
========================================================================= */
@@ -621,9 +675,9 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
body{background:#fff}
body::before{display:none}
section{page-break-inside:avoid;border-top:1px solid #ccc}
.pillar,.role,.fact,.lstage,.stratum,.sstep .scard,.col-card,.loop-wrap,.pitch,.principle{box-shadow:none}
.pillar,.role,.fact,.lstage,.stratum,.sstep .scard,.col-card,.loop-wrap,.pitch,.principle,.getstarted,.getstarted .dl,.getstarted .cmd{box-shadow:none}
.reveal{opacity:1!important;transform:none!important}
.pitch .is,.motto{background:#111 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pitch .is,.motto,.getstarted .cmd{background:#111 !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.compass,.langbar{display:none}
}
</style>
@@ -676,6 +730,7 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
<a href="#memory"><span class="n">5</span> <span data-i18n data-en="Memory" data-de="Gedächtnis">Memory</span></a>
<a href="#setup"><span class="n">6</span> <span data-i18n data-en="Setup" data-de="Setup">Setup</span></a>
<a href="#principles"><span class="n">7</span> <span data-i18n data-en="Do &amp; avoid" data-de="Tun &amp; meiden">Do &amp; avoid</span></a>
<a href="#get-started"><span class="n" aria-hidden="true">&rarr;</span> <span data-i18n data-en="Get started" data-de="Loslegen">Get started</span></a>
</nav>
</header>
@@ -1226,6 +1281,45 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
data-en="Build the <em>smallest useful thing</em>, use it, and let <em>friction guide</em> what's next."
data-de="Bau das <em>kleinste nützliche Ding</em>, nutze es, und lass die <em>Reibung leiten</em>, was als Nächstes kommt.">Build the <em>smallest useful thing</em>, use it, and let
<em>friction guide</em> what's next.</p>
<!-- ----- concrete next step: get the setup doc + the command ----- -->
<div class="getstarted reveal" id="get-started" aria-labelledby="gs-h">
<span class="gsk">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
<span data-i18n data-en="Start here" data-de="Hier starten">Start here</span>
</span>
<h3 id="gs-h" data-i18n data-en="Get started" data-de="Loslegen">Get started</h3>
<p class="gslede" data-i18n
data-en="This page is the <b>what &amp; why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents."
data-de="Diese Seite ist das <b>Was &amp; Warum</b>. Der eigentliche Aufbau wird von der <b>Setup-Anleitung</b> gesteuert — einer einzelnen Datei, die deine Claude Code <b>liest und ausführt</b>, um das Repo anzulegen, dich zu befragen und deine ersten Agenten aufzustellen.">This page is the <b>what &amp; why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents.</p>
<ol class="gssteps">
<li>
<span data-i18n
data-en="<b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide."
data-de="<b>Hol dir die Setup-Anleitung.</b> Es ist eine einzelne Markdown-Datei, die neben diesem Leitfaden liegt."><b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide.<br>
<a class="dl" href="agentic-setup-bootstrap.md"
data-en-aria="Get the setup doc — agentic-setup-bootstrap.md"
data-de-aria="Setup-Anleitung holen — agentic-setup-bootstrap.md"
aria-label="Get the setup doc — agentic-setup-bootstrap.md">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
<span data-i18n data-en="Get the setup doc — agentic-setup-bootstrap.md" data-de="Setup-Anleitung holen — agentic-setup-bootstrap.md">Get the setup doc — agentic-setup-bootstrap.md</span>
</a>
</span>
</li>
<li>
<span data-i18n
data-en="<b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>)."
data-de="<b>Speichere sie dort, wo deine Claude Code sie lesen kann</b> — in deinem Projektordner oder in deinem Home-Verzeichnis (<code>~/</code>)."><b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>).</span>
</li>
<li>
<span data-i18n
data-en="<b>Give Claude Code this instruction</b> and let it take it from there:"
data-de="<b>Gib Claude Code diese Anweisung</b> und lass sie ab da übernehmen:"><b>Give Claude Code this instruction</b> and let it take it from there:</span>
<code class="cmd"><span class="cprompt" aria-hidden="true">&gt;</span>Read agentic-setup-bootstrap.md and set up my agentic environment.</code>
</li>
</ol>
</div>
</section>
<!-- ============================ SECTION 7 ============================ -->
@@ -1291,6 +1385,8 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
<span data-i18n data-en="Your Agentic Environment — A Field Guide" data-de="Deine agentische Umgebung — ein Feldführer">Your Agentic Environment — A Field Guide</span>
<span class="num">ORIENT·01</span>
<span data-i18n data-en="The what &amp; why · a companion to the setup doc" data-de="Das Was &amp; Warum · ein Begleiter zur Setup-Anleitung">The what &amp; why · a companion to the setup doc</span>
<a href="https://git.pouya.duckdns.org/public/tutorials" target="_blank" rel="noopener"
data-i18n data-en="View the source repository &rarr;" data-de="Quell-Repository ansehen &rarr;">View the source repository &rarr;</a>
</div>
</footer>