alvinindra/modern-frontend-skills

Modern Frontend — Pack Router

Das Paket enthält sechs Richtungen. Jede basiert auf demselben handwerklichen Fundament (dem Emil-Kowalski-Animationskanon + dem Slop-Filter), beantwortet aber eine andere Designfrage. Die Aufgabe des Routers ist es, schnell die richtige auszuwählen und sich dann zurückzuziehen.

Die Identität des Pakets ist nicht „allgemeiner Geschmack". Sie ist spezifisch: die kinematische Zuversicht von Louis Paquet / Locomotive + die unsichtbare Handwerkskunst von Emil Kowalski. Jede Richtung ist auf diese Achse abgestimmt. Seiten, die mit diesem Paket gebaut werden, sollten sich gleichzeitig inszeniert (Louis Paquet) und handwerklich ausgefeilt (Emil Kowalski) anfühlen.

---

Die sechs Richtungen

Direction	Beantwortete Frage
cinematic-scroll	„Wie mache ich das Produkt zur Geschichte der Seite?“
motion-bento	„Wie zeige ich eine funktionierende Produktoberfläche im Marketing-Kontext?“
publication	„Wie bringe ich die Seite dazu, sich wie ein gestalteter Artikel zu lesen?“
nightside	„Wie bringe ich diese Marke dazu, sich nach Feierabend, durchdacht und nicht aufdringlich anzufühlen?“
modernist-grid	„Wie lasse ich Typografie und Raster die ganze Arbeit machen?“
considered-modern	„Wie lese ich diese Seite warm und professionell, nicht wie ein kaltes Startup?“

Eine Richtung wird gewählt, nicht ausgehandelt. Das Paket produziert keine Hybrid-Ausgabe, es sei denn, der Benutzer fordert dies explizit an.

---

Die Richtung wählen

Der Router entscheidet in dieser Reihenfolge:

1. Explizite Nennung. Gibt der Benutzer cinematic-scroll, motion-bento, publication, nightside, modernist-grid oder considered-modern ein, wird dorthin geroutet. Auch nahe Formulierungen werden akzeptiert – siehe § Aliase unten.
2. Phrasensignale. Verwendet der Benutzer eine der unten in § Phrasen-Routing aufgeführten Signalphrasen, wird zur passenden Richtung geroutet.
3. Brief-Inferenz. Lese das Briefing – Produkt, Zielgruppe, Stimmung, Dichte, Energie – und wähle die beste Übereinstimmung anhand der § Inferenzregeln.

Der Router fragt den Benutzer nicht, aus einem Menü zu wählen. Er wählt und erklärt die Wahl in einem Satz am Anfang der Ausgabe („Gehe zu nightside – die Marke verlangt nach nächtlicher Zuversicht statt Startup-Politur.“).

Aliase

• cinematic, cinematic product, scrolltell, product launch, immersive → cinematic-scroll
• bento, premium bento, motion engine, SaaS feature grid, archetype bento → motion-bento
• editorial, editorial premium, magazine, publication, design journal → publication
• dark luxe, dark luxury, moody premium, late night UI, after hours → nightside
• swiss, swiss system, swiss design, modernist, grid system, typographic poster → modernist-grid
• warm modern, humane modern, studio site, professional services → considered-modern

Phrasen-Routing (kein expliziter Name)

• „product launch" / „hardware" / „scroll-driven" / „feels like a film" → cinematic-scroll
• „SaaS landing" / „feature section" / „AI product page" / „bento" → motion-bento
• „magazine" / „image-led" / „publication" / „design studio" → publication
• „dark" + „premium" / „restaurant" / „hospitality" / „exclusive" → nightside
• „rational" / „grid" / „Swiss" / „typographic poster" / „institutional" → modernist-grid
• „professional services" / „agency site" / „warm" / „consultancy" / „studio" → considered-modern

Inferenzregeln (bei vagen Briefings)

• Starker narrativer Bogen + Produkt als Protagonist → cinematic-scroll
• Zeigen, was das Produkt tut, in miniaturisierten Oberflächen → motion-bento
• Typografie-getrieben mit kuratierter Bildsequenzierung → publication
• Stimmungsgetrieben mit tiefem Negativraum → nightside
• Rastergetrieben mit struktureller Farbe → modernist-grid
• Studio-Stimme mit echter Fotografie → considered-modern

Wenn zwei Richtungen zu konkurrieren scheinen, wähle diejenige, die besser zur Markensouveränität passt: Eine Premium-Uhrenmarke möchte wahrscheinlich nightside, nicht motion-bento. Ein B2B-Observability-Tool möchte motion-bento, nicht cinematic-scroll.

---

Das Zwei-Schichten-Modell des Pakets

Jede Ausgabe ist das Produkt von zwei Schichten, die in dieser Reihenfolge angewandt werden:

Schicht 1 — Richtung

Die skill.md des gewählten Stilordners ist das Design-Briefing. Sie definiert:

• Die Skalenkalibrierung (Varianz / Bewegung / Dichte-Baseline) für diese Richtung.
• Die drei charakteristischen Moves, die diese Richtung erkennbar machen.
• Die Materialien: Typografie, Farbe, Layout, Oberflächenbehandlung.
• Die für diese Richtung angemessene Bewegungschoreografie.
• Die Erkennungsmerkmale für falsche Stile (richtungsspezifische Slop-Signale).
• Ein Referenzartefakt zur Tonkalibrierung.

Schicht 2 — Handwerkskanon (universell)

Zwei Dateien gelten für jede Ausgabe unabhängig von der Richtung. Der Agent liest sie, nachdem er die Richtung gewählt hat:

