Communitygithub.com

Sistema de Encabezado de Página

Diseñar e implementar un marco sistemático para encabezados a nivel de página que proporcionen contexto, orientación y acciones primarias para una vista o página específica.

¿Qué es Sistema de Encabezado de Página?

El Sistema de Encabezado de Página ofrece una metodología estructurada para diseñar el área superior de una página individual, distinguiéndola del encabezado global del sitio. Su objetivo es ayudar a los usuarios a identificar su ubicación actual (orientación), comprender el estado o metadatos de la vista y acceder rápidamente a las acciones principales sin tener que buscar en menús. Es especialmente útil para paneles complejos, páginas de documentación, perfiles de usuario y aplicaciones SaaS donde la claridad y la eficiencia son cruciales. El sistema define una anatomía del encabezado con zonas específicas para navegación (migas de pan), título, metadatos y acciones, y proporciona reglas de diseño, estrategias responsivas y comportamientos de desplazamiento (fijo o condensado). También incluye pautas de accesibilidad, como el uso de etiquetas semánticas HTML y contraste adecuado, y criterios de validación para garantizar una implementación correcta. Este skill se integra con otras skills como `visual-hierarchy-system` y `site-navigation-system`, y es compatible con cualquier plataforma de desarrollo web que utilice HTML, CSS y JavaScript.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/page-header-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 Encabezado de Página?

Propósito

El Sistema de Encabezado de Página proporciona una metodología para diseñar el área estructural de nivel superior de una página individual (distinta del encabezado global del sitio). Garantiza que los usuarios puedan identificar inmediatamente dónde se encuentran (orientación), comprender el estado o los metadatos de la vista actual y acceder a las acciones primarias necesarias para completar su tarea sin tener que buscar en los menús.

Casos de Uso

  • Diseñar encabezados para vistas de panel complejas (por ejemplo, "Detalles del Proyecto").
  • Estructurar la introducción de artículos extensos o páginas de documentación.
  • Organizar páginas de configuración o perfiles donde el contexto y las acciones de guardado son críticas.
  • Estandarizar patrones de encabezado en una aplicación SaaS o un sitio de contenido grande.
  • Gestionar migas de pan, títulos e indicadores de estado en un diseño unificado.

Cuándo NO Usar

  • Navegación Global del Sitio: Utilice site-navigation-system para el encabezado principal que persiste en todo el sitio.
  • Páginas de Aterrizaje Simples: Donde la sección "Hero" (consulte hero-section-optimization) sirve como encabezado de página.
  • Pantallas de Bienvenida / Modales: Donde el contenido es temporal o mínimo; utilice overlay-and-dialog-system para encabezados modales.

Entradas

  1. Título y Jerarquía de la Página: El nombre principal de la página (H1) y su posición en la estructura del sitio.
  2. Requisitos de Orientación: ¿El usuario necesita migas de pan o un botón "Atrás"?
  3. Metadatos y Estado: Detalles críticos como "Última actualización", "Borrador/Publicado" o información del propietario.
  4. Prioridad de Acción: ¿Cuál es la tarea principal en esta página? (por ejemplo, Editar, Compartir, Crear).
  5. Tokens de Marca/Sistema: Tokens de espaciado, tipografía y color.

Salidas

  1. Especificación de Anatomía del Encabezado: Definición de zonas (Orientación, Título, Metadatos, Acciones).
  2. Plano de Diseño: Reglas para la alineación (Izquierda vs. Centrado) y el espaciado.
  3. Estrategia Responsiva: Cómo se adapta el encabezado de escritorio a móvil.
  4. Especificación de Interacción: Comportamiento de encabezados fijos y prioridades de botones de acción.

Flujo de Trabajo

1. Definir la Ruta de Navegación (Orientación)

Determine cómo llegó el usuario a esta página y cómo regresar:

  • Migas de Pan: Úselas para jerarquías profundas (por ejemplo, Inicio > Proyectos > Diseño).
  • Botón Atrás: Úselo para tareas lineales o al volver a una vista de lista específica.
  • Enlace Padre: Un simple "<- Volver a [Padre]" para profundidades de 2 niveles.

