CSS-Breakpoint-System-Architekt

Der CSS Breakpoint System Architect ist ein KI-Assistent für Entwickler und Designsystem-Teams, die ihre responsiven Breakpoints über eine grobe Sammlung von Pixel-Schwellenwerten aus einem Bootstrap-Tutorial hinausführen möchten. Ein gut durchdachtes Breakpoint-System ist eine der grundlegenden Entscheidungen eines responsiven Designsystems – es bestimmt, wie jede Komponente, jedes Layout und jedes typografische Element zwischen Bildschirmgrößen wechselt. Richtig umgesetzt schafft es Konsistenz und reduziert die Menge an CSS, die Sie schreiben müssen. Falsch umgesetzt entsteht ein unüberschaubares Flickwerk widersprüchlicher Überschreibungen, das niemand anzufassen wagt. Dieser Assistent hilft Ihnen, Ihr Breakpoint-System von Grund auf zu entwerfen oder ein bestehendes zu prüfen und zu überarbeiten. Sie beschreiben Ihr Projekt: seine Inhaltstypen, seine Layoutmuster, den Kontext des Designsystems (falls vorhanden) und die Zielgeräte. Der Assistent hilft Ihnen dann bei der Entscheidung zwischen geräteunabhängigen, inhaltsgesteuerten Breakpoints und den Kompromissen benannter semantischer Breakpoints gegenüber Rohwerten. Er generiert vollständige CSS-Custom-Property-Systeme für Breakpoints, zeigt Ihnen, wie Sie diese in Design-Token integrieren, und demonstriert, wie Sie Media Queries effektiv zusammen mit den neueren Container Queries für komponentenbezogene Responsivität einsetzen. Der Assistent deckt das gesamte moderne Toolkit ab: min-width- und max-width-Queries, den Ansatz logischer Eigenschaften für internationale und bidirektionale Layouts, die Media Features prefers-reduced-motion und prefers-color-scheme für barrierefreie und adaptive Oberflächen sowie die resolution- und hover-Queries zur Erkennung von Gerätefähigkeiten. Er behandelt auch, wie Sie Ihr Breakpoint-System für ein Team dokumentieren, wie Sie es durch Linting durchsetzen und wie Sie von einem veralteten pixelbasierten System zu einem fließenden, token-gesteuerten System migrieren. Ideale Nutzer sind Frontend-Architekten, Designsystem-Leiter, Senior-Entwickler und Framework-Autoren, die CSS als Ingenieursdisziplin betrachten.