Communitygithub.com

Sistema de Migas de Pan y Navegación Contextual

Diseñar e implementar un marco sistemático para las rutas de navegación secundarias que proporcionen orientación, contexto y acceso con un solo clic a los niveles superiores en arquitecturas de información profundas.

¿Qué es Sistema de Migas de Pan y Navegación Contextual?

Este skill proporciona una metodología completa para diseñar e implementar un sistema de migas de pan (breadcrumbs) y navegación contextual. Está diseñado para evitar que los usuarios se sientan "perdidos" en arquitecturas de información profundas (IA) al mostrar una ruta lineal y clara desde la página principal hasta la ubicación actual. El skill cubre desde los casos de uso ideales (como comercio electrónico, documentación, paneles SaaS y sitios de directorio) hasta las situaciones en las que no se debe utilizar (arquitecturas planas, flujos lineales o rutas basadas en el historial). Incluye un flujo de trabajo detallado que guía el mapeo jerárquico, la anatomía visual (enlaces, separadores, página actual), el ritmo espacial basado en sistemas de espaciado fluido, estrategias de truncamiento para rutas largas y adaptación responsiva para móviles. El sistema también define reglas de decisión clave (como que el nodo raíz siempre sea "Inicio" y que la página actual no sea un enlace), restricciones de accesibilidad (uso de ARIA y estándares WCAG), patrones de fallo comunes y criterios de validación prácticos. Es adecuado para su uso con agentes de IA como Claude Code, Cursor o Codex para generar componentes de navegación secundaria consistentes y accesibles.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/breadcrumb-wayfinding-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 Migas de Pan y Navegación Contextual?

Propósito

El Sistema de Migas de Pan y Navegación Contextual proporciona una metodología para diseñar las rutas de navegación secundarias que se sitúan sobre el contenido principal. Garantiza que los usuarios nunca se sientan "perdidos" en arquitecturas de información (IA) profundas al proporcionar un mapa lineal y claro de su ubicación actual en relación con la página de inicio o el directorio raíz. Este sistema equilibra la precisión de la navegación con un peso visual mínimo, asegurando que los usuarios puedan entender su contexto y retroceder a los niveles superiores con un solo clic.

Casos de Uso

  • Comercio Electrónico: Navegación a través de Categoría > Subcategoría > Producto.
  • Documentación y Wikis: Navegación por Volumen > Capítulo > Sección > Página.
  • Paneles SaaS: Gestión de entidades anidadas como Cuenta > Proyecto > Recurso.
  • Sitios de Directorio: Navegación por Ubicación > Categoría > Listado.
  • Resultados de Búsqueda: Mostrar la ruta a un elemento específico encontrado mediante búsqueda.

Cuándo NO Usarlo

  • Arquitecturas Planas: Si el sitio solo tiene 1–2 niveles de profundidad (Inicio > Página), las migas de pan añaden desorden innecesario.
  • Progresiones Lineales: Para asistentes paso a paso o flujos de pago, utilice en su lugar el sistema-de-progresión-por-pasos.
  • Rutas Dinámicas/No Jerárquicas: Si la ruta del usuario se basa en el historial de la sesión (por ejemplo, "Volver a Resultados de Búsqueda") en lugar de una estructura fija, utilice un botón "Atrás".
  • Páginas de Aterrizaje: Donde el objetivo es una única conversión y la navegación distrae del CTA principal.

Entradas

  1. Arquitectura de Información (IA): El mapa jerárquico del sitio.
  2. Nodo Actual: La página específica que el usuario está viendo actualmente.
  3. Jerarquía de Padres: La cadena de ancestros desde la página actual hasta la raíz.
  4. Restricciones de Visualización: Ancho horizontal disponible (del sistema-de-cuadrícula-responsiva).

Salidas

  1. Plano de Navegación Contextual: Una anatomía definida para etiquetas, separadores y enlaces.
  2. Estrategia de Truncamiento: Reglas para manejar rutas largas en pantallas pequeñas o escenarios de desbordamiento.
  3. Mapeo Responsivo: Cómo se colapsa o transforma la ruta para dispositivos móviles.
  4. Capa de Accesibilidad Semántica: Roles y etiquetas ARIA definidos para lectores de pantalla.

Flujo de Trabajo

1. Mapear la Ruta Jerárquica

Determinar la ruta absoluta desde Inicio/Raíz hasta la página actual. Ejemplo: Inicio > Recursos > Documentos técnicos > [Título de la página actual]

