skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

scene-menu-bar

Documents conventions for building SceneMenuBar menus above PostHog scene title sections.

713|118|Updated Aug 11, 2020
Search Tags:#feature flags#PostHog#menu bar#reAct#frontend conventions#UI Components#kea
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill scene-menu-bar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scene-menu-bar
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/scene-menu-bar
Command: npx skills add https://github.com/PostHog/posthog-foss --skill scene-menu-bar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PostHog scenes need a consistent Mac-style menu bar above the SceneTitleSection, but without shared conventions each scene ends up with inconsistent menu placement, destructive action styling, and broken keyboard navigation or text inputs.

Core Features & Use Cases

  • Menu taxonomy: Defines the canonical File, Edit, View, Metadata, and Staff only menus with rules for item ordering, separators, and destructive action placement.
  • Component primitives: Documents SceneMenuBar components including menus, submenus, checkbox and radio items, popovers for rich inputs, and shortcut hints.
  • Wiring rules: Covers feature flag gating via SCENE_MENU_BAR, optimistic debounced saves with kea listeners, empty menu handling, and layout-aware bleed behavior.
  • Use Case: When migrating a scene like Feature Flags to the new menu bar, follow the audit checklist to map every ScenePanel item to the correct menu with proper destructive variants, opensFloatingUi affordances, and access control wrappers.

Quick Start

Ask the AI to add a new menu item to a scene's SceneMenuBar following the documented conventions for menu placement and destructive styling.

Frequently Asked Questions about scene-menu-bar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new menu item to a PostHog scene menu bar?▼

Add a SceneMenuBarItem inside the appropriate canonical menu: File for create and export actions, Edit for state mutations and toggles, View for cross-resource navigation. Destructive actions go at the bottom of File with variant="destructive" and a separator above.

Where should destructive actions like delete go in a menu bar?▼

Destructive actions like Delete, Archive, and Restore belong at the bottom of the File menu, separated by a SceneMenuBarSeparator. Use variant="destructive" for red styling and skip the opensFloatingUi prop even when a confirmation dialog opens.

Why do text inputs not work inside a menu bar menu?▼

Menu popups intercept keystrokes for typeahead and arrow navigation, blocking text inputs from receiving input. Place rich inputs like tags or comboboxes inside a SceneMenuBarPopover instead of a SceneMenuBarMenu.

How do I handle menus that render empty at runtime?▼

SceneMenuBarMenu auto-disables when children render nothing at compile time, but runtime-null children require explicit handling. Either pass a disabled prop based on the same condition the children depend on, or gate the entire menu at the parent level.

When should I use opensFloatingUi on a menu item?▼

Use opensFloatingUi for items that open modals, popovers, dialogs, or side panels, which appends an ellipsis to the label. Skip it for same-page navigations, direct actions, toggle items, and destructive items.

Related Skills

Explore More Software Engineering Skills→
october-academyoctober-academy
1

meta-ads-setup

Set up Meta and Threads campaigns in Ads Manager with tracking and creative options.

Official
Advanced
openyakopenyak
704

deploy-checklist

Generate a pre-deployment checklist with CI checks, migrations, and rollback planning.

Official
Advanced
albanistalbanist
4

umbraco-menu-items

Implement custom menu items in the Umbraco backoffice using TypeScript.

Community
Intermediate
hack-dancehack-dance
8

macos-design-guidelines

Review macOS app UI elements against Apple Human Interface Guidelines.

Official
Advanced