Communitygithub.com

coastdigitalgroup/coastai-skills

Concevoir et implémenter un cadre de navigation structuré, accessible et responsive guidant les utilisateurs à travers l'architecture d'information d'un site web.

Qu'est-ce que coastai-skills ?

Cette compétence fournit une méthodologie complète pour concevoir et implémenter des systèmes de navigation web robustes, accessibles et adaptatifs. Elle guide l'utilisateur à travers l'organisation des liens en niveaux (primaires, secondaires, utilitaires), la sélection de motifs de navigation appropriés (simple barre, dropdown, mega-menu, tiroir mobile), et la mise en place de techniques de guidage comme les fils d'Ariane et les états actifs. L'accent est mis sur l'accessibilité (WCAG 2.2), avec des règles pour les repères ARIA, la navigation au clavier et les cibles tactiles. Elle est idéale pour les équipes de design web et les développeurs front-end travaillant sur des sites multi-pages, des refontes d'architecture d'information ou des audits de navigation existants.

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

Objectif

La compétence Système de Navigation de Site fournit une méthodologie pour organiser et concevoir les chemins structurels d'un site web. Elle garantit que les utilisateurs peuvent s'orienter, trouver rapidement des informations et naviguer entre les sections sans effort sur tous les types d'appareils. Un système de navigation robuste équilibre la densité d'information avec la clarté, en maintenant l'accessibilité et la hiérarchie visuelle.