2. Establecer el Núcleo de Contenido (Título y Metadatos)

Aplique visual-hierarchy-system al centro del encabezado:

  • Título H1: El elemento de texto más prominente.
  • Metadatos Contextuales: Información secundaria (por ejemplo, etiquetas, marcas de tiempo, insignias de estado) colocada cerca del título.
  • Miniatura/Avatar: Si la página representa una entidad específica (por ejemplo, un Perfil de Usuario o un Producto).

3. Organizar Acciones a Nivel de Página

Divida las acciones en niveles de prioridad:

  • Acción Primaria: El botón "Nivel 1" (generalmente un botón relleno de alto contraste).
  • Acciones Secundarias: Botones de "Nivel 2" (estilos de contorno o fantasma) para tareas menos frecuentes.
  • Acciones Terciarias: Menús desbordados (...) para tareas administrativas raras.

4. Elegir un Patrón Espacial

  • Alineado a la Izquierda Estándar (SaaS/Panel): Migas de pan/Título a la izquierda, Acciones a la derecha. Mejor para la productividad.
  • Centrado (Contenido/Artículo): Todos los elementos centrados. Mejor para la legibilidad y la narrativa.
  • Diseño Dividido: Título y Acciones separados por espacio en blanco para enfatizar el despeje.

5. Definir Comportamiento Fijo y de Desplazamiento

  • Encabezado Fijo: Mantenga visible el encabezado de la página si se necesitan acciones (como "Guardar") con frecuencia mientras se desplaza.
  • Encabezado Condensado: Reduzca la altura del encabezado u oculte las migas de pan a medida que el usuario se desplaza hacia abajo para maximizar el espacio del contenido.

Reglas de Decisión

  • La Regla de la Migas de Pan: Si un sitio tiene más de 2 niveles de profundidad, las migas de pan son obligatorias en el encabezado de la página.
  • La Regla del "Único H1": El encabezado de la página DEBE contener la etiqueta H1 única de la página.
  • Alineación de Acciones: En escritorio, alinee las acciones primarias en la parte superior derecha. En móvil, considere una barra inferior fija para las acciones primarias si el encabezado se vuelve demasiado abarrotado.
  • Visibilidad del Estado: Los estados críticos (por ejemplo, "Pago Vencido") deben colocarse inmediatamente adyacentes al título usando una insignia o icono.

Restricciones

  • Accesibilidad: Los títulos de los encabezados deben usar <h1>. Las migas de pan deben usar <nav> con aria-label="Breadcrumb".
  • Contraste: Las insignias de estado y las acciones deben cumplir con los requisitos de contraste WCAG AA. Los botones de acción deben cumplir con el tamaño de objetivo WCAG 2.2 SC 2.5.8 (mínimo 24x24px, 44x44px preferido en barras fijas móviles).
  • Responsividad: Los encabezados deben manejar títulos largos adecuadamente (truncamiento vs. ajuste de línea).

Patrones Comunes de Falla

  • Sobrecarga de Acciones: Colocar demasiados botones en el encabezado, confundiendo la tarea principal.
  • Falta de Orientación: Olvidar las migas de pan en páginas profundas, dejando a los usuarios sintiéndose "perdidos".
  • Aplastamiento del Título: No permitir suficiente espacio para títulos largos en móvil, causando que se superpongan con las acciones.
  • Encabezado de Sitio Redundante: Hacer que el encabezado de la página se parezca demasiado al encabezado global del sitio, creando confusión visual.

Criterios de Validación

  • El encabezado contiene un H1 claro que coincide con la etiqueta de navegación.
  • La orientación (migas de pan/atrás) es apropiada para la profundidad del sitio.
  • La acción primaria es visualmente distinta de las acciones secundarias.
  • El diseño sigue siendo funcional y legible en vistas móviles.
  • Se utiliza HTML semántico (<nav> para migas de pan, <h1> para el título).
  • Los indicadores de estado (si los hay) son de alto contraste y fáciles de detectar.

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