Communitygithub.com

Système de Badges et Tags

Concevoir et implémenter un cadre systématique pour les éléments informationnels qui communiquent l'état (Badges) et la catégorisation (Tags) avec clarté et accessibilité.

Qu'est-ce que Système de Badges et Tags ?

Ce skill fournit une méthodologie complète pour concevoir et implémenter des badges et tags dans une interface utilisateur. Il distingue clairement les badges, qui indiquent un état ou un décompte (ex: 'Live', '3 notifications'), des tags, qui servent à la catégorisation interactive (ex: 'Productivité', 'Nouveauté'). La documentation couvre l'anatomie visuelle (typographie, rayon de bordure, taille), l'assignation de couleurs sémantiques (Succès, Avertissement, Erreur, Info) avec des règles d'accessibilité pour les utilisateurs daltoniens, des états interactifs (hover, focus, suppression) conformes au WCAG 2.2, et des règles de placement (superposition, en ligne, groupé). Des contraintes strictes sont imposées : contraste 4.5:1, zones de clic minimales de 24x24px, et limitation à 3 tags par carte. Le skill s'intègre avec les systèmes de `card-ui-system`, `page-header-system`, et `interactive-state-system`, et fournit des critères de validation pour garantir que les badges et tags restent visuellement distincts des boutons d'action principaux.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/badge-and-tag-system
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Système de Badges et Tags ?

Objectif

Le système de Badges et Tags fournit une méthodologie pour concevoir et implémenter de petits composants informationnels qui offrent un contexte rapide, un état ou une catégorisation. Ce skill garantit que ces éléments restent secondaires par rapport au contenu principal tout en étant instantanément scannables, accessibles et logiquement organisés sur un site web.

Cas d'utilisation

  • Indicateurs d'état : Afficher l'état d'un objet (par ex., "Actif", "En attente", "Épuisé").
  • Catégorisation : Étiqueter le contenu par sujet, type ou collection (par ex., "Productivité", "Tutoriel", "Nouveauté").
  • Quantité/Nombre : Afficher des nombres associés à un élément (par ex., "12 Notifications", "5 Articles dans le panier").
  • Visibilité des filtres : Afficher les filtres actifs que l'utilisateur peut supprimer.
  • Signalement de priorité : Mettre en évidence des attributs spécifiques comme "Meilleure vente" ou "Urgent".

Quand ne PAS les utiliser

  • Actions principales : N'utilisez pas de badges ou de tags comme Appel à l'action (CTA) principal ; utilisez des boutons du système-d-états-interactifs.
  • Grands blocs de contenu : Si l'information nécessite plus de 2-3 mots, utilisez un système-ui-carte ou une typographie standard.
  • Navigation : Bien que les tags puissent mener à des vues filtrées, ils ne doivent pas remplacer le système-de-navigation-site principal.
  • Icônes décoratives uniquement : Si l'élément n'a pas de signification sémantique, il appartient au système-d-iconographie.

Entrées

  1. Intention du contenu : Est-ce un état, une catégorie (métadonnée) ou un nombre ?
  2. Exigence d'interactivité : L'élément est-il statique, ou peut-il être supprimé/cliquable ?
  3. Contexte hiérarchique : Quel est l'élément parent ? (par ex., une carte, un en-tête, une ligne de tableau).
  4. Jetons de couleur : Échelle de couleurs sémantiques existante (Succès, Avertissement, Erreur, Info).

Sorties

  1. Spécification d'anatomie visuelle : Définitions pour le rayon de bordure (pilule vs. arrondi), le rembourrage et la typographie.
  2. Matrice de couleurs sémantiques : Mappage des couleurs à des significations spécifiques (par ex., Vert = Succès).
  3. Spécifications interactives : Traitements visuels pour le survol, le focus et les actions de "suppression" (X).
  4. Règles de placement : Directives sur l'emplacement de ces éléments par rapport aux titres et aux images.

Flux de travail

1. Distinguer entre Badge et Tag

Définir d'abord le rôle fonctionnel :

  • Badges : Indiquent généralement un État (par ex., "En direct") ou des Nombres (par ex., "3"). Ils sont généralement non interactifs ou pointent vers un état unique.
  • Tags : Indiquent généralement une Catégorisation (par ex., "SaaS"). Ils sont souvent interactifs, permettant aux utilisateurs de filtrer le contenu ou de supprimer le tag.

2. Établir l'anatomie visuelle

