Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

ui-navbar-guidelines

Sterne5

Forks1

Aktualisiert7. März 2026 um 08:35

Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

kargig

kargig/divemap

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

SKILL.md

readonly

name	ui-navbar-guidelines
description	Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Navbar UX Guidelines

This skill outlines the standard design principles and layout rules for modifying the main navigation bar in the Divemap project.

1. Do Not Merge Messages and Notifications

While both involve alerts, they serve entirely different user intents and must remain as separate, distinct icons on the top level of the UI.

Messages (MessageSquare): Synchronous, peer-to-peer communication. High urgency.
Notifications (Bell): Asynchronous system broadcasts (new sites, trips). Lower urgency.
Rule: Never merge these into a single "Inbox" dropdown. Both must be visible to display their respective unread badge counts (unreadChatCount and unreadCount).

2. Desktop Real Estate Optimization

The desktop navbar has limited horizontal space, especially for users on smaller laptops. If you need to add a new section, use these strategies to save space:

Consolidation (The "Explore" Pattern)

Group related secondary pages into overarching dropdown menus rather than placing them on the top level.

Example: "Dive Sites", "Dive Routes", "Diving Centers", and "Dive Trips" should all live under a single Dive / Explore (Compass icon) dropdown.

Icon-Only Actions

Action buttons on the right side of the navbar should rely exclusively on easily recognizable icons, completely removing text labels.

Rule: Use standard icons (Messages, Bell, Info, Profile Avatar, Logout).
Accessibility: You must include a descriptive title attribute (e.g., title="Logout") on the <button> or <Link> element so browsers display a tooltip on hover.

Logical Grouping & Dividers

Group core platform actions (Messages, Notifications).
Group user/system actions (Admin, Info, Profile).
The Logout Button: The Logout button must ALWAYS be the absolute right-most element in the navbar, visually separated from the rest of the navigation items.

3. Mobile Drawer Principles

The mobile navigation (hamburger menu) functions differently than the desktop view.

Rule 1: Avoid Redundancy: The top-level sticky header on mobile already contains the MessageSquare and Bell icons. Do not duplicate these links inside the slide-out drawer list, as it wastes space and causes confusion.
Rule 2: Grouping Match: The categorization inside the mobile accordion (Collapse components) should perfectly mirror the dropdown structure used on the desktop navbar (e.g., the "Dive / Explore" grouping).

Mehr aus diesem Repository

gleiches Repository

mobile-first-design

kargig/divemap

Guidelines and patterns for implementing high-quality, "mobile-first" responsive user interfaces in the Divemap project using Tailwind CSS. Use this skill when designing or refactoring components and pages to ensure they are visually striking, functional, and touch-optimized on all devices.

2026-07-105

alembic-helper

kargig/divemap

Assists with Alembic database migrations in Python projects. Use when generating, applying, or debugging database schema migrations to ensure consistency and prevent conflicts.

2026-05-085

android-publisher

kargig/divemap

Workflow for building, testing, and publishing new Android app versions (PWA/TWA) using Bubblewrap to the Google Play Store. Use this when the user wants to build a new APK/AAB or release an update to Android.

2026-04-185

backend-testing

kargig/divemap

Mandatory standard operating procedure for running tests in the Divemap backend. Explicitly forbids direct pytest commands that cause data loss and explains SQLite incompatibility.

2026-04-015

xss-protection

kargig/divemap

Guidelines and workflows for detecting and fixing Cross-Site Scripting (XSS) vulnerabilities in frontend code. Use this skill when auditing frontend components, reviewing PRs with user-generated content, or investigating reported XSS issues.

2026-03-275

api-endpoint-testing

kargig/divemap

Standard procedure for testing authenticated FastAPI endpoints via curl in the CLI. Use this when verifying backend logic without a frontend, or when debugging authentication/permission issues.

2026-03-185

name	ui-navbar-guidelines
description	Standards and UX principles for modifying the desktop and mobile navigation bars. Use when asked to add, remove, or rearrange items in the header, or when tasked with saving horizontal space in the UI.

Navbar UX Guidelines

This skill outlines the standard design principles and layout rules for modifying the main navigation bar in the Divemap project.

1. Do Not Merge Messages and Notifications

While both involve alerts, they serve entirely different user intents and must remain as separate, distinct icons on the top level of the UI.

Messages (MessageSquare): Synchronous, peer-to-peer communication. High urgency.
Notifications (Bell): Asynchronous system broadcasts (new sites, trips). Lower urgency.
Rule: Never merge these into a single "Inbox" dropdown. Both must be visible to display their respective unread badge counts (unreadChatCount and unreadCount).

2. Desktop Real Estate Optimization

The desktop navbar has limited horizontal space, especially for users on smaller laptops. If you need to add a new section, use these strategies to save space:

Consolidation (The "Explore" Pattern)

Group related secondary pages into overarching dropdown menus rather than placing them on the top level.

Example: "Dive Sites", "Dive Routes", "Diving Centers", and "Dive Trips" should all live under a single Dive / Explore (Compass icon) dropdown.

Icon-Only Actions

Action buttons on the right side of the navbar should rely exclusively on easily recognizable icons, completely removing text labels.

Rule: Use standard icons (Messages, Bell, Info, Profile Avatar, Logout).
Accessibility: You must include a descriptive title attribute (e.g., title="Logout") on the <button> or <Link> element so browsers display a tooltip on hover.

Logical Grouping & Dividers

Group core platform actions (Messages, Notifications).
Group user/system actions (Admin, Info, Profile).
The Logout Button: The Logout button must ALWAYS be the absolute right-most element in the navbar, visually separated from the rest of the navigation items.

3. Mobile Drawer Principles

The mobile navigation (hamburger menu) functions differently than the desktop view.

Rule 1: Avoid Redundancy: The top-level sticky header on mobile already contains the MessageSquare and Bell icons. Do not duplicate these links inside the slide-out drawer list, as it wastes space and causes confusion.
Rule 2: Grouping Match: The categorization inside the mobile accordion (Collapse components) should perfectly mirror the dropdown structure used on the desktop navbar (e.g., the "Dive / Explore" grouping).