Communitygithub.com

plugin87/ux-writing

Rédigez ou révisez les textes d’interface — boutons, erreurs, états vides, microcopies, notifications, libellés — en utilisant le système de voix et tonalité (clair, concis, utile, humain, honnête) avec la formule quoi→ pourquoi→ comment et les règles de langage inclusif. À utiliser lorsque l’utilisateur a besoin de textes d’interface, de messages d’erreur, de textes d’état vide ou d’une révision de copie.

Qu'est-ce que ux-writing ?

Cette compétence est un guide complet pour la rédaction UX, destiné aux rédacteurs, designers et développeurs qui doivent produire ou évaluer des textes d’interface dans une voix de projet cohérente. Elle s’appuie sur un fichier de référence (`content/voice-tone.md`) qui définit les principes de voix, le spectre tonal, des formules prêtes à l’emploi (boutons, confirmations, erreurs, états vides), des modèles de microcopie, des règles de langage inclusif et une checklist pré-lancement de 10 points. La compétence couvre des plateformes textuelles comme Claude Code, Cursor ou Codex, et son fonctionnement est simple : l’utilisateur fournit un contexte (type de copie, émotion de l’utilisateur, limites de caractères), et la compétence applique étape par étape les bonnes pratiques : adapter le ton à l’état émotionnel, utiliser des formules spécifiques pour les boutons (verbe en tête, nom du résultat), les confirmations (bouton qui reformule l’action), les erreurs (quoi→ pourquoi→ comment) et les états vides (valeur→ première action). Elle impose des mécaniques strictes (casse en phrase, pas de MAJUSCULES, chiffres, pas de rejet de la faute, libellés plutôt que placeholders, instructions non basées uniquement sur la couleur) et oblige à exécuter la checklist pré-lancement avant de déclarer le travail terminé. Le résultat final est une copie naturelle à l’oral, respectant les limites de caractères et les contraintes d’internationalisation, prête à être traduite sans concaténation.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Compétence : Rédaction UX

Produire ou critiquer les textes d’interface dans la voix du projet.

Étapes

  1. Lire content/voice-tone.md (principes de voix, spectre tonal, formules, modèles de microcopie, langage inclusif, checklist pré-lancement).
  2. Adapter le ton à l’état émotionnel de l’utilisateur (intégration/réussite/routine/erreur/destructif). Plus le stress est élevé → plus le langage est simple.
  3. Appliquer les formules :
    • Boutons : placer le verbe en tête, nommer le résultat.
    • Boîtes de confirmation : le bouton de confirmation reformule l’action et l’objet — « Supprimer le compte », pas « Supprimer »/« OK »/« Oui »/« Confirmer ». Le titre pose une question (« Supprimer le compte ? »), le bouton répond avec les mêmes mots. « Annuler » reste « Annuler ». Pour les actions irréversibles ou à haut risque, exiger une étape de saisie pour confirmer (WCAG 3.3.4/3.3.6).
    • Erreurs : ce qui s’est passé → pourquoi → comment corriger (pas d’impasse, pas de codes/traces de pile).
    • États vides : valeur → première action.
  4. Appliquer les mécaniques : casse en phrase, pas de TOUT EN MAJUSCULES, chiffres, pas de rejet de la faute sur l’utilisateur, libellés (pas de placeholders), instructions non basées uniquement sur la couleur ou la direction.
  5. Exécuter la checklist pré-lancement en 10 points.

Résultat

Copie finale (ou révision avec ratures) qui se lit naturellement à voix haute et passe la checklist. Respecter les limites de caractères imposées par les interfaces étroites.

Vérification (obligatoire avant de déclarer terminé)

Passer chaque ligne dans la checklist pré-lancement en 10 points de content/voice-tone.md — ne pas sauter cette étape :

  • Se lit naturellement à voix haute ; verbe en tête sur les actions ; pas de jargon/blâme/impasse.
  • Les erreurs suivent quoi→ pourquoi→ comment ; les états vides donnent valeur→ action ; pas de simple « Aucune donnée »/« Erreur ».
  • Mécaniques : casse en phrase, chiffres, libellés (pas de placeholders), instructions non uniquement basées sur la couleur/la direction, langage inclusif.
  • Dans les limites de caractères ; traduisible (pas de concaténation — voir accessibility/i18n-rtl.md).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

Skills associés