Cas d'utilisation

  • Concevoir l'en-tête et le pied de page globaux d'un nouveau site web.
  • Restructurer l'architecture de l'information (IA) d'un site complexe.
  • Mettre en œuvre des motifs de navigation responsive (ex : tiroirs mobiles, mega-menus).
  • Améliorer le "guidage" sur les sites à contenu dense (fils d'Ariane, sous-navigation).
  • Auditer la navigation existante pour détecter les lacunes d'accessibilité et d'utilisabilité.

Quand NE PAS l'utiliser

  • Applications monopages (SPA) avec routage minimal : Lorsque la navigation est purement fonctionnelle dans une vue unique (ex : un tableau de bord simple).
  • Sites immersifs/expérimentaux : Lorsque les conventions de navigation standard sont intentionnellement évitées à des fins narratives ou artistiques.
  • Pages de destination autonomes : Lorsque l'objectif est un seul chemin de conversion et que la navigation globale pourrait distraire l'utilisateur (bien qu'un "retour en haut" ou une navigation par ancres minimaliste puisse encore être utilisé).

Entrées

  1. Architecture de l'Information (IA) : Un plan du site ou une liste de pages classées par hiérarchie.
  2. Personas et objectifs des utilisateurs : Quelles sont les tâches les plus fréquentes que les utilisateurs doivent effectuer ?
  3. Priorité du contenu : Quels liens sont "Primaires" (globaux), "Secondaires" (contextuels) ou "Utilitaires" (outils/compte) ?
  4. Contraintes de l'appareil : Points de rupture cibles et exigences d'interaction tactile vs. souris.

Sorties

  1. Carte de navigation : Un guide structurel pour les éléments d'en-tête, de pied de page et de sous-navigation.
  2. Stratégie responsive : Définitions de la façon dont la navigation s'adapte du bureau au mobile.
  3. Spécification d'interaction : Comportement des menus déroulants, des états actifs et de la gestion du focus.
  4. Repères d'accessibilité : Rôles et étiquettes définis pour la navigation par lecteur d'écran.

Flux de travail

1. Catégoriser les niveaux de navigation

Divisez votre plan de site en niveaux fonctionnels :

  • Primaire : Sections principales du site (ex : Produits, Services, À propos).
  • Secondaire/contextuel : Liens spécifiques à une section (ex : catégories de produits spécifiques).
  • Utilitaire : Outils non essentiels mais nécessaires (ex : Recherche, Connexion, Sélecteur de langue).
  • Tertiaire (pied de page) : Liens SEO, mentions légales, réseaux sociaux et liens globaux redondants.

2. Sélectionner les motifs de navigation

Choisissez des motifs en fonction de la densité de contenu :

  • Barre simple : 3 à 7 liens. Idéal pour les sites de petite à moyenne taille.
  • Menus déroulants : Idéal pour les sites avec 2 niveaux de hiérarchie.
  • Mega-menu : Idéal pour les grands sites e-commerce ou d'entreprise avec de nombreuses catégories.
  • Tiroir mobile : Standard pour le mobile ; contient tous les niveaux de navigation dans une pile verticale.

3. Concevoir pour le guidage

Assurez-vous que les utilisateurs savent toujours où ils se trouvent :

  • États actifs : Distinguez visuellement le lien de la page actuelle et marquez-le avec aria-current="page" pour les technologies d'assistance.
  • Fils d'Ariane : Utilisez-les pour les sites de plus de 3 niveaux de profondeur.
  • Placement cohérent : Gardez la navigation globale au même endroit sur toutes les pages.

4. Définir le comportement responsive

Déterminez comment la navigation se réduit :

  • Le changement de point de rupture : Décidez exactement quand le menu de bureau devient un menu "Hamburger".
  • Réduction de priorité : Sur mobile, déplacez les liens utilitaires (comme "Recherche") hors du tiroir et dans l'en-tête s'ils sont hautement prioritaires.
  • Cibles tactiles : Respectez le WCAG 2.2 SC 2.5.8 (Taille minimale des cibles) à 24×24 px avec un espacement adéquat ; préférez 44×44 px pour les cibles d'interaction principales avec le pouce.

5. Établir l'accessibilité

  • Repères : Utilisez des balises <nav> avec des aria-labels uniques (ex : "Principal", "Pied de page").
  • Parcours clavier : Assurez un ordre de tabulation logique et des états :focus-visible visibles qui ne sont jamais masqués par des en-têtes fixes ou des superpositions (WCAG 2.2 SC 2.4.11 Focus non masqué).
  • Liens d'évitement : Fournissez un lien "Passer au contenu" pour les utilisateurs du clavier.
  • États ARIA : Utilisez aria-expanded et aria-controls pour les menus à bascule.

Règles de décision

  • La règle des 7 liens : Essayez de limiter la navigation primaire à 7 éléments ou moins pour réduire la charge cognitive (loi de Miller).
  • Prédictibilité plutôt qu'innovation : Utilisez des icônes standard (hamburger pour le menu, loupe pour la recherche) pour garantir une reconnaissance immédiate.
  • Hiérarchie visuelle : L'action la plus importante (ex : "Commencez") doit être un bouton stylisé, pas un lien textuel.
  • Fixe vs. statique : Utilisez des en-têtes fixes uniquement si les utilisateurs ont besoin d'un accès fréquent à la navigation pendant le défilement (ex : contenu long ou tableaux de bord).

Contraintes

  • Accessibilité : Doit être entièrement navigable au clavier seul. Le contraste des liens de navigation doit respecter le WCAG AA (4,5:1). Les cibles tactiles doivent respecter le WCAG 2.2 SC 2.5.8.
  • Responsivité : La navigation ne doit jamais déborder horizontalement de la fenêtre d'affichage.
  • Hiérarchie : La navigation ne doit pas entrer en concurrence avec le H1 de la page ou l'appel à l'action principal.

Motifs courants d'échec

  • La navigation "Mystery Meat" : Utiliser des icônes sans étiquette qui ne sont pas universellement comprises.
  • En-tête surchargé : Essayer d'intégrer trop de liens utilitaires, entraînant un encombrement et des clics erronés.
  • Tiroirs inaccessibles : Créer des menus mobiles qui ne peuvent pas être fermés au clavier ou qui ne piègent pas le focus lorsqu'ils sont ouverts.
  • Manque de retour : Aucun changement visuel lorsque l'utilisateur se trouve sur la page actuelle ou survole un lien.

Critères de validation

  • La navigation est structurée en niveaux clairs (Primaire, Utilitaire, Pied de page).
  • Les états actifs sont visuellement distincts et accessibles.
  • La navigation mobile est fonctionnelle et inclut tous les liens primaires.
  • Les utilisateurs du clavier peuvent accéder à tous les liens et fermer les menus en utilisant uniquement le clavier.
  • Les repères (<nav>) sont correctement utilisés et étiquetés.
  • Les cibles tactiles sur mobile respectent au moins le minimum WCAG 2.2 de 24×24 px (44×44 px recommandé pour les actions principales).
  • Le lien "Passer au contenu" est présent et fonctionnel.

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