Frontend-Design
Überblick
Diese öffentliche Aufnahme-Kopie paketiert packages/skills-catalog/skills/(design)/frontend-design aus https://github.com/tech-leads-club/agent-skills in die native Omni-Skills-Redaktionsform, ohne dessen Herkunft zu verbergen.
Verwende sie, wenn der Betreiber den vorgelagerten Workflow, die Support-Dateien und den Repository-Kontext intakt halten muss, während der öffentliche Validator und der private Verbesserer ihren normalen nachgelagerten Fluss fortsetzen.
Diese Aufnahme bewahrt die kopierten vorgelagerten Dateien unverändert und verwendet den external_source-Block in metadata.json sowie ORIGIN.md als Herkunftsanker für die Überprüfung.
Dieser Skill führt zur Erstellung unverwechselbarer, produktionsreifer Frontend-Oberflächen, die generische „KI-Ästhetik“ vermeiden. Implementiere echten funktionierenden Code mit außergewöhnlicher Liebe zum ästhetischen Detail und kreativen Entscheidungen.
Importierte Quellabschnitte, die sich nicht sauber auf die öffentlichen Überschriften abbilden ließen, sind unten oder in den Support-Dateien erhalten. Bemerkenswerte importierte Abschnitte: Design-Richtung, Der KI-Slop-Test.
Wann dieser Skill verwendet werden sollte
Verwende diesen Abschnitt als Auslöser-Filter. Er soll die Aktivierungsgrenze explizit machen, bevor der Betreiber Dateien lädt, Befehle ausführt oder einen Pull-Request öffnet.
- Verwende, wenn die Anfrage klar der Absicht der importierten Quelle entspricht: Erstelle unverwechselbare, produktionsreife Frontend-Oberflächen mit hoher Designqualität. Verwende diesen Skill, wenn der Nutzer Webkomponenten, Seiten, Artefakte, Poster oder Anwendungen bauen möchte. Erzeugt kreativen, ausgefeilten...
- Verwende, wenn der Betreiber die Details des vorgelagerten Workflows bewahren soll, anstatt den Prozess von Grund auf neu zu schreiben.
- Verwende, wenn die Herkunft in der Antwort, im PR oder im Überprüfungspaket sichtbar bleiben muss.
- Verwende, wenn kopierte vorgelagerte Referenzen, Beispiele oder Skripte die Antwort wesentlich verbessern.
- Verwende, wenn der Workflow im öffentlichen Aufnahme-Repository überprüfbar bleiben soll, bevor der private Verbesserer übernimmt.
Arbeitstabelle
| Situation | Starte hier | Warum es wichtig ist |
|---|---|---|
| Erste Nutzung | metadata.json | Bestätigt Repository, Branch, Commit und importierten Pfad durch den external_source-Block, bevor der kopierte Workflow berührt wird |
| Herkunftsprüfung | ORIGIN.md | Gibt Prüfern einen Audit-Trail in Klartext für die importierte Quelle |
| Workflow-Ausführung | references/color-and-contrast.md | Beginnt mit der kleinsten kopierten Datei, die die Ausführung materiell verändert |
| Unterstützender Kontext | references/interaction-design.md | Fügt die nächstrelevanteste kopierte Quelldatei hinzu, ohne das gesamte Paket zu laden |
| Übergabeentscheidung | ## Verwandte Skills | Hilft dem Betreiber, zu einem stärkeren nativen Skill zu wechseln, wenn die Aufgabe abweicht |
Workflow
Dieser Workflow ist bewusst sowohl redaktionell als auch operativ. Er hält die importierte Quelle für den Betreiber nützlich, während er gleichzeitig die öffentlichen Aufnahmestandards erfüllt, die den nachgelagerten Verbesserungsfluss speisen.
- Bestätige das Nutzerziel, den Umfang des importierten Workflows und ob dieser Skill noch der richtige Router für die Aufgabe ist.
- Lies die Übersichts- und Herkunftsdateien, bevor du kopierte vorgelagerte Support-Dateien lädst.
- Lade nur die Referenzen, Beispiele, Prompts oder Skripte, die das Ergebnis für die aktuelle Anfrage materiell verändern.
- Führe den vorgelagerten Workflow aus, während du die Herkunft und Quellengrenzen in den Arbeitsnotizen explizit hältst.
- Validiere das Ergebnis gegen die Erwartungen der vorgelagerten Quelle und die Beweise, auf die du in den kopierten Dateien verweisen kannst.
- Eskaliere oder übergib an einen verwandten Skill, wenn die Arbeit den Schwerpunkt dieses importierten Workflows verlässt.
- Halte vor dem Merge oder Abschluss fest, was verwendet wurde, was sich geändert hat und was der Prüfer noch verifizieren muss.
Importierte Workflow-Notizen
Importiert: Design-Richtung
Verpflichte dich zu einer KÜHNEN ästhetischen Richtung:
- Zweck: Welches Problem löst diese Oberfläche? Wer nutzt sie?
- Ton: Wähle ein Extrem: brutalistisch minimalistisch, maximalistisches Chaos, retro-futuristisch, organisch/natürlich, luxuriös/verfeinert, verspielt/spielzeugartig, redaktionell/magazinartig, brutalistisch/roh, Art Deco/geometrisch, weich/pastellig, industriell/zweckmäßig, usw. Es gibt so viele Geschmacksrichtungen zur Auswahl. Verwende diese zur Inspiration, aber gestalte eine, die der ästhetischen Richtung treu ist.
- Einschränkungen: Technische Anforderungen (Framework, Leistung, Barrierefreiheit).
- Differenzierung: Was macht dies UNVERGESSLICH? Was ist die eine Sache, an die sich jemand erinnern wird?
KRITISCH: Wähle eine klare konzeptionelle Richtung und führe sie mit Präzision aus. Kühner Maximalismus und verfeinerter Minimalismus funktionieren beide – der Schlüssel ist Intentionalität, nicht Intensität.
Implementiere dann funktionierenden Code, der:
- Produktionsreif und funktional ist
- Visuell auffällig und einprägsam ist
- Kohärent mit einem klaren ästhetischen Standpunkt ist
- Akribisch in jedem Detail verfeinert ist
Beispiele
Beispiel 1: Den vorgelagerten Workflow direkt anfragen
Verwende @frontend-design, um <Aufgabe> zu erledigen. Beginne mit dem kopierten vorgelagerten Workflow, lade nur die Dateien, die das Ergebnis verändern, und halte die Herkunft in der Antwort sichtbar.
Erklärung: Dies ist der sicherste Ausgangspunkt, wenn der Betreiber den importierten Workflow, aber nicht das gesamte Repository benötigt.
Beispiel 2: Eine herkunftsbasierte Überprüfung anfordern
Überprüfe @frontend-design anhand von metadata.json und ORIGIN.md, erkläre dann, welche kopierten vorgelagerten Dateien du zuerst laden würdest und warum.
Erklärung: Verwende dies vor einer Überprüfung oder Fehlerbehebung, wenn du eine präzise, prüfbare Erklärung von Herkunft und Dateiauswahl benötigst.
Beispiel 3: Die kopierten Support-Dateien vor der Ausführung eingrenzen
Verwende @frontend-design für <Aufgabe>. Lade nur die kopierten Referenzen, Beispiele oder Skripte, die das Ergebnis verändern, und benenne die Dateien explizit, bevor du fortfährst.
Erklärung: Dies hält den Skill an der progressiven Offenlegung ausgerichtet, anstatt standardmäßig das gesamte kopierte Paket zu laden.
Beispiel 4: Ein Prüfer-Paket erstellen
Überprüfe @frontend-design unter Verwendung der kopierten vorgelagerten Dateien plus Herkunftsnachweis und fasse dann etwaige Lücken vor dem Merge zusammen.
Erklärung: Dies ist nützlich, wenn der PR auf menschliche Überprüfung wartet und du ein wiederholbares Audit-Paket haben möchtest.
Importierte Nutzungshinweise
Importiert: Beispiele
Beispiel 1: Landingpage mit starker Ästhetik
Benutzer sagt: „Erstelle eine Landingpage für ein Entwickler-Tool-Produkt, etwas, das nicht wie jedes andere SaaS aussieht.“ Aktionen: Wähle eine kühne Richtung (z. B. brutalistisch oder redaktionell); wähle eine unverwechselbare Schriftkombination und eine kohärente Palette; implementiere mit fließenden Abständen und einem klaren Fokuspunkt; vermeide Karten-in-Karten und Heldenmetrik-Klischees. Ergebnis: Ein einseitiges Layout mit klarer Hierarchie, einprägsamer Typografie und keinen generischen KI-Merkmalen (keine violetten Verläufe, keine abgerundeten Karten mit dicken Akzenträndern).
Beispiel 2: Dashboard oder App-UI
Benutzer sagt: „Erstelle ein Dashboard zur Anzeige von Analysen mit einem dunklen Thema.“ Aktionen: Verpflichte dich zu einer bestimmten dunklen Ästhetik (z. B. verfeinertes Dunkel mit getönten Neutraltönen, nicht default Leuchten-auf-Schwarz); verwende Container-Queries für Panels; füge einen durchdachten Bewegungsmoment hinzu (z. B. gestaffelter Listen-Ladevorgang); stelle sicher, dass leere Zustände hilfreich sind. Ergebnis: Funktionales Dashboard, das sich absichtlich gestaltet anfühlt – unverwechselbare Palette, kein Cyan/Lila-Leuchten, klare Datenhierarchie und reaktionsfähiges Verhalten.
Beispiel 3: Poster oder Marketing-Artefakt
Benutzer sagt: „Erstelle ein Poster für einen Konferenzvortrag über Frontend-Leistung.“ Aktionen: Wähle ein starkes typografisches oder visuelles Konzept; verwende eine modulare Schriftgrößenskala und eine begrenzte Palette; vermeide generisches Stockfoto + Überschriften-Layout. Ergebnis: Ein Poster, das als gestaltetes Artefakt eigenständig bestehen könnte – einprägsame Schrift und Komposition, keine Vorlagenfüllung.
Best Practices
Behandle den generierten öffentlichen Skill als überprüfbare Verpackungsschicht um das vorgelagerte Repository. Das Ziel ist es, die Herkunft explizit zu halten und nur das kopierte Quellmaterial zu laden, das die Ausführung materiell verbessert.
-
Typografie → Konsultiere die Typografie-Referenz für Skalen, Paarungen und Ladestrategien.
- Wähle Schriften, die schön, einzigartig und interessant sind.
- Kombiniere eine unverwechselbare Auszeichnungsschrift mit einer verfeinerten Fließtextschrift.
- TUN: Verwende eine modulare Schriftgrößenskala mit fließender Größenanpassung (clamp) TUN: Variiere Schriftstärken und -größen, um eine klare visuelle Hierarchie zu schaffen NICHT TUN: Übernutzte Schriften verwenden – Inter, Roboto, Arial, Open Sans, Systemstandards NICHT TUN: Monospace-Typografie als bequeme Abkürzung für „technisch/Entwickler“-Vibes verwenden NICHT TUN: Große Symbole mit abgerundeten Ecken über jede Überschrift setzen – sie fügen selten Wert hinzu und lassen Seiten schablonenhaft wirken ### Farbe & Thema → Konsultiere die Farbreferenz für OKLCH, Paletten und Dark Mode.
- Verpflichte dich zu einer kohärenten Palette.
- Dominante Farben mit scharfen Akzenten übertreffen schüchterne, gleichmäßig verteilte Paletten.
- TUN: Moderne CSS-Farbfunktionen verwenden (oklch, color-mix, light-dark) für wahrnehmungsuniforme, wartbare Paletten TUN: Deine Neutraltöne in Richtung deines Markenfarbtons tönen – selbst ein subtiler Hinweis erzeugt unterbewusste Kohäsion NICHT TUN: Grauen Text auf farbigen Hintergründen verwenden – er wirkt ausgewaschen; stattdessen einen Farbton der Hintergrundfarbe verwenden NICHT TUN: Reines Schwarz (#000) oder reines Weiß (#fff) verwenden – immer tönen; reines Schwarz/Weiß kommt in der Natur nie vor NICHT TUN: Die KI-Farbpalette verwenden: Cyan-auf-Dunkel, Lila-zu-Blau-Verläufe, Neon-Akzente auf dunklen Hintergründen NICHT TUN: Verlaufstext für „Wirkung“ verwenden – besonders bei Metriken oder Überschriften; es ist dekorativ statt bedeutungsvoll NICHT TUN: Standardmäßig den Dark Mode mit leuchtenden Akzenten verwenden – es sieht „cool“ aus, ohne dass tatsächliche Designentscheidungen getroffen werden müssen ### Layout & Raum → Konsultiere die räumliche Referenz für Raster, Rhythmus und Container-Queries.
Importierte Betriebshinweise
Importiert: Frontend-Ästhetik-Richtlinien
Typografie
→ Konsultiere Typografie-Referenz für Skalen, Paarungen und Ladestrategien.
Wähle Schriften, die schön, einzigartig und interessant sind. Kombiniere eine unverwechselbare Auszeichnungsschrift mit einer verfeinerten Fließtextschrift.
TUN: Verwende eine modulare Schriftgrößenskala mit fließender Größenanpassung (clamp) TUN: Variiere Schriftstärken und -größen, um eine klare visuelle Hierarchie zu schaffen NICHT TUN: Übernutzte Schriften verwenden – Inter, Roboto, Arial, Open Sans, Systemstandards NICHT TUN: Monospace-Typografie als bequeme Abkürzung für „technisch/Entwickler“-Vibes verwenden NICHT TUN: Große Symbole mit abgerundeten Ecken über jede Überschrift setzen – sie fügen selten Wert hinzu und lassen Seiten schablonenhaft wirken
Farbe & Thema
→ Konsultiere Farbreferenz für OKLCH, Paletten und Dark Mode.
Verpflichte dich zu einer kohärenten Palette. Dominante Farben mit scharfen Akzenten übertreffen schüchterne, gleichmäßig verteilte Paletten.
TUN: Moderne CSS-Farbfunktionen verwenden (oklch, color-mix, light-dark) für wahrnehmungsuniforme, wartbare Paletten TUN: Deine Neutraltöne in Richtung deines Markenfarbtons tönen – selbst ein subtiler Hinweis erzeugt unterbewusste Kohäsion NICHT TUN: Grauen Text auf farbigen Hintergründen verwenden – es wirkt ausgewaschen; stattdessen einen Farbton der Hintergrundfarbe verwenden NICHT TUN: Reines Schwarz (#000) oder reines Weiß (#fff) verwenden – immer tönen; reines Schwarz/Weiß kommt in der Natur nie vor NICHT TUN: Die KI-Farbpalette verwenden: Cyan-auf-Dunkel, Lila-zu-Blau-Verläufe, Neon-Akzente auf dunklen Hintergründen NICHT TUN: Verlaufstext für „Wirkung“ verwenden – besonders bei Metriken oder Überschriften; es ist dekorativ statt bedeutungsvoll NICHT TUN: Standardmäßig den Dark Mode mit leuchtenden Akzenten verwenden – es sieht „cool“ aus, ohne dass tatsächliche Designentscheidungen getroffen werden müssen
Layout & Raum
→ Konsultiere Räumliche Referenz für Raster, Rhythmus und Container-Queries.
Erzeuge visuellen Rhythmus durch unterschiedliche Abstände – nicht überall die gleiche Polsterung. Nutze Asymmetrie und unerwartete Kompositionen. Brich das Raster bewusst für Betonung.
TUN: Visuellen Rhythmus durch unterschiedliche Abstände erzeugen – enge Gruppierungen, großzügige Trennungen TUN: Fließende Abstände mit clamp() verwenden, die auf größeren Bildschirmen atmen TUN: Asymmetrie und unerwartete Kompositionen nutzen; das Raster bewusst für Betonung brechen NICHT TUN: Alles in Karten verpacken – nicht alles braucht einen Behälter NICHT TUN: Karten in Karten verschachteln – visuelles Rauschen, die Hierarchie abflachen NICHT TUN: Identische Kartenraster verwenden – gleich große Karten mit Symbol + Überschrift + Text, endlos wiederholt NICHT TUN: Das Heldenmetrik-Layout-Template verwenden – große Zahl, kleines Label, unterstützende Statistiken, Verlaufsakzent NICHT TUN: Alles zentrieren – linksbündiger Text mit asymmetrischen Layouts fühlt sich gestalteter an NICHT TUN: Überall den gleichen Abstand verwenden – ohne Rhythmus wirken Layouts eintönig
Visuelle Details
TUN: Intentionale, zweckgerichtete dekorative Elemente verwenden, die die Marke verstärken NICHT TUN: Glas-Morphismus überall verwenden – Unschärfeeffekte, Glaskarten, Leuchtränder dekorativ statt zweckgerichtet NICHT TUN: Abgerundete Elemente mit dickem farbigem Rand auf einer Seite – ein fauler Akzent, der fast nie absichtlich aussieht NICHT TUN: Sparklines als Dekoration verwenden – winzige Diagramme, die anspruchsvoll aussehen, aber nichts Sinnvolles vermitteln NICHT TUN: Abgerundete Rechtecke mit generischen Schlagschatten – sicher, vergessbar, könnte jede KI-Ausgabe sein NICHT TUN: Modale verwenden, es sei denn, es gibt wirklich keine bessere Alternative – Modale sind faul
Bewegung
→ Konsultiere Bewegungsreferenz für Timing, Beschleunigung und reduzierte Bewegung.
Konzentriere dich auf Momente mit hoher Wirkung: Ein gut orchestrierter Seitenladevorgang mit gestaffelten Enthüllungen erzeugt mehr Freude als verstreute Mikrointeraktionen.
TUN: Bewegung verwenden, um Zustandsänderungen zu vermitteln – Eintritte, Austritte, Feedback TUN: Exponentielle Beschleunigung verwenden (ease-out-quart/quint/expo) für natürliche Verzögerung TUN: Für Höhenanimationen Übergänge mit grid-template-rows verwenden, anstatt die Höhe direkt zu animieren NICHT TUN: Layout-Eigenschaften animieren (width, height, padding, margin) – nur transform und opacity verwenden NICHT TUN: Bounce- oder elastische Beschleunigung verwenden – sie fühlen sich veraltet und geschmacklos an; reale Objekte verlangsamen sich sanft
Interaktion
→ Konsultiere Interaktionsreferenz für Formulare, Fokus und Lademuster.
Lass Interaktionen schnell wirken. Verwende optimistische UI – sofort aktualisieren, später synchronisieren.
TUN: Progressive Offenlegung verwenden – einfach beginnen, Raffinesse durch Interaktion enthüllen (grundlegende Optionen zuerst, erweiterte hinter aufklappbaren Abschnitten; wie man...