メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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. |
This skill outlines the standard design principles and layout rules for modifying the main navigation bar in the Divemap project.
While both involve alerts, they serve entirely different user intents and must remain as separate, distinct icons on the top level of the UI.
MessageSquare): Synchronous, peer-to-peer communication. High urgency.Bell): Asynchronous system broadcasts (new sites, trips). Lower urgency.unreadChatCount and unreadCount).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:
Group related secondary pages into overarching dropdown menus rather than placing them on the top level.
Dive / Explore (Compass icon) dropdown.Action buttons on the right side of the navbar should rely exclusively on easily recognizable icons, completely removing text labels.
title attribute (e.g., title="Logout") on the <button> or <Link> element so browsers display a tooltip on hover.The mobile navigation (hamburger menu) functions differently than the desktop view.
MessageSquare and Bell icons. Do not duplicate these links inside the slide-out drawer list, as it wastes space and causes confusion.Collapse components) should perfectly mirror the dropdown structure used on the desktop navbar (e.g., the "Dive / Explore" grouping).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.
Assists with Alembic database migrations in Python projects. Use when generating, applying, or debugging database schema migrations to ensure consistency and prevent conflicts.
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.
Mandatory standard operating procedure for running tests in the Divemap backend. Explicitly forbids direct pytest commands that cause data loss and explains SQLite incompatibility.
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.
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.