maylogger/roc-aesthetic

華國美學 UIUX Skill (ROC-Ästhetik UIUX Skill)

roc-aesthetic bleibt die interne Skill-ID für Routing und Installation.

Verwende diese Datei als alleinigen Einstiegspunkt für die Generierung, Modifikation, Überprüfung und Stildiagnose von Frontend-UI/UX im Stil der taiwanesischen「華國美學」(ROC-Ära).

Diese Skill ist für Agenten gedacht, die Oberflächen erschaffen müssen, die sich anfühlen wie taiwanesische öffentliche Informationssysteme, alte Portalseiten, Low-Budget-Ankündigungsseiten, gepatchte, vom Lieferanten gewartete Dashboards und improvisierte bürgerliche visuelle Schichten.

Es ist kein Nostalgiefilter, Parodie-Generator oder eine Maschine für willkürlich kaputte UIs. Es ist eine Design-Disziplin:

• Bewahre dichte, operative Informationsstrukturen
• Wähle Tabellen, Frames, Seitenleisten und umrandete Abschnitte vor sauberen Karten
• Füge kleine, angesammelte Inkonsistenzen ein, ohne die Benutzerfreundlichkeit zu beeinträchtigen
• Schreibe aufrichtiges bürokratisches Traditionell Chinesisch, wenn UI-Text benötigt wird
• Lehne moderne SaaS-Ästhetik ab, es sei denn, der Benutzer fordert sie ausdrücklich an

Intent Routing

Klassifiziere zuerst die Anfrage des Benutzers, öffne dann die kleinste nützliche Menge an Regeldateien und folge ihr. Verwende Glob, um Dateien aufzulösen, damit die Skill sowohl bei globaler Installation als auch bei Nutzung aus diesem Repository funktioniert. Nimm keinen absoluten Pfad an.

Kern-Einstiegsdateien:

• Jede Frontend-UI-Generierung, -Modifikation oder -Überprüfung -> Glob **/SYSTEM_PROMPT.md, dann Glob **/prompts/style.md
• Philosophie / warum dies keine Parodie werden sollte -> Glob **/rules/philosophy.md
• Anti-Modernismus / Negativ-Prompt / SaaS-Ästhetik entfernen -> Glob **/rules/anti-modernism.md

Visuelle und Interaktionsdimensionen:

• Layout / Seitenstruktur / Dashboard / Portal / Navigation -> Glob **/rules/layout.md
• Abstände / Dichte / unangenehmer Rhythmus / inkonsistente Lücken -> Glob **/rules/spacing.md
• Mikro-Unvollkommenheiten / 1px-Versatz / Patched-Legacy-Gefühl -> Glob **/rules/micro-imperfections.md
• Typografie / Schriftstapel / gezackter Text / WordArt-Überschrift -> Glob **/rules/typography.md
• Farbpalette / ROC-Blau / Warn-Gelb / Gleichfarben-Versatz -> Glob **/rules/colors.md
• Buttons / glänzend / abgeschrägt / Alt-System-Steuerelemente -> Glob **/rules/buttons.md
• Tabellen / administrative Raster / dichte Zeilen -> Glob **/rules/tables.md
• Banner / Ankündigungsstreifen / Ticker / Kampagnen-Header -> Glob **/rules/banners.md
• Bildmaterial / niedrige Auflösung / komprimiert / unbeholfene Zuschnitte -> Glob **/rules/imagery.md

Copywriting:

• Jeglicher UI-Text, Lokalisierung, Labels, Slogans, Hinweise, CTA-Formulierungen oder Traditionell Chinesischer Text -> Glob **/rules/copywriting.md

Routing-Regeln

