Communitygithub.com

Sistema de Insignias y Etiquetas

Diseñar e implementar un marco sistemático para elementos informativos que comuniquen estado (Insignias) y categorización (Etiquetas) con claridad y accesibilidad.

¿Qué es Sistema de Insignias y Etiquetas?

El Sistema de Insignias y Etiquetas proporciona una metodología completa para diseñar e implementar componentes informativos pequeños que ofrecen contexto rápido, estado o categorización en sitios web y aplicaciones. Es útil para indicadores de estado, etiquetado de contenido, conteos y filtros, asegurando que estos elementos permanezcan secundarios al contenido principal mientras son instantáneamente escaneables y accesibles. El sistema define claramente cuándo usar badges (estado, conteos) versus tags (categorización, interactivas), establece anatomía visual con tipografía, radio de borde y tamaño consistentes, y asigna lógica semántica de color (Success, Warning, Error, Info) emparejada siempre con texto o iconos para accesibilidad. Además, especifica estados interactivos (hover, focus, removible), reglas de ubicación y jerarquía, y criterios de validación como contraste WCAG AA, targets táctiles mínimos de 24x24px (WCAG 2.2 SC 2.5.8) y wrapping responsivo. Este skill es aplicable a cualquier plataforma de desarrollo web o UI, siendo especialmente útil para agentes de IA como Claude Code, Cursor o Codex que necesiten diseñar sistemas de componentes consistentes y accesibles.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/badge-and-tag-system
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace Sistema de Insignias y Etiquetas?

Propósito

El Sistema de Insignias y Etiquetas proporciona una metodología para diseñar e implementar componentes informativos pequeños que ofrecen contexto rápido, estado o categorización. Este skill asegura que estos elementos permanezcan secundarios al contenido principal mientras son instantáneamente escaneables, accesibles y organizados lógicamente en un sitio web.

Casos de Uso

  • Indicadores de Estado: Mostrando el estado de un objeto (ej., "Activo", "Pendiente", "Agotado").
  • Categorización: Etiquetando contenido por tema, tipo o colección (ej., "Productividad", "Tutorial", "Novedad").
  • Cantidades/Conteos: Mostrando números asociados a un elemento (ej., "12 Notificaciones", "5 Artículos en el Carrito").
  • Visibilidad de Filtros: Mostrando filtros activos que el usuario puede eliminar.
  • Señalización de Prioridad: Resaltando atributos específicos como "Más Vendido" o "Urgente".

Cuándo NO Usar

  • Acciones Principales: No usar insignias o etiquetas como Llamada a la Acción (CTA) principal; usar botones del sistema-de-estados-interactivos.
  • Bloques de Contenido Grandes: Si la información requiere más de 2-3 palabras, usar un sistema-ui-de-tarjetas o tipografía estándar.
  • Navegación: Aunque las etiquetas pueden dirigir a vistas filtradas, no deben reemplazar el sistema-de-navegación-del-sitio.
  • Iconos Meramente Decorativos: Si el elemento no tiene significado semántico, pertenece al sistema-de-iconografía.

Entradas

  1. Intención del Contenido: ¿Es un estado, una categoría (metadato) o un conteo (número)?
  2. Requisito de Interactividad: ¿El elemento es estático, o es removible/hacer clic?
  3. Contexto de Jerarquía: ¿Cuál es el elemento padre? (ej., una tarjeta, un encabezado, una fila de tabla).
  4. Tokens de Color: Escala de colores semánticos existente (Éxito, Advertencia, Error, Información).

Salidas

  1. Especificación de Anatomía Visual: Definiciones para radio de borde (píldora vs. redondeado), relleno y tipografía.
  2. Matriz de Color Semántico: Mapeo de colores a significados específicos (ej., Verde = Éxito).
  3. Especificaciones Interactivas: Tratamientos visuales para hover, foco y acciones de "eliminar" (X).
  4. Reglas de Ubicación: Directrices sobre dónde se colocan estos elementos en relación con títulos e imágenes.

Flujo de Trabajo

1. Distinguir entre Insignia y Etiqueta

Definir primero el rol funcional:

  • Insignias: Generalmente indican Estado (ej., "En Vivo") o Conteos (ej., "3"). Suelen ser no interactivas o enlazar a un único estado.
  • Etiquetas: Generalmente indican Categorización (ej., "SaaS"). A menudo son interactivas, permitiendo a los usuarios filtrar contenido o eliminar la etiqueta.

