B16 Immersives Frontend
Schaffe ein unvergessliches Erlebnis um eine haltbare visuelle Idee. Dieses Skill ergänzt einen breiteren Projektworkflow; es ersetzt keine Governance-, Planungs-, Build-, Verifikations- oder Review-Skills und beansprucht nicht, B16 Dev OS zu reproduzieren.
Briefing festlegen
Verdaue den gesamten verfügbaren Kontext, bevor du Fragen stellst. Ziehe Schlüsse nur, wenn Beweise sie stützen, nenne die Quelle oder kennzeichne die Schlussfolgerung und frage nur nach Lücken, die die Richtung materiell verändern können. Verwende briefing.md, wenn die Richtung noch nicht genehmigt ist.
Lege vor der Implementierung eine kompakte Richtung vor, die die visuelle These, die Inhaltshierarchie, den Helden-Fokuspunkt, die Typografie, die Palette, den Layout-Rhythmus, die Bewegungs-Erzählung, den wahrscheinlichen Stack, das Performance-Budget, Fallbacks, die Asset-Herkunft und Ausschlüsse abdeckt. Hole die Genehmigung für diese Richtung ein. Behandle die Genehmigung eines Konzepts nicht als Erlaubnis für Deployment, Käufe, Konten, Tokens oder nicht damit zusammenhängende Systemänderungen.
Absichtsvoll gestalten
- Starte mobil zuerst und erweitere dann Komposition und Choreografie für größere Viewports.
- Verankere die Identität im Subjekt, Publikum, Materialien, der Sprache und echten Inhalten. Vermeide ein generisches Komponentenbibliothek-Aussehen.
- Setze visuelle Kühnheit an einer einprägsamen Stelle ein und halte das unterstützende System diszipliniert.
- Schreibe menschliche, technisch korrekte Texte im Aktiv. Verwende Satzfall und keine Gedankenstriche. Erfinde niemals Beweise, Partner, Testimonials, Metriken oder Fähigkeiten.
- Verwende eine kohärente Icon-Familie pro Projekt, ausgewählt nach Stack-Passung, Identität, Abdeckung, Lizenz, Kosten, Wartung, Barrierefreiheit und Gewicht. Verwende offizielle oder autorisierte Markenzeichen. Importiere einzelne Icons mit echtem Tree Shaking, wo der Stack dies unterstützt.
- Mache jede primäre Aktion ohne Hover bedienbar. Gib Touch-, Tastatur-, Fokus-, Active-, Loading-, Disabled-, Error- und Empty-Zustände an, wo relevant.
Wähle den kleinstmöglichen Stack
Lies stack-selection.md, wenn Bewegung, 2D-Kanvas oder 3D in Betracht gezogen werden. Behalte den aktuellen Stack bei, es sei denn, eine Änderung ist gerechtfertigt und genehmigt.
Füge React nicht zu WordPress für einen einzigen Effekt hinzu. Mache keine Bibliothek obligatorisch für alle Websites. Installiere keine Abhängigkeit, nur weil sie in einem Plan erscheint. Bevorzuge CSS und Plattform-APIs für einfache Übergänge, Motion für Komponenten-Choreografie, GSAP mit ScrollTrigger für bewusste Timeline- oder Scroll-Sequenzen, PixiJS für anspruchsvolle 2D-Szenen, Three.js für direktes WebGL und React Three Fiber mit selektiven drei-Helfern, wenn React bereits existiert und deklarative Szenenkomposition vorteilhaft ist. Lenis ist optional, niemals automatisch.
Verwende ReactBits und Codrops nur als selektive Referenzen. Bestätige die Lizenz und Herkunft von Code und Assets vor der Wiederverwendung. Bevorzuge originäre Synthese; bewahre erforderliche Hinweise für jeden lizenzierten Auszug.
Lege Bewegung vor dem Bauen fest
Halte für jede bedeutungsvolle Animation fest:
- Zweck: Was sie erklärt, priorisiert, bestätigt oder räumlich lesbar macht.
- Auslöser: Laden, Eintritt, Klick, Zustandsänderung, Zeiger, Scrollen oder Medienfortschritt.
- Dauer und Easing: Enthält Grenzen für Wiederholung und Unterbrechung.
- Mobiles Verhalten: Was sich für Viewport, groben Zeiger, Touch, Akku und Gerätefähigkeit ändert.
- Fallback: Endgültiger statischer Zustand für reduzierte Bewegung, nicht verfügbares JavaScript, fehlgeschlagene Medien, verlorenes WebGL oder eingeschränkte Hardware.
Vermeide Hover-exklusive Bedeutung und dekorative Dauerebewegung. Navigation, primäre Nachricht und CTA müssen funktionieren, bevor die Animation abgeschlossen ist. Gib unter prefers-reduced-motion: reduce stabile Endzustände wieder und entferne gescrubbte, Parallax-, Autoplay- oder Smooth-Scroll-Verhalten, anstatt sie nur zu verkürzen.
Performance budgetieren
Lege vor der Implementierung messbare Budgets fest, die für das Projekt angemessen sind. Berücksichtige initiales JavaScript, Mediengröße, Anzahl Schriftarten, Animationskonkurrenz, lange Tasks, Layout-Verschiebung, Largest-Content-Timing, Frame-Stabilität, GPU-Speicher, Geräte-Pixel-Verhältnis und thermische Kosten.
Stelle für Canvas oder WebGL ein statisches Poster bereit; begrenze das Pixelverhältnis; pausiere, wenn nicht sichtbar oder verdeckt; vermeide Allokation pro Frame; reduziere Arbeit auf kleinen oder eingeschränkten Geräten; behandle Kontextfehler; und entsorge Frames, Beobachter, Listener, Texturen, Geometrien, Materialien, Renderziele und Renderer-Zustand. Semantischer Inhalt und Steuerelemente müssen außerhalb oder unabhängig vom Canvas bleiben.
Proportional implementieren
Halte die genehmigte Richtung und bestehende Projektkonventionen ein. Behalte semantisches HTML und echten Inhalt als Quelle der Wahrheit. Lade schwere Erlebnisse nur dort, wo sie Mehrwert bieten. Begrenze Effekte, sodass nicht mehrere Systeme dieselbe Eigenschaft steuern. Verwende höchstens eine Smooth-Scroll-Engine, und nur, wenn ihr Wert die Komplexität überwiegt.
Installiere keine Bibliotheken, modifiziere kein Projekt und implementiere nichts, bevor der Plan genehmigt ist. Wenn die Implementierung autorisiert ist, erkläre jede Stack- oder Asset-Hinzufügung, bevor du sie vornimmst, und respektiere den Paketmanager und die Lock-Datei des Projekts.
Ehrlich verifizieren
Verwende verification.md für Implementierungs- oder Review-Arbeiten. Überprüfe mobile und Desktop-Screenshots, Interaktionszustände, Touch, Tastatur, Fokus, reduzierte Bewegung, statische Fallbacks, Lade- und Fehlerverhalten, Performance-Nachweise und Aufräumverhalten im Verhältnis zur Änderung.
Berichte genau, was ausgeführt wurde, was bestanden hat, was visuell inspiziert wurde und was noch nicht verifiziert ist. Gib niemals vor, dass ein Build, Browser-Test, Barrierefreiheits-Check, Gerätetest oder Performance-Messung durchgeführt wurde, wenn dies nicht der Fall ist.
Quellenangabe
Die Anleitung ist eine originäre Synthese. Konsultiere sources.md für autoritative Dokumentation und klar gekennzeichnete Community-Inspiration. Installiere oder führe keinen Drittanbieter-Skill-Code über dieses Skill aus.