1. Antworte nicht allein aus dieser Datei, wenn eine passende Regeldatei existiert.
2. Öffne SYSTEM_PROMPT.md und prompts/style.md vor umfangreichen Frontend-UI-Arbeiten.
3. Öffne rules/copywriting.md immer dann, wenn sichtbarer UI-Text generiert, übersetzt oder umgeschrieben wird.
4. Für kombinierte UI-Aufgaben lies nur die Regeldateien, die für die angeforderte Oberfläche benötigt werden. Beispiel: Eine Landingpage einer Regierungsbehörde mit Formularen sollte Layout, Abstände, Typografie, Farben, Buttons, Tabellen, Banner und Copywriting verwenden.
5. Wenn der Benutzer um eine Überprüfung bittet, diagnostiziere, wo die UI zu modern, zu leer, zu konsistent oder zu ironisch geworden ist, bevor du Änderungen vorschlägst.
6. Wenn der Benutzer bittet, etwas „sauberer“ zu machen, bewahre die ROC-Ästhetik, es sei denn, er bittet ausdrücklich darum, den Stil zu verlassen. Sauberer bedeutet lesbarer und operativer, nicht mehr Vercel/Stripe/Linear.
7. Wenn der Benutzer eine bestehende UI bereitstellt, modifiziere sie direkt und verstärke den Stil durch lokale Entscheidungen: dichtere Gruppierung, mehr administrative Labels, tabellenartige Strukturen, subtile Fehlausrichtung, Legacy-Farbbehandlung und aufrichtigen bürokratischen Text.
8. Erstelle keine absichtlich unbenutzbare UI.「糙但能用」gewinnt über zufällige Defekte.
9. Verwandle die Ästhetik nicht in Internet-Retro-Parodie, Meme-taiwanesische-Regierungs-Cosplay oder Witz-Text. Der Ton muss aufrichtig bleiben.

Arbeitsdateien

Suche im Arbeitsverzeichnis nach:

• SYSTEM_PROMPT.md – kanonischer System-Prompt und Qualitätsmaßstab
• prompts/style.md – kompaktes Style-Briefing
• rules/philosophy.md – Designphilosophie und historische Haltung
• rules/anti-modernism.md – Negativ-Prompt für moderne Ästhetik
• rules/layout.md – Anleitung für mehrspaltige, gerahmte, ankündigungsreiche Layouts
• rules/spacing.md – Anleitung für dichte, inkonsistente, lieferantengepatchte Abstände
• rules/micro-imperfections.md – Anleitung für kontrollierte 0,1px-1px-Unvollkommenheiten
• rules/typography.md – Schriftstapel alter Systeme, gezackter Text, WordArt-Überschriften
• rules/colors.md – ROC-Blau, gesättigtes Rot, Gelb, Silber, billiges Gold, Gleichfarben-Versatz
• rules/buttons.md – glänzende, abgeschrägte, Windows-XP-ähnliche Button-Behandlung
• rules/tables.md – Behandlung administrativer Tabellen und Raster
• rules/banners.md – gestapelte Banner, Ankündigungsstreifen, tickerartige Oberflächen
• rules/imagery.md – Behandlung komprimierter, unbeholfen zugeschnittener, Low-Budget-Bilder
• rules/copywriting.md – Anleitung für bürokratischen UI-Text in Traditionellem Chinesisch
• README.md – Zusammenfassung auf Repository-Ebene
• .cursorrules und CLAUDE.md – Notizen zur Workspace-Integration

Fehlt eine Datei, fahre mit der nächstverfügbaren Regeldatei fort und gib an, welche Anleitung nicht verfügbar war, wenn dies das Ergebnis wesentlich beeinflusst.

Stil-Invarianten

Jede ROC-Ästhetik-UI sollte diese Invarianten bewahren:

• Dichte vor Weißraum.
• Tabellen vor Karten.
• Administrative Rahmen, graue Trennlinien, verschachtelte Boxen und sichtbare Abschnittsrahmen.
• Mehrspaltige Layouts, Seitenleisten, wiederholte Navigation und ankündigungsreiche Struktur.
• ROC-Blau, gesättigtes Rot, Warn-Gelb, Silberverläufe, dunkles Grau, helle Cyan-Links und gelegentlich billiges Gold.
• Gemischte Schriftstapel alter Systeme: MingLiU, PMingLiU, DFKai-SB, Microsoft JhengHei, Arial, Tahoma.
• Leichte Inkonsistenzen bei Padding, Margin, Rahmenstärke, Hover-Zustand, Schriftbetonung und Ausrichtung.
• UI-Text, der formell, repetitiv, übererklärend und aufrichtig serviceorientiert wirkt.
• Operative Klarheit: Benutzer können weiterhin lesen, klicken, scannen, absenden und die Aufgabe erledigen.