Définir le style de base pour qu'ils ne ressemblent pas à des boutons :

  • Typographie : Utiliser une police plus petite, souvent en majuscules ou semi-gras (par ex., 12px/0.75rem).
  • Rayon de bordure :
    • Pilule (rond complet) : Idéal pour les états et les nombres.
    • Arrondi (4-8px) : Idéal pour la catégorisation et les tags supprimables.
  • Taille : Maintenir une hauteur constante (par ex., 20px-24px) pour garantir un bon alignement avec le texte.

3. Attribuer la logique sémantique (Couleur et icônes)

Utiliser la couleur pour communiquer le sens sans forcer l'utilisateur à lire :

  • Succès (Vert) : "Terminé", "Actif", "Vérifié".
  • Avertissement (Jaune/Orange) : "En attente", "Stock faible", "Brouillon".
  • Erreur (Rouge) : "Échec", "Critique", "Rupture de stock".
  • Info/Neutre (Bleu/Gris) : "Nouveau", "Catégorie", "Métadonnée".

Règle : Associez toujours la couleur avec du texte ou une icône pour garantir l'accessibilité aux utilisateurs daltoniens.

4. Définir les états interactifs

Si le tag est interactif :

  • Survol/Focus : Appliquer un léger changement d'arrière-plan ou de bordure.
  • Supprimable : Inclure une icône "X" claire avec une zone de clic minimale de 24x24px (WCAG 2.2 SC 2.5.8), pouvant aller jusqu'à 44x44px si la disposition le permet pour une utilisation tactile confortable.

5. Déterminer le placement et la hiérarchie

  • Superposition : Placer un badge "Nouveau" dans le coin supérieur d'une image.
  • En ligne : Placer un badge d'état immédiatement après un titre dans un système-en-tête-page.
  • Groupé : Empiler plusieurs tags en dessous d'une description dans un système-ui-carte.

Règles de décision

  • Le "Test du plissement d'yeux" : Si un badge est si lumineux qu'il distrait du H1, réduisez sa saturation ou utilisez un style de contour.
  • Limiter le nombre : N'utilisez jamais plus de 3 tags sur une seule carte pour éviter l'encombrement visuel.
  • Longueur du texte : Limitez les libellés à 1-2 mots. Tronquez ou utilisez des info-bulles si les données sont dynamiques et imprévisibles.
  • Distinction des boutons : Les badges doivent avoir un traitement visuel différent (par ex., taille plus petite, rayon différent) des boutons principaux "Soumettre" ou "Acheter".

Contraintes

  • Accessibilité : Le texte dans les badges/tags doit respecter le WCAG AA (4.5:1 de contraste). Les tags interactifs doivent être navigables au clavier.
  • Responsivité : Les tags dans un groupe doivent passer à la ligne suivante (flex-wrap: wrap) plutôt que de déborder du conteneur.
  • Cibles tactiles : Les tags supprimables doivent avoir une cible suffisamment grande pour l'action de "fermeture" (min 24x24px selon WCAG 2.2 SC 2.5.8 ; 44x44px de préférence).

Modèles d'échec courants

  • L'"Imitation de bouton" : Faire ressembler les tags exactement à des boutons, ce qui amène les utilisateurs à attendre une action principale.
  • Dépendance excessive à la couleur : Utiliser du rouge/vert/jaune sans libellés textuels, rendant impossible pour les utilisateurs daltoniens ou de lecteurs d'écran de comprendre l'état.
  • Soupe de tags : Encombrer une carte avec 10+ tags, rendant aucun d'entre eux utile.
  • Rayon incohérent : Mélanger des badges en forme de pilule et des tags à coins carrés dans la même interface.

Critères de validation

  • Les badges et tags sont visuellement distincts des boutons.
  • Les couleurs sémantiques sont utilisées de manière cohérente (par ex., Vert signifie toujours Succès).
  • Les ratios de contraste respectent le WCAG AA (4.5:1) pour toutes les variations de couleur.
  • Les tags interactifs incluent des états de focus et des cibles tactiles d'au moins 24x24px (WCAG 2.2 SC 2.5.8).
  • Les éléments s'adaptent correctement sur les écrans mobiles.
  • Les icônes sont utilisées en complément de la couleur pour les indicateurs d'état critiques.

Individual skills in this repo

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

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

coastdigitalgroup/coastai-skills

Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.

coastdigitalgroup/coastai-skills

Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.

coastdigitalgroup/coastai-skills

Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

coastdigitalgroup/coastai-skills

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

coastdigitalgroup/coastai-skills

Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.

coastdigitalgroup/coastai-skills

Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

coastdigitalgroup/coastai-skills

Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.

coastdigitalgroup/coastai-skills

Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.

coastdigitalgroup/coastai-skills

Design and specify a systematic dark theme framework, establishing rules for elevation-based surface colors, desaturated brand accents, text legibility, and media adaptation to ensure an accessible, low-fatigue experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community