From 897ef2519b997555579608fc041522ddaba4fd67 Mon Sep 17 00:00:00 2001 From: Pouya <> Date: Thu, 4 Jun 2026 16:47:43 +0200 Subject: [PATCH] feat(agentic-guide): link setup doc, add Claude Code start command and repo link --- agentic-setup/agentic-setup-overview.html | 100 +++++++++++++++++++++- 1 file changed, 98 insertions(+), 2 deletions(-) diff --git a/agentic-setup/agentic-setup-overview.html b/agentic-setup/agentic-setup-overview.html index ab1b48c..88fb53c 100644 --- a/agentic-setup/agentic-setup-overview.html +++ b/agentic-setup/agentic-setup-overview.html @@ -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} } @@ -676,6 +730,7 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent) 5 Memory 6 Setup 7 Do & avoid + Get started @@ -1226,6 +1281,45 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent) data-en="Build the smallest useful thing, use it, and let friction guide what's next." data-de="Bau das kleinste nützliche Ding, nutze es, und lass die Reibung leiten, was als Nächstes kommt.">Build the smallest useful thing, use it, and let friction guide what's next.

+ + +
+ + + Start here + +

Get started

+

This page is the what & why. The actual build is driven by the setup doc — a single file your Claude Code reads and executes to scaffold the repo, interview you, and stand up your first agents.

+ +
    +
  1. + Get the setup doc. It's one Markdown file that lives alongside this guide.
    + + + Get the setup doc — agentic-setup-bootstrap.md + +     +
    2. +
  2. + Save it where your Claude Code can read it — inside your project folder, or in your home directory (~/). +
    3. +
  3. + Give Claude Code this instruction and let it take it from there: + Read agentic-setup-bootstrap.md and set up my agentic environment. +
    4. +
+
@@ -1291,6 +1385,8 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent) Your Agentic Environment — A Field Guide ORIENT·01 The what & why · a companion to the setup doc + View the source repository →