Verbotene Vorgaben

Sofern der Benutzer nicht ausdrücklich etwas anderes verlangt, generiere nicht:

• Apple-ähnlichen Minimalismus
• Stripe-, Linear-, Vercel-, Fintech- oder moderne SaaS-Landingpage-Ästhetiken
• Überdimensionierten Weißraum, luftige Hero-Bereiche und Drei-Karten-Feature-Layouts
• Premium-Typografie, luxuriöse redaktionelle Art Direction oder makellose Designsysteme
• Perfekt gleichmäßige 4px/8px-Abstandsskalen
• Glatte monochrome Dashboards, die aussehen, als wären sie kürzlich finanziert worden
• Zufällig kaputte UX, unlesbare Kontraste oder fake-deaktivierte Interaktionen
• Parodie-Texte, Meme-Referenzen oder sarkastische Retro-Witze

Wähle im Zweifelsfall「醜一點但真誠的官僚維運系統」(ein bisschen hässlicher, aber aufrichtiges bürokratisches Wartungssystem) über「漂亮但現代的新創介面」(schönes, aber modernes Startup-Interface).

Werkzeugoberfläche

Diese zentrale SKILL.md deklariert nur die schreibgeschützten Werkzeuge, die sie verwendet:

• Read zum Öffnen der passenden Prompt- und Regeldateien
• Glob zum Auflösen von Dateipfaden über globale Skill-Installationen und Repository-Kopien hinweg
• Grep zum Auffinden bestimmter Regeln oder Begriffe, wenn der Benutzer nach einer engen Design-Dimension fragt

Diese Skill benötigt selbst keine Schreibberechtigungen. Der Host-Coding-Agent kann weiterhin Projektdateien bearbeiten, wenn die Aufgabe des Benutzers eine Implementierung ist, aber das eigene Routing und die Regelauswahl dieser Skill sind schreibgeschützt.

Ausgabe-Disziplin

Bei der Anwendung dieser Skill:

1. Fundiere Empfehlungen in den Regeldateien, nicht im persönlichen Geschmack.
2. Bevorzuge konkrete UI-Änderungen gegenüber abstrakten Adjektiven.
3. Verwende Traditionelles Chinesisch für Kommentare und benutzerorientierte Erklärungen, wenn angemessen.
4. Wenn du Code schreibst, behalte das bestehende Framework und den Komponentenstil bei; injiziere ROC-Ästhetik durch Layout, CSS, Markup-Dichte, Text und kleine kontrollierte Inkonsistenzen.
5. Wenn du eine Designbibliothek verwendest, widerstehe ihrer voreingestellten Premium-Sauberkeit. Überschreibe Abstände, Rahmen, Typografie, Farben und Komponentenrhythmus.
6. Bewahre Barrierefreiheit und grundlegende Benutzerfreundlichkeit, auch wenn du die Oberfläche visuell ungeschickt machst.

Rangfolge und Konflikte

Wenn Anleitungen widersprüchlich sind, verwende diese Reihenfolge:

1. Diese zentrale SKILL.md – Routing, Invarianten und globale Disziplin
2. SYSTEM_PROMPT.md – kanonische ästhetische Haltung und Qualitätsmaßstab
3. prompts/style.md – kompaktes Generierungs-Briefing für die eigentliche UI-Arbeit
4. rules/copywriting.md – sichtbarer UI-Text und Traditionelles Chinesisch Copy
5. rules/*.md – dimensionsspezifische visuelle und Layout-Regeln
6. .cursorrules, CLAUDE.md und Repository-README – Workspace- und Projektebene-Erinnerungen

Wenn eine Regel die UI unbenutzbar machen würde, bewahre die Benutzerfreundlichkeit und wende stattdessen eine mildere ROC-Behandlung an. Wenn eine moderne Komponentenvorgabe mit dieser Skill in Konflikt gerät, gewinnt diese Skill, es sei denn, der Benutzer fordert ausdrücklich den modernen Stil.