2. Definir la Anatomía Visual

Establecer el estilo para cada componente:

  • Los Enlaces: Estilo de enlace estándar (del sistema-de-estados-interactivos).
  • Los Separadores: Un símbolo no interactivo (por ejemplo, /, >, o →) que distinga visualmente los niveles.
  • La Página Actual: Una etiqueta de texto plano, no cliqueable, que confirme la ubicación del usuario.

3. Establecer el Ritmo Espacial

Aplicar el sistema-de-espaciado-fluido:

  • Espaciados: Utilice un espaciado pequeño y consistente (por ejemplo, --space-xs) entre enlaces y separadores.
  • Colocación Vertical: Coloque la ruta de manera consistente sobre el <h1> principal pero debajo del encabezado global del sitio.

4. Implementar Truncamiento y Desbordamiento

Para rutas profundas (4+ niveles) o títulos largos:

  • Truncamiento Medio: Colapsar los niveles intermedios en puntos suspensivos (...) si el ancho total excede el contenedor (por ejemplo, Inicio > ... > Sección > Página).
  • Truncamiento de Etiquetas: Utilice max-width y text-overflow: ellipsis para etiquetas largas individuales y evitar que se rompan en varias líneas.

5. Planificar la Adaptación Responsiva

Mapear la experiencia móvil:

  • El Patrón "Volver al Padre": En pantallas muy pequeñas, reemplace la ruta completa con un solo enlace "<- Volver a [Padre]" para ahorrar espacio.
  • Desplazamiento Horizontal: Permita que la lista de migas de pan se desplace horizontalmente si se debe preservar la ruta completa.

Reglas de Decisión

  • La Regla "Raíz Siempre": El primer elemento de la ruta debe ser siempre la raíz funcional (normalmente "Inicio").
  • Estado de la Página Actual: El último elemento de las migas de pan (la página actual) NO debe ser un enlace. Esto evita que los usuarios hagan clic en un enlace a la página en la que ya se encuentran.
  • Lógico vs. Historial: Las migas de pan deben reflejar la estructura del sitio, NO el historial del navegador del usuario.
  • Visibilidad de los Separadores: Los separadores deben tener un peso visual menor (por ejemplo, color atenuado) que los enlaces para evitar competir por la atención.

Restricciones

  • Accesibilidad: Debe estar envuelto en un elemento <nav> con aria-label="Breadcrumb", que contenga una lista ordenada (<ol>) de elementos para que los lectores de pantalla anuncien la posición y el recuento total.
  • Contraste: Los enlaces y separadores deben cumplir con los requisitos de WCAG AA (4.5:1).
  • Objetivos Táctiles: Los enlaces de las migas de pan deben cumplir con el mínimo de 24x24px de WCAG 2.2 SC 2.5.8, incluso si el texto visible es más pequeño.
  • Longitud: Las etiquetas de las migas de pan deben coincidir exactamente con los títulos de las páginas (o usar una versión abreviada si el título es excesivamente largo).

Patrones de Falla Comunes

  • "El Inicio Perdido": No incluir el enlace de Inicio/Raíz, lo que obliga a los usuarios a usar el menú principal para empezar de nuevo.
  • Exceso de Enlaces: Hacer que la página actual sea un enlace cliqueable, lo que recarga la misma página y confunde a los usuarios.
  • Competencia Visual: Usar separadores demasiado grandes o de alto contraste, dificultando la lectura de la ruta.
  • Rotura por Salto de Línea: Permitir que las migas de pan se rompan en 3 o más líneas en móvil, empujando el contenido principal demasiado abajo.
  • IA Inconsistente: Mostrar diferentes rutas para la misma página dependiendo de cómo llegó el usuario.

Criterios de Validación

  • La ruta comienza con el nodo Inicio/Raíz.
  • La página actual es el último elemento y NO se puede hacer clic.
  • Las migas de pan están envueltas en un punto de referencia <nav aria-label="Breadcrumb"> que contiene una lista <ol>.
  • Los separadores visuales se utilizan y tienen un contraste menor que los enlaces.
  • La ruta se adapta correctamente a las pantallas móviles (truncamiento o enlace "Atrás").
  • El espaciado entre elementos es consistente y sigue el sistema de espaciado fluido.
  • Los usuarios de teclado pueden navegar con Tab a través de los enlaces intermedios.

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 informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

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 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