• references/animation.md — der Emil-Kowalski-Animationskanon. Entscheidungsrahmen (Easing zuerst, Nutzbarkeitsrahmen, Häufigkeit, Zweck, Dauer), Easing-Kurven, die Handwerks-Checkliste (Button-Druck, Popover-Auslöser-Ursprung, scale(0.95)-Eingänge, asymmetrisches Timing, Gesten-Geschwindigkeit), Herkunftshinweise, welche Regeln direkt von Emil stammen und welche fähigkeitsoptimiert sind.
• references/forbidden.md — der Slop-Filter. Visuelle / typografische / Layout / Inhalts / Komponenten / React-Framer Anti-Patterns + die Vorschalt-Checkliste, die vor der Ausgabe bestanden werden muss.

So definiert das Paket „Premium" auf handwerklicher Ebene. Ein modernist-grid-Button drückt sich trotzdem bei :active. Ein publication-Popover skaliert trotzdem von seinem Auslöser. Die verbotenen Muster gelten gleichermaßen für alle sechs Richtungen.

---

Komponentenwissen — Dateien öffnen

Nach der Wahl einer Richtung konsultiert der Agent die gemeinsame Komponenten-Bibliotheksrecherche:

• components/style-recipes.md — Ordnet jede Richtung den spezifischen Mustern aus jeder Bibliothek zu, die sie verstärken (welche GSAP-Demos, welche Framer-Primitiven, welche Aceternity-Rezepte, welche 21st.dev-Komponenten). Diese zuerst öffnen.
• components/gsap-patterns.md — GSAP + ScrollTrigger + Lenis Rezepte für die kinematischen Richtungen.
• components/motion-libraries.md — Framer Motion Muster, React Bits Notizen, Aceternity UI Notizen (bei sorgfältiger Anwendung).
• components/component-libraries.md — 21st.dev Primitiven, shadcn Anpassungsregeln, Radix Popover-Ursprungsdurchsetzung.

Verwende diese als Recherche, nicht als Vorlagen. Alles, was roh eingefügt wird, liest sich wie ein Baukasten; passe es an die gewählte Richtung an.

---

Paketweite Sicherheitsregeln — bedingungslos angewandt

Diese hängen niemals von der Richtung oder dem Briefing ab. Sie gelten für jede Ausgabe.

• Keine Emojis. Nirgendwo – Code, Markup, Inhalt, Alternativtext. Verwende Phosphor- oder Radix-Icons.
• Abhängigkeitsprüfung. Vor dem Import von framer-motion, lucide-react, @phosphor-icons/react, @radix-ui/react-icons, zustand usw. package.json prüfen. Wenn nicht vorhanden, zuerst den Installationsbefehl ausgeben.
• Tailwind-Versionssperre. package.json auf v3 vs. v4 prüfen.
• Viewport-Stabilität. Niemals h-screen. Immer min-h-[100dvh] für jede vollflächige Oberfläche.
• Icon-Familien-Sperre. Phosphor ODER Radix, nicht beides. Strichstärke 1,5 oder 2,0.
• Keine Inter, Roboto oder System-Sans als Identität.
• Kein reines #000000. Verwende abgestimmtes Off-Black.
• Das Lila-Verbot. Keine lila/blauen KI-Verlaufsglühen.
• Keine scale(0)-Eingänge. Immer scale(0.95) + opacity: 0.
• Kein ease-in bei UI. Immer ease-out mit benutzerdefiniertem cubic-bezier.

---

Die Qualitätsschwelle

Jede Ausgabe muss – unabhängig von der Richtung – diese Hürde nehmen:

• Könnte aus einem beliebigen Abschnitt als Screenshot herausgeschnitten werden und als absichtsvoll durchgehen.
• Würde sich auch ohne Logo noch spezifisch anfühlen. Wenn eine andere Marke ohne Spannung einwechseln könnte, ist die Arbeit fehlgeschlagen.
• Enthält echte visuelle Medien (Fotografie, Renderings, Illustrationen) im Hero oder den ersten beiden Abschnitten, wenn Bilder hilfreich wären.
• Behandelt „visuelle Medien" als echte Bilder, nicht als Verläufe / Partikel / Shader.
• Enthält Interaktionszustände (Loading, Empty, Error, Hover, Focus, Active), die zum Tempo der Richtung passen.
• Besteht das Pre-Flight in references/forbidden.md, bevor es als fertig erklärt wird.

---

Wenn das Briefing breit ist

Der Router wählt die stärkste plausible Richtung und bekennt sich. Er taktiert nicht.

Wenn das Briefing zwischen zwei Richtungen mehrdeutig ist, geht die Wahl an diejenige, die besser die Souveränität der Marke bewahrt. Eine handwerkliche Marke geht zu cinematic-scroll oder nightside vor motion-bento. Eine B2B-Plattform geht zu motion-bento oder modernist-grid vor publication.

Wenn das Briefing so breit ist, dass es zu keiner Richtung gut passt, ist das selbst das Signal: Das Briefing muss vor dem Code geschärft werden. Stelle eine klärende Frage, dann bekenne dich.

---

Paketbeispiele — für den Ton, nicht für den Inhalt

Zwei Referenzartefakte befinden sich in examples/:

• examples/cinematic-landing.html — Maris & Co., Segelmacher in Newport seit 1947. Eine cinematic-scroll-Seite durchgängig: asymmetrischer Kopf, klebriger Brief, Inventory-Bento, tiefmarineblau Zitat, magnetischer CTA, Colophon-Footer, Drei-Akt-Tempo.
• examples/bento-saas.tsx — Morse, Sound-Design-Bibliothek-Workflow für Game-Studios. Eine motion-bento-Seite mit allen fünf Archetypen.

Lies diese zur Tonkalibrierung. Kopiere nicht wörtlich. Jede Seite muss ihre eigene Welt erschaffen.