Communitygithub.com

Système d’en-tête de page

Concevoir et implémenter un cadre systématique pour les en-têtes de page fournissant contexte, orientation et actions principales pour une vue ou page spécifique.

Qu'est-ce que Système d’en-tête de page ?

Le Système d’en-tête de page est une méthodologie structurée pour concevoir l’espace d’en-tête unique de chaque page (distinct de l’en-tête global du site). Il garantit que les utilisateurs peuvent immédiatement identifier leur emplacement (wayfinding), comprendre l’état ou les métadonnées de la vue actuelle et accéder aux actions principales nécessaires à leur tâche sans avoir à fouiller dans les menus. Idéal pour les tableaux de bord complexes, les articles longs et les pages de paramètres, il standardise les modèles d’en-tête grâce à des décisions claires comme la règle du fil d’Ariane obligatoire pour les hiérarchies profondes et l’alignement des actions primaires en haut à droite sur desktop. Il prend en charge les plateformes SaaS, les sites de contenu et toute application web, en produisant des spécifications d’anatomie, des plans de mise en page, des stratégies responsives et des règles d’interaction pour les en-têtes fixes ou rétrécissants.

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

Système d'en-tête de page

Objectif

Le Système d'en-tête de page fournit une méthodologie pour concevoir la zone structurelle de haut niveau d'une page individuelle (distincte de l'en-tête global du site). Il garantit que les utilisateurs peuvent immédiatement identifier où ils se trouvent (Wayfinding), comprendre l'état ou les métadonnées de la vue actuelle et accéder aux actions principales nécessaires à l'accomplissement de leur tâche sans avoir à chercher dans les menus.

Cas d'utilisation

  • Conception d'en-têtes pour des vues de tableau de bord complexes (par exemple, « Détails du projet »).
  • Structuration de l'introduction d'articles longs ou de pages de documentation.
  • Organisation de pages de paramètres ou de profil où le contexte et les actions de sauvegarde sont critiques.
  • Standardisation des modèles d'en-tête dans une application SaaS ou un grand site de contenu.
  • Gestion des fils d'Ariane, des titres et des indicateurs d'état dans une mise en page unifiée.

Quand ne PAS l'utiliser

  • Navigation globale du site : Utiliser site-navigation-system pour l'en-tête principal qui persiste sur l'ensemble du site.
  • Pages d'atterrissage simples : Lorsque la section « Hero » (voir hero-section-optimization) sert d'en-tête de page.
  • Écrans de démarrage / Modaux : Lorsque le contenu est temporaire ou minimal ; utiliser overlay-and-dialog-system pour les en-têtes de modaux.

Entrées

  1. Titre de page et hiérarchie : Le nom principal de la page (H1) et sa position dans la structure du site.
  2. Exigences de Wayfinding : L'utilisateur a-t-il besoin d'un fil d'Ariane ou d'un bouton « Retour » ?
  3. Métadonnées et état : Détails critiques comme « Dernière mise à jour », « Brouillon/Publié » ou informations sur le propriétaire.
  4. Priorité des actions : Quelle est la tâche principale sur cette page ? (par exemple, Modifier, Partager, Créer).
  5. Tokens de marque/système : Tokens d'espacement, de typographie et de couleur.

Sorties

  1. Spécification de l'anatomie de l'en-tête : Définition des zones (Wayfinding, Titre, Métadonnées, Actions).
  2. Plan de mise en page : Règles d'alignement (gauche vs centré) et d'espacement.
  3. Stratégie responsive : Comment l'en-tête s'adapte du desktop au mobile.
  4. Spécification d'interaction : Comportement des en-têtes fixes et priorités des boutons d'action.

Flux de travail

1. Définir le chemin de navigation (Wayfinding)

Déterminer comment l'utilisateur est arrivé sur cette page et comment il revient en arrière :

  • Fil d'Ariane : Utiliser pour les hiérarchies profondes (par exemple, Accueil > Projets > Conception).
  • Bouton Retour : Utiliser pour les tâches linéaires ou lors du retour à une vue de liste spécifique.
  • Lien parent : Un simple "<- Retour vers [Parent]" pour les profondeurs de 2 niveaux.

2. Établir le cœur du contenu (Titre et métadonnées)

Appliquer visual-hierarchy-system au centre de l'en-tête :

  • Titre H1 : L'élément de texte le plus proéminent.
  • Métadonnées contextuelles : Informations secondaires (par exemple, tags, horodatages, badges d'état) placées près du titre.
  • Miniature/Avatar : Si la page représente une entité spécifique (par exemple, un profil utilisateur ou un produit).

3. Organiser les actions au niveau de la page

Diviser les actions en niveaux de priorité :

  • Action principale : Le bouton unique « Niveau 1 » (généralement un bouton rempli à fort contraste).
  • Actions secondaires : Boutons « Niveau 2 » (styles outline ou ghost) pour des tâches moins fréquentes.
  • Actions tertiaires : Menus de débordement (...) pour les tâches administratives rares.

4. Choisir un modèle spatial

  • Aligné à gauche standard (SaaS/Tableau de bord) : Fil d'Ariane/Titre à gauche, Actions à droite. Idéal pour la productivité.
  • Centré (Contenu/Article) : Tous les éléments centrés. Idéal pour la lisibilité et la narration.
  • Mise en page divisée : Titre et Actions séparés par des espaces blancs pour soulager la densité.

5. Définir le comportement fixe et de défilement

  • En-tête fixe : Garder l'en-tête de page visible si des actions (comme « Enregistrer ») sont nécessaires fréquemment lors du défilement.
  • En-tête rétrécissant : Réduire la hauteur de l'en-tête ou masquer le fil d'Ariane pendant le défilement pour maximiser l'espace de contenu.

Règles de décision

  • La règle du fil d'Ariane : Si un site a plus de 2 niveaux de profondeur, le fil d'Ariane est obligatoire dans l'en-tête de page.
  • La règle du « Un seul H1 » : L'en-tête de page DOIT contenir la balise H1 unique de la page.
  • Alignement des actions : Sur desktop, aligner les actions principales en haut à droite. Sur mobile, envisager une barre inférieure fixe pour les actions principales si l'en-tête devient trop encombré.
  • Visibilité de l'état : Les états critiques (par exemple, « Paiement en retard ») doivent être placés immédiatement à côté du titre à l'aide d'un badge ou d'une icône.

Contraintes

  • Accessibilité : Les titres d'en-tête doivent utiliser <h1>. Les fils d'Ariane doivent utiliser <nav> avec aria-label="Breadcrumb".
  • Contraste : Les badges d'état et les actions doivent respecter les exigences de contraste WCAG AA. Les boutons d'action doivent respecter la taille cible WCAG 2.2 SC 2.5.8 (minimum 24x24px, 44x44px de préférence sur les barres fixes mobiles).
  • Responsivité : Les en-têtes doivent gérer correctement les longs titres (troncature ou retour à la ligne).

Schémas d'échec courants

  • La surcharge d'actions : Placer trop de boutons dans l'en-tête, ce qui confond la tâche principale.
  • Wayfinding manquant : Oublier le fil d'Ariane sur les pages profondes, laissant les utilisateurs se sentir « perdus ».
  • Écrasement du titre : Ne pas laisser assez d'espace pour les longs titres sur mobile, ce qui les fait chevaucher les actions.
  • En-tête de site redondant : Rendre l'en-tête de page trop similaire à l'en-tête global du site, créant une confusion visuelle.

Critères de validation

  • L'en-tête contient un H1 clair qui correspond à l'étiquette de navigation.
  • Le wayfinding (fil d'Ariane/retour) est approprié pour la profondeur du site.
  • L'action principale est visuellement distincte des actions secondaires.
  • La mise en page reste fonctionnelle et lisible sur les écrans mobiles.
  • Le HTML sémantique est utilisé (<nav> pour le fil d'Ariane, <h1> pour le titre).
  • Les indicateurs d'état (le cas échéant) sont à fort contraste et faciles à repérer.

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