Aug 2026 – Sep 2026
Epsilon Lab
206 Komponenten für die Website von Epsilon, an Stripe gemessen und durch automatisierte Gates abgesichert
- Websites & Apps
- Komponentenbibliothek
- Dauer
- 1 Monat
- Unternehmen
- Epsilon Solutions
- Rolle
- Owner; Festlegung des Qualitätsmaßstabs und Steuerung der Agenten
Überblick
Eine eigenständige Next.js-App mit 206 Komponenten in 23 Kategorien, die Basis, auf der die Website von Epsilon aufgebaut ist. Sie folgt der gemessenen Geometrie, Typografie und Bewegung von Stripe in den Farben von Epsilon, und automatisierte Qualitäts-Gates halten sie so streng, dass Agenten daraus Seiten bauen können, ohne abzudriften.
Tools
- Next.js
- React
- TypeScript
- Vitest
- Playwright
- axe-core
- Claude Code
Gemessen, nicht nach Augenmaß
Die Website brauchte eine Komponentenbasis, deren Qualität gemessen statt nach Augenmaß beurteilt wird: exakte Abstände und Typografie, Tastaturzugang, Kontrast, reduzierte Bewegung und korrekte Darstellung georgischer Schrift. Außerdem musste sie so streng sein, dass KI-Agenten daraus Seiten bauen können, ohne abzudriften.
Stripes Geometrie, Epsilons Farbe
Die Werte stammen aus Stripes tatsächlich ausgeliefertem CSS und Dashboard-Code und sind nicht geschätzt. Der Vertrag ist einfach: Geometrie und Interaktion von Stripe, Farbe und Inhalt von Epsilon. Zwei Token-Dateien sind die einzigen Farbquellen, und ein CSS-Gate setzt das durch. Neue Komponenten wie Menü, Combobox, Datumsauswahl und Datentabelle folgen den Tastaturmustern von WAI-APG.
Gates und Agenten
Ein Befehl führt die CSS-Gates, Typprüfungen, Lint, die Vitest-Suite, den Produktions-Build und einen Smoke-Durchlauf auf Konsolen-, Netzwerk-, Hydration- und axe-Fehler aus. In einer Verfeinerungskampagne bekam jede der 206 Komponenten einen eigenen Claude-Code-Agenten, gefolgt von Prüfagenten, alles unter meiner Leitung. Ein Pilot einer App-Vorlage im Stil von ClickUp mit 12 Routen wurde so lange auditiert, bis ein vollständiger Durchgang nichts mehr fand.
Ergebnis
Die Verfeinerungskampagne behob 730 Mängel, und die Testsuite wuchs auf 5.358 Specs. Die zulässige Zahl von axe-Befunden zum Farbkontrast sank von 127 auf 17, alle 1.420 Elemente sind per Tastatur erreichbar, mit 0 Tastaturfallen, die Animation im Ruhezustand fiel von 180–240 auf etwa 0,2 Bilder pro Sekunde, und abgeschnittene georgische Unterlängen gingen von 141 abgeschnittenen Pixeln auf 0 zurück.