From 4edcefcfde29adf8c1893af4fb614b1e4bd5689c Mon Sep 17 00:00:00 2001 From: Cobus Greyling Date: Sat, 27 Jun 2026 17:59:51 +0200 Subject: [PATCH] Add dark-theme SVG visuals and polish README layout Introduce scalable logo, animated loop flow diagram, patterns overview grid, and section dividers matching the showcase palette. Streamline the README hero (remove redundant banner) and wire the new assets into the GitHub Pages showcase. --- README.md | 29 ++++-- assets/visuals/loop-cycle-animated.svg | 113 +++++++++++++++++++++++ assets/visuals/loop-engineering-logo.svg | 34 +++++++ assets/visuals/patterns-overview.svg | 94 +++++++++++++++++++ assets/visuals/section-divider.svg | 19 ++++ docs/index.html | 16 +++- 6 files changed, 295 insertions(+), 10 deletions(-) create mode 100644 assets/visuals/loop-cycle-animated.svg create mode 100644 assets/visuals/loop-engineering-logo.svg create mode 100644 assets/visuals/patterns-overview.svg create mode 100644 assets/visuals/section-divider.svg diff --git a/README.md b/README.md index 0cb9cf5..c5a6a09 100644 --- a/README.md +++ b/README.md @@ -19,11 +19,13 @@

- Loop Engineering + + Loop Engineering logo +

- Loop Engineering + Loop Engineering — design the system that prompts your agents

**Loop engineering is replacing yourself as the person who prompts the agent. You design the system that does it instead.** @@ -36,10 +38,6 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with -

- Loop Engineering — Design the system that prompts your agents -

-

→ Interactive showcase + pattern picker
@@ -80,6 +78,10 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with | [Goal Engineering](https://github.com/cobusgreyling/goal-engineering) | Companion: Grok Build `/goal` — run-until-done objectives (`npx @cobusgreyling/goal-audit`) | | [Stories](stories/) | Real wins and honest failures | +

+ +

+ ## Why This Matters Peter Steinberger: @@ -109,7 +111,14 @@ Full detail: [docs/primitives.md](docs/primitives.md) · Cross-tool matrix: [doc The Five Building Blocks + Memory — Loop Engineering

-### Anatomy of a Loop (Mermaid) +### Anatomy of a Loop + +

+ Animated loop flow — schedule, triage, state, worktree, implement, verify, MCP, human gate +

+ +
+Mermaid diagram (copy-friendly) ```mermaid flowchart LR @@ -126,10 +135,16 @@ flowchart LR J --> A ``` +
+ **This reference repo now runs its own `validate-patterns` + `audit` workflows on every push/PR** (see `.github/workflows/`). We also added `LOOP.md` describing the loops that will maintain it. ## Patterns +

+ Seven production loop patterns with cadence and token cost +

+ | Pattern | Cadence | Starter | Week 1 | Token cost | |---------|---------|---------|--------|------------| | [Daily Triage](patterns/daily-triage.md) | 1d–2h | [minimal-loop](starters/minimal-loop/) | **L1** report | Low | diff --git a/assets/visuals/loop-cycle-animated.svg b/assets/visuals/loop-cycle-animated.svg new file mode 100644 index 0000000..6950a06 --- /dev/null +++ b/assets/visuals/loop-cycle-animated.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Anatomy of a Loop + Design once — the system prompts, verifies, and iterates + + + + + + + + + ⏱ Schedule + cadence + + + + 👁 Triage + skill + + + + 📋 STATE + memory + + + + 🌲 Worktree + isolated + + + + ⚙️ Implement + sub-agent + + + + ✓ Verify + gates + + + + 🔗 MCP / PR + tools + + + + 🧑 Human gate + approve / escalate + + + + ⟳ + + + + loop back + \ No newline at end of file diff --git a/assets/visuals/loop-engineering-logo.svg b/assets/visuals/loop-engineering-logo.svg new file mode 100644 index 0000000..8e890b8 --- /dev/null +++ b/assets/visuals/loop-engineering-logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/visuals/patterns-overview.svg b/assets/visuals/patterns-overview.svg new file mode 100644 index 0000000..ca115eb --- /dev/null +++ b/assets/visuals/patterns-overview.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + 7 Production Patterns + Pick a cadence, clone a starter, start at L1 report-only + + + + + 📅 + Daily Triage + 1d–2h · L1 report + + LOW + + + + + 👶 + PR Babysitter + 5–15m · L1 watch + + HIGH + + + + + 🧹 + CI Sweeper + 5–15m · L2 cautious + + V.HIGH + + + + + 📦 + Dependency Sweeper + 6h–1d · L2 patch-only + + MEDIUM + + + + + + 📝 + Changelog Drafter + 1d or tag · L1 draft + + LOW + + + + + 🧼 + Post-Merge Cleanup + 1d–6h · L1 off-peak + + LOW + + + + + 🏷️ + Issue Triage + 2h–1d · L1 propose + + LOW + + + + + Not sure? + Try the interactive picker → + ✨ + + \ No newline at end of file diff --git a/assets/visuals/section-divider.svg b/assets/visuals/section-divider.svg new file mode 100644 index 0000000..edbdd28 --- /dev/null +++ b/assets/visuals/section-divider.svg @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 8c09449..59fb2c4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,13 +13,16 @@ - +