felipebasurto/unslop-ui

Unslop UI

Modifiez le texte visible et l'habillage décoratif d'une page web, d'un écran d'application, d'un graphique ou d'un tableau de bord pour qu'il ne donne plus l'impression d'avoir été généré par une IA. Une bonne interface se consomme, elle ne se lit pas : gardez les mots dont une personne a besoin pour agir, et supprimez le reste.

Cible : $ARGUMENTS (si vide, utilisez les fichiers modifiés dans cette conversation, ou demandez).

Règles d'écriture de /pstack:unslop

Appliquez-les à chaque chaîne que vous conservez. Citez-les par leur numéro.

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

Si la ligne ci-dessus affiche encore une commande au lieu des règles (agents autres que Claude Code), exécutez python3 scripts/load_unslop.py depuis le dossier de cette compétence et appliquez ce qu'elle imprime.

Règles d'interface

Les identifiants sont stables. Citez-les comme U1 à U16 dans le rapport.

Texte d'interface

• U1. Étiquettes de surtitre. Petit texte en majuscules ou espacé au-dessus d'un titre ("PASSEPORT", "FONCTIONNALITÉS", "COMMENT ÇA MARCHE"). Supprimez-le. Le titre indique déjà de quoi parle la section.
• U2. Numérotation décorative. "01 02 03", "01 // Fonctionnalités", "§", préfixes "//". Supprimez sauf si l'ordre est réel et que l'utilisateur le suit (étapes d'un paiement, un guide d'installation numéroté).
• U3. Réflexe de sous-titre. Un sous-titre sous chaque titre, ou une ligne au-dessus du H1. N'en conservez qu'un seul lorsqu'il énonce un fait que le titre ne mentionne pas. "Analytique / Comprenez mieux vos données" perd la deuxième ligne.
• U4. Botsplaining. Légendes, textes d'aide et descriptions qui racontent ce que l'élément fait visiblement ("Cliquez sur le bouton ci-dessous pour commencer", "Ce graphique montre les revenus au fil du temps"). Supprimez. Les titres et légendes restent à 5 mots ou moins. Exceptions : les états vides, les messages d'erreur et les confirmations d'actions destructrices, qui peuvent utiliser une phrase complète.
• U5. Notes de conception divulguées. Texte sur le fonctionnement de l'écran ou la raison de sa conception, longues parenthèses, "(met à jour en temps réel)", "(alimenté par IA)". Supprimez-le, ou déplacez-le dans une infobulle si un utilisateur le chercherait réellement.
• U6. Chaînes de statut. Faits enchaînés par "·" ou "|" ("12 articles · Mis à jour il y a 2 min · Synchronisé · v2.1"). Conservez le seul fait sur lequel l'utilisateur agit. Placez les autres là où ils sont nécessaires, ou supprimez-les.
• U7. Tout étiqueter. Une étiquette qui répète le placeholder, l'icône, le texte du bouton ou le titre de la section. Choisissez un seul indice. Un champ de recherche avec une loupe n'a besoin ni d'une étiquette "Recherche" ni d'un placeholder "Rechercher…" au-delà de l'un d'eux.
• U8. Slogans hachés et vides. "Une. Seule. Chose.", "Construit différemment.", "Livrez plus vite. Pensez moins." Réécrivez en une phrase qui nomme la chose et ce qu'elle fait, ou supprimez.

Décoration

• U9. Badges et pastilles sans état réel. "EN DIRECT", "NOUVEAU", "IA", "Bêta", "Pro", "🔥 Populaire" ajoutés pour le style. Ne conservez un badge que s'il reflète des données que l'application suit réellement (un flux est vraiment en direct, un article est réellement nouveau depuis la dernière visite).
• U10. Points d'état. Points pulsants ou colorés (animate-pulse, petits rounded-full) à côté d'un texte. Ne conservez que s'ils sont liés à un état réel en direct.
• U11. Émojis et icônes décoratifs. Dans les titres, boutons, étiquettes KPI et éléments de liste. Supprimez. Une icône reste uniquement si elle est le contrôle lui-même (bouton icône avec un aria-label) ou si elle porte un sens que le texte ne porte pas.

Graphiques et tableaux de bord

