maylogger/roc-aesthetic

Compétence UIUX « 華國美學 »

roc-aesthetic reste l'identifiant interne de la compétence pour le routage et l'installation.

Utilisez ce fichier comme point d'entrée unique pour la génération, la modification, la révision et le diagnostic de style d'interface utilisateur frontend de l'ère ROC taïwanaise「華國美學」.

Cette compétence est destinée aux agents qui doivent créer des interfaces évoquant les systèmes d'information publics taïwanais, les anciens portails, les pages d'annonces à petit budget, les tableaux de bord rapiécés par des fournisseurs et les couches visuelles civiques improvisées.

Ce n'est ni un filtre nostalgique, ni un générateur de parodie, ni une machine à UI cassée aléatoire. C'est une discipline de conception :

• préserver les structures d'information denses et opérationnelles
• choisir des tableaux, des cadres, des barres latérales et des sections bordées avant les cartes épurées
• introduire de petites incohérences accumulées sans nuire à la convivialité
• rédiger un texte d'interface en chinois traditionnel bureaucratique et sincère
• rejeter le polissage moderne des SaaS, sauf demande explicite de l'utilisateur

Routage des intentions

Classez d'abord la demande de l'utilisateur, puis ouvrez et suivez le plus petit ensemble utile de fichiers de règles. Résolvez les fichiers avec Glob pour que la compétence fonctionne qu'elle soit installée globalement ou utilisée depuis ce dépôt. Ne partez pas d'un chemin absolu.

Fichiers d'entrée principaux :

• Toute génération, modification ou révision d'interface frontend -> Glob **/SYSTEM_PROMPT.md, puis Glob **/prompts/style.md
• Philosophie / pourquoi cela ne doit pas devenir une parodie -> Glob **/rules/philosophy.md
• Anti-modernisme / prompt négatif / supprimer le polissage SaaS -> Glob **/rules/anti-modernism.md

Dimensions visuelles et d'interaction :

• Mise en page / structure de page / tableau de bord / portail / navigation -> Glob **/rules/layout.md
• Espacement / densité / rythme maladroit / écarts incohérents -> Glob **/rules/spacing.md
• Micro-imperfections / décalage d'1px / aspect rapiécé hérité -> Glob **/rules/micro-imperfections.md
• Typographie / pile de polices / texte irrégulier / titre WordArt -> Glob **/rules/typography.md
• Palette de couleurs / bleu ROC / jaune d'avertissement / dérive de tons -> Glob **/rules/colors.md
• Boutons / brillants / biseautés / contrôles d'anciens systèmes -> Glob **/rules/buttons.md
• Tableaux / grilles administratives / lignes denses -> Glob **/rules/tables.md
• Bannières / bandeaux d'annonces / ticker / en-tête de campagne -> Glob **/rules/banners.md
• Imagerie / basse résolution / compressée / recadrages maladroits -> Glob **/rules/imagery.md

Rédaction :

• Tout texte d'interface, localisation, étiquettes, slogans, avis, formulation CTA ou contenu en chinois traditionnel -> Glob **/rules/copywriting.md

Règles de routage

1. Ne répondez pas à partir de ce seul fichier lorsqu'un fichier de règles correspondant existe.
2. Ouvrez SYSTEM_PROMPT.md et prompts/style.md avant tout travail d'interface frontend conséquent.
3. Ouvrez rules/copywriting.md chaque fois que vous générez, traduisez ou réécrivez du texte d'interface visible.
4. Pour des tâches d'interface combinées, ne lisez que les fichiers de règles nécessaires à la surface demandée. Exemple : une page d'accueil de portail gouvernemental avec formulaires devrait utiliser mise en page, espacement, typographie, couleurs, boutons, tableaux, bannières et rédaction.
5. Si l'utilisateur demande une révision, diagnostiquez où l'interface est devenue trop moderne, trop vide, trop cohérente ou trop ironique avant de suggérer des changements.
6. Si l'utilisateur demande de rendre quelque chose « plus propre », préservez l'esthétique ROC sauf s'il demande explicitement de quitter ce style. Plus propre signifie plus lisible et opérationnel, pas plus Vercel/Stripe/Linear.
7. Si l'utilisateur fournit une interface existante, modifiez-la sur place et intensifiez le style par des choix locaux : regroupement plus dense, plus d'étiquettes administratives, structures de type tableau, désalignement subtil, traitement couleur hérité et texte bureaucratique sincère.
8. Ne créez pas d'interface volontairement inutilisable. « Rugueux mais fonctionnel » l'emporte sur une casse aléatoire.
9. Ne transformez pas l'esthétique en parodie rétro internet, en cosplay gouvernemental taïwanais mème, ou en texte humoristique. Le ton doit rester sincère.

Fichiers de travail

Regardez dans le répertoire de travail pour :

