2026 OpenClaw Web in der Praxis:
Storybook-Build & statische Asset-Schwellen auf Remote Mac
Frontend-Engineering und Release-Verantwortliche brauchen ein reproduzierbares Storybook-Artefakt, bevor Komponenten-Drops live gehen. Dieses HowTo beschreibt auf einem Remote Mac die Installation, typische Build-Befehle, strikte Scan-Regeln nur für den statischen Output, eine einstellbare Schwellen-Tabelle, OpenClaw-taugliche Alarme und die sinnvolle CI-Reihenfolge für Vorabprüfungen. Ergänzend finden Sie eine kompakte Zuordnung häufiger Fehler zu Log-Stellen. Vertiefung: package.json-Skript-Preflight, Smoke vor dem Deploy, Lighthouse & Link-Gates. Übersicht im Blog, SSH und Einrichtung in der Hilfe, Checkout ohne Login über kaufen.html und Preise.
01 Schmerzpunkte bei statischen Storybook-Drops
Ohne klare Scan-Wurzeln misst Ihr Gate Unsinn: Teams scannen versehentlich das gesamte Repository, ziehen node_modules in die Summe oder vergleichen lokale Entwickler-Builds mit CI-Artefakten unterschiedlicher Storybook-Versionen. Das Ergebnis sind schwankende Megabyte-Zahlen, die weder Regression noch Optimierung beweisen.
1) Falscher Ordner: Der Scanner zeigt auf dist/ statt storybook-static — jede Konfigurationsänderung bricht das Gate ohne inhaltlichen Grund.
2) Unklare Schwellen: Warn- und Fail-Grenzen fehlen pro Dateityp; ein neues Hero-Bild blockiert den Release wie ein ausuferndes Bundle, obwohl nur Letzteres kritisch ist.
3) CI-Reihenfolge: Der teure Storybook-Build läuft vor schnellen Checks; OpenClaw feuert Alarme, obwohl Lint bereits rot war — verschwendete Minuten auf dem Remote Mac.
02 Entscheidungsmatrix: Linux-CI vs. Remote Mac
Die Matrix fasst fünf technische Dimensionen zusammen — keine vollständige Kostenrechnung, aber eine belastbare Entscheidungsgrundlage für Release-Inspektion und statische Assets.
| Dimension | Linux-CI (primär) | Remote Mac (ergänzend) |
|---|---|---|
| Build-Zeit / Parallelität | Oft günstiger Pool, hohe Parallelität | Apple Silicon, realistisch für Safari-nahe Pipelines |
| Dateisystem & Case-Sensitivity | Case-sensitiv — deckt Pfad-Fehler früh auf | macOS-Standard-Case — mischt sich mit Designer-Assets |
| Native Abhängigkeiten | glibc-Toolchain dominant | clang/darwin-Kanten für manche optionalen Deps |
| Artefakt-Hosting | Schneller Upload zu Objektspeicher | Gleiches Muster; Fokus auf manuelle Spot-Checks |
| OpenClaw-Anbindung | Webhook nach Job-Ende | Gleich; Report-Pfad lokal auf dem Mac verifizierbar |
03 Schwellen-Tabelle für statische Storybook-Assets
Passen Sie Megabyte-Werte an Ihr Design-System an. Die Tabelle trennt Warnung (Review) von Fehler (Pipeline-Stop). Einzeldatei fängt versehentlich eingecheckte Roh-Videos oder Riesen-SVGs.
| Metrik / Bereich | Warnschwelle (Beispiel) | Fehlerschwelle (Beispiel) | Hinweis |
|---|---|---|---|
Gesamtordner storybook-static |
> 18 MB | > 28 MB | Relativ zum letzten grünen Main-Build indexieren |
Größte *.js-Datei |
> 450 KB | > 900 KB | Code-Splitting / Docs-Seiten prüfen |
Größte *.css |
> 120 KB | > 220 KB | Unused CSS und Theme-Duplikate |
Bitmaps *.png|jpg|webp |
Einzel > 400 KB | Einzel > 1,2 MB | Kompression, responsive Quellen |
Schriften *.woff2 |
Einzel > 180 KB | Einzel > 350 KB | Subset-Fonts prüfen |
*.map (optional) |
im Prod-Artefakt vorhanden | > 15 % der JS-Gesamtgröße | Security-Policy entscheidet Mitlieferung |
04 Reproduzierbarer Ablauf in sechs Schritten
Schritt 1 — Toolchain: Auf dem Remote Mac node -v und Paketmanager-Version loggen; npm ci oder pnpm install --frozen-lockfile erzwingen reproduzierbare Abhängigkeiten.
Schritt 2 — Build: npm run build-storybook bzw. pnpm build-storybook; Ausgabe mit ls -la storybook-static | head verifizieren.
Schritt 3 — Scan-Regeln: Nur den Output-Ordner; Ausschlüsse für .map wenn Produktions-Host keine Maps ausliefert; pro Endung aggregieren.
Schritt 4 — Schwellen: Skript vergleicht Summen und Max-Datei gegen Tabelle; Exit 1 bei Fail, 0 mit Annotation bei Warn.
Schritt 5 — Report für OpenClaw: Markdown oder JSON mit Top-10-Dateien, Delta zum Baseline-Commit und Link zum CI-Artefakt erzeugen; Task-Payload enthält Pfad.
Schritt 6 — CI-Preflight: Job nach Lint und Unit-Tests, vor Playwright oder Lighthouse einplanen — konsistent mit KI-Smoke und Lighthouse-Schritten.
# Beispiel: Build + Ordnergröße (vereinfacht)
pnpm install --frozen-lockfile
pnpm build-storybook
du -sh storybook-static
find storybook-static -type f -exec ls -l {} \; | sort -nk5 | tail -n 505 Zahlen, Parameter und Audit-Hinweise
- Baseline-Commit: Speichern Sie den letzten grünen
main-SHA neben den Megabyte-Zahlen — sonst verschiebt sich das Fenster bei jedem Release. - Artefakt-TTL: Bewahren Sie Scan-Reports mindestens so lange wie Ihr Rollback-Fenster; OpenClaw soll denselben Pfad lesen wie Menschen.
- Supply Chain: Nach dem Storybook-Build kurz npm/pnpm-Audit in der Kette lassen, wenn das Gate Teil einer umfassenden Vorabprüfung ist.
06 Typische Fehler und Log-Ort
Wenn der Job rot wird, zuerst stderr des Build-Schritts, dann den Scan-Schritt und zuletzt Umgebungs-Drift prüfen.
| Symptom | Wahrscheinliche Ursache | Log / Ort |
|---|---|---|
Module not found beim Build |
Fehlende Peer-Dependency oder Workspace-Pfad | Erste 80 Zeilen des webpack/vite-Stacks im CI-Log |
| Build ok, Scan explodiert | Scanner enthält node_modules |
Scan-Skript-Debug: ausgegebene Root-Pfade |
| Größe schwankt ±30 % ohne Code-Änderung | Unterschiedliche SB-Version oder Cache | npx storybook --version im Log |
| OpenClaw meldet, Mensch sieht keinen Report | Pfad außerhalb erlaubter Arbeitsverzeichnisse | Agenten-Task-Payload und Runner-Volume-Mounts |
07 FAQ
Welches Verzeichnis soll der Gate messen?
Nur den statischen Storybook-Output, üblicherweise storybook-static. Alles andere verfälscht Release-Inspektion und statische Assets-Trends.
Wie gehe ich mit Source Maps um?
Entweder aus dem Produktions-Artefakt entfernen oder eigene, strengere Limits für .map definieren — abgestimmt mit Security.
Passt das zu Monorepos?
Ja: pro Package einen Output-Pfad und eine Baseline pflegen; Turborepo-Cache-Disziplin verhindert, dass alte Bundles das Gate grün täuschen.
Storybook liefert kein Release-Signal, wenn der Scanner das falsche Verzeichnis misst. Auf einem Remote Mac kombinieren Sie reproduzierbare Build-Befehle, eine explizite Schwellen-Tabelle und einen maschinenlesbaren Report, den OpenClaw an CI-Preflight und Chat koppelt — so bleibt Wachstum bei statischen Assets sichtbar, bevor es die Produktion erreicht.
Storybook-Gates & OpenClaw auf dediziertem Apple Silicon
Mieten Sie einen Mac Mini M4 für reproduzierbare Storybook-Builds, Asset-Scans und Safari-nahe Checks. Anleitungen finden Sie in der Hilfe, den Katalog im Blog. Bestellen ohne Login über kaufen.html — passend zu Teams, die Release-Inspektion vor dem Kauf testen wollen.