• U12. Titres de graphique qui nomment le type de graphique. "Graphique à barres des revenus mensuels" devient "Revenus mensuels", ou la conclusion : "Les revenus ont doublé depuis mars".
• U13. Instructions de lecture. Sous-titres ou légendes qui expliquent comment lire le graphique ("Chaque barre représente un mois", "Survolez pour les détails"). Supprimez.
• U14. Dire la même chose deux fois. Chaque quantité reçoit un seul encodage. Une barre, un nombre sur la barre, une ligne de grille à sa hauteur et une graduation d'axe disant tous la même valeur, c'est trois de trop ; un KPI avec flèche plus pourcentage plus le mot "en hausse" plus une phrase en dessous ("Les revenus ont augmenté de 12% par rapport au mois dernier") est la même erreur en texte. Conservez l'encodage dont le lecteur a besoin : l'axe et les grilles pour la forme, une valeur imprimée pour le nombre qui compte (souvent seulement le dernier point ou le maximum).
• U15. Habillage de graphique qui concurrence les données. Un cadre autour de la zone de tracé, des grilles denses ou foncées, des graduations mineures, des bordures d'axe épaisses, de la 3D, des ombres portées et des lueurs sur les marques, des arrière-plans derrière le tracé. Supprimez-les, ou rendez ce qui doit rester (quelques grilles, une ligne de base) en trait fin gris clair. Les données au-dessus, les étiquettes à côté, l'habillage le plus discret. Ne redessinez pas le graphique : même type, mêmes données, mêmes couleurs de séries.
• U16. Légende là où une étiquette directe fonctionne. Une légende qui oblige le lecteur à faire correspondre des couleurs à des noms, alors que le nom pourrait se trouver à la fin de la ligne ou à côté de la barre. Étiquetez la série directement, idéalement avec sa valeur la plus récente ("Cette année 1 150"), et supprimez la légende. Conservez une légende pour plus de quatre séries ou lorsque les marques sont trop proches pour être étiquetées.

Pour les paires avant/après, lisez references/examples.md si vous n'êtes pas sûr de la mesure de la suppression.

Garde-fous

• Modifiez uniquement le texte visible et les éléments décoratifs. Ne touchez pas à la logique, aux données, aux couleurs, aux tokens d'espacement ou à la structure de mise en page. La seule exception est l'habillage de graphique selon U15, qui peut être affiné ou éclairci.
• Lorsque vous supprimez un élément, supprimez également son conteneur désormais vide ainsi que toute marge ou espacement qui n'existait que pour lui. Un conteneur qui ne contient plus qu'un seul enfant qu'il n'existait que pour regrouper disparaît aussi.
• Ne supprimez jamais les aria-label, alt, title sur les boutons icônes, ni le texte réservé aux lecteurs d'écran. Si le texte visible supprimé était le seul nom accessible, déplacez-le dans aria-label.
• Texte provenant de données, props, fichiers i18n ou d'un CMS : modifiez-le à sa source (le fichier de traduction, le fixture) ou signalez-le, ne codez pas en dur un remplacement dans le composant.
• Si un cas signalé a une raison valable (état réel, ordre réel, texte légal), gardez-le et expliquez pourquoi dans le rapport.

Procédure

Copiez cette liste de contrôle et suivez-la :

- [ ] 1. Comptage : python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <cible>   (${CLAUDE_SKILL_DIR} est le dossier de ce fichier)
- [ ] 2. Lisez chaque chaîne visible et élément décoratif ; étiquetez chaque problème avec U1-U16 ou un numéro de règle unslop
- [ ] 3. Modifiez
- [ ] 4. Re-comptez avec la même commande
- [ ] 5. Rapportez

Le compteur est une heuristique regex. Il trouve des candidats et donne un nombre avant/après. Il manque U3, U4, U5, U7, U8, U12, U13 et U14, qui nécessitent une lecture. Pour U15 et U16, il ne voit que les formes de code (ombres, bordures d'axe et grilles épaisses, légendes activées). Il signale également certains cas légitimes. Votre lecture à l'étape 2 est la véritable vérification.

Format du rapport :

Règle	Avant	Après
U1 surtitre	6	0
unslop 13 tiret cadratin	4	0

Énumérez ensuite ce que vous avez conservé intentionnellement, une ligne par élément, avec la raison.