• SYSTEM_PROMPT.md - prompt système canonique et barre de qualité
• prompts/style.md - résumé de style compact unique
• rules/philosophy.md - philosophie de conception et posture historique
• rules/anti-modernism.md - prompt négatif pour le polissage moderne
• rules/layout.md - directives de mise en page multi-colonnes, cadrée et riche en annonces
• rules/spacing.md - directives d'espacement dense, incohérent et rapiécé par le fournisseur
• rules/micro-imperfections.md - directives d'imperfection contrôlée de 0,1 à 1 px
• rules/typography.md - piles de polices d'anciens systèmes, texte irrégulier, titre WordArt
• rules/colors.md - bleu ROC, rouge saturé, jaune, argent, or bon marché, dérive de tons
• rules/buttons.md - traitement des boutons brillants, biseautés, type Windows XP
• rules/tables.md - traitement des tableaux et grilles administratifs
• rules/banners.md - bannières empilées, bandeaux d'annonces, surfaces de type ticker
• rules/imagery.md - traitement d'images compressées, au recadrage maladroit et à petit budget
• rules/copywriting.md - directives de rédaction d'interface chinois traditionnel bureaucratique
• README.md - résumé au niveau du dépôt
• .cursorrules et CLAUDE.md - notes d'intégration de l'espace de travail

Si un fichier est manquant, continuez avec le fichier de règles disponible le plus proche et indiquez quelle directive n'était pas disponible lorsqu'elle affecte matériellement le résultat.

Invariants de style

Toute interface esthétique ROC doit préserver ces invariants :

• Densité avant espace vide.
• Tableaux avant cartes.
• Bordures administratives, séparateurs gris, boîtes imbriquées et cadres de section visibles.
• Mises en page multi-colonnes, barres latérales, navigation répétée et structure riche en annonces.
• Bleu ROC, rouge saturé, jaune d'avertissement, dégradés argentés, gris foncé, liens cyan vif et parfois or bon marché.
• Piles de polices d'anciens systèmes mélangées : MingLiU, PMingLiU, DFKai-SB, Microsoft JhengHei, Arial, Tahoma.
• Légère incohérence dans le remplissage, les marges, l'épaisseur des bordures, l'état de survol, l'emphase de la police et l'alignement.
• Texte d'interface formel, répétitif, trop explicatif et sincèrement orienté service.
• Clarté opérationnelle : les utilisateurs peuvent toujours lire, cliquer, parcourir, soumettre et accomplir la tâche.

Valeurs par défaut interdites

Sauf demande explicite de l'utilisateur, ne générez pas :

• Le minimalisme à l'Apple
• Les esthétiques de page d'accueil Stripe, Linear, Vercel, fintech ou SaaS moderne
• Les espaces blancs surdimensionnés, les sections héros aérées et les mises en page à trois cartes
• La typographie premium, la direction artistique éditoriale luxueuse ou les systèmes de design impeccables
• Les échelles d'espacement parfaitement uniformes de 4px/8px
• Les tableaux de bord monochromes lisses qui semblent fraîchement financés
• Les interactions cassées aléatoirement, les contrastes illisibles ou les interactions faussement désactivées
• Les textes parodiques, les références mèmes ou les blagues rétro sarcastiques

En cas de doute, choisissez « un système de maintenance bureaucratique laid mais sincère » plutôt que « une belle interface de startup moderne ».

Surface des outils

Ce fichier SKILL.md principal ne déclare que les outils en lecture seule qu'il utilise :

• Read pour ouvrir les fichiers d'invite et de règles correspondants
• Glob pour résoudre les emplacements des fichiers entre les installations globales de compétences et les copies du dépôt
• Grep pour localiser des règles ou des termes spécifiques lorsque l'utilisateur pose une question sur une dimension de conception précise

Cette compétence n'a pas besoin d'autorisations d'écriture par elle-même. L'agent hôte de codage peut toujours modifier les fichiers du projet lorsque la tâche de l'utilisateur est une implémentation, mais le routage et la sélection des règles de cette compétence sont en lecture seule.

Discipline de sortie

Lors de l'application de cette compétence :

1. Fondez les recommandations sur les fichiers de règles, pas sur des goûts personnels.
2. Préférez les changements concrets d'interface aux adjectifs abstraits.
3. Utilisez le chinois traditionnel pour les commentaires et les explications destinées à l'utilisateur lorsque c'est approprié.
4. Si vous écrivez du code, conservez le framework existant et le style des composants ; injectez l'esthétique ROC par la mise en page, le CSS, la densité du balisage, le texte et de petites incohérences contrôlées.
5. Si vous utilisez une bibliothèque de design, résistez à sa propreté premium par défaut. Remplacez l'espacement, les bordures, la typographie, les couleurs et le rythme des composants.
6. Maintenez l'accessibilité et la convivialité de base intactes même en rendant l'interface visuellement maladroite.

Préséance et conflits

En cas de conflit entre les directives, utilisez cet ordre :

1. Ce SKILL.md principal - routage, invariants et discipline globale
2. SYSTEM_PROMPT.md - posture esthétique canonique et barre de qualité
3. prompts/style.md - consigne compacte de génération pour le travail d'interface réel
4. rules/copywriting.md - texte d'interface visible et contenu chinois traditionnel
5. rules/*.md - règles visuelles et de mise en page spécifiques aux dimensions
6. .cursorrules, CLAUDE.md et README du dépôt - rappels de l'espace de travail et du projet

Si une règle rendrait l'interface inutilisable, préservez la convivialité et appliquez un traitement ROC plus doux. Si une valeur par défaut d'un composant moderne entre en conflit avec cette compétence, cette compétence l'emporte sauf si l'utilisateur demande explicitement le style moderne.