2. Establecer Anatomía Visual

Definir el estilo base para asegurar que no parezcan botones:

  • Tipografía: Usar una fuente más pequeña, a menudo en mayúsculas o seminegrita (ej., 12px/0.75rem).
  • Radio de Borde:
    • Píldora (Completamente Redondeado): Mejor para estados y conteos.
    • Redondeado (4-8px): Mejor para categorización y etiquetas removibles.
  • Tamaño: Mantener altura consistente (ej., 20px-24px) para asegurar buena alineación con el texto.

3. Asignar Lógica Semántica (Color e Iconos)

Usar color para comunicar significado sin obligar al usuario a leer:

  • Éxito (Verde): "Completado", "Activo", "Verificado".
  • Advertencia (Amarillo/Naranja): "Pendiente", "Stock Bajo", "Borrador".
  • Error (Rojo): "Fallido", "Crítico", "Sin Stock".
  • Información/Neutral (Azul/Gris): "Nuevo", "Categoría", "Metadato".

Regla: Siempre emparejar color con texto o un icono para garantizar accesibilidad a usuarios daltónicos.

4. Definir Estados Interactivos

Si la etiqueta es interactiva:

  • Hover/Foco: Aplicar un sutil cambio de fondo o de borde.
  • Removible: Incluir un icono claro de "X" con un área de impacto mínima de 24x24px (WCAG 2.2 SC 2.5.8), ampliado a 44x44px donde el diseño lo permita para un uso táctil cómodo.

5. Determinar Ubicación y Jerarquía

  • Superposición: Colocar una insignia "Nuevo" en la esquina superior de una imagen.
  • En Línea: Colocar una insignia de estado inmediatamente después de un título en un sistema-de-encabezado-de-página.
  • Agrupado: Apilar múltiples etiquetas debajo de una descripción en un sistema-ui-de-tarjetas.

Reglas de Decisión

  • "La Prueba del Entrecerrar Ojos": Si una insignia es tan brillante que distrae del H1, reducir su saturación o usar un estilo de contorno.
  • Limitar el Conteo: Nunca usar más de 3 etiquetas en una sola tarjeta para evitar desorden visual.
  • Longitud del Texto: Mantener las etiquetas en 1-2 palabras. Truncar o usar tooltips si los datos son dinámicos e impredecibles.
  • Distinción de Botón: Las insignias deben tener un tratamiento visual diferente (ej., tamaño más pequeño, radio diferente) al de los botones primarios "Enviar" o "Comprar".

Restricciones

  • Accesibilidad: El texto dentro de insignias/etiquetas debe cumplir con WCAG AA (contraste 4.5:1). Las etiquetas interactivas deben ser navegables por teclado.
  • Responsividad: Las etiquetas en un grupo deben ajustarse a la siguiente línea (flex-wrap: wrap) en lugar de desbordar el contenedor.
  • Objetivos Táctiles: Las etiquetas removibles deben tener un objetivo suficientemente grande para la acción de "cerrar" (mín. 24x24px según WCAG 2.2 SC 2.5.8; preferiblemente 44x44px).

Patrones de Falla Comunes

  • "El Imitador de Botón": Hacer que las etiquetas se vean exactamente como botones, llevando a los usuarios a esperar una acción primaria.
  • Dependencia Excesiva del Color: Usar rojo/verde/amarillo sin etiquetas de texto, imposibilitando que usuarios daltónicos o de lectores de pantalla entiendan el estado.
  • Sopa de Etiquetas: Saturar una tarjeta con 10 o más etiquetas, haciendo que ninguna sea útil.
  • Radio Inconsistente: Mezclar insignias en forma de píldora y etiquetas con esquinas cuadradas en la misma interfaz.

Criterios de Validación

  • Las insignias y etiquetas son visualmente distintas de los botones.
  • Los colores semánticos se usan de manera consistente (ej., Verde siempre significa Éxito).
  • Las relaciones de contraste cumplen con WCAG AA (4.5:1) para todas las variaciones de color.
  • Las etiquetas interactivas incluyen estados de foco y objetivos táctiles de al menos 24x24px (WCAG 2.2 SC 2.5.8).
  • Los elementos se ajustan correctamente en viewports móviles.
  • Se usan iconos junto con el color para indicadores de estado críticos.

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 relacionados

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