RMF112018/HBC Navigation UX Hierarchy & Intelligent Project Picker
.claude/skills/hbc-navigation-ux-hierarchy/SKILL.md
11/10 construction-grade Mac bar, sidebar splitting, unified Cmd+K command palette, rich project picker, and navigation refinements for HBC Project Controls
tools
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add RMF112018/Project-Controls HBC Navigation UX Hierarchy & Intelligent Project PickerInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 11:22 AM4.3s1 file scanned
SKILL.md
- name:
- HBC Navigation UX Hierarchy & Intelligent Project Picker
- description:
- 11/10 construction-grade Mac bar, sidebar splitting, unified Cmd+K command palette, rich project picker, and navigation refinements for HBC Project Controls
- version:
- 1.0
- category:
- ux-navigation
- triggers:
- navigation, sidebar, mac-bar, project-picker, enhanced-picker, cmd+k, command-palette, hierarchy, breadcrumbs, optimistic-switch, shell-overlay, favorites, recent-projects, kpi-preview
- updated:
- 2026-02-21
HBC Navigation UX Hierarchy & Intelligent Project Picker Skill
Activation
Any request involving navigation layout, Mac bar, NavigationSidebar, project picker enhancements, Cmd/Cmd+K, command palette unification, breadcrumbs, top-level tabs, or UX/UI refinements to project switching and context navigation.
High-ROI Protocol
- Verify current state via AppShell.tsx (Mac bar), NavigationSidebar.tsx, project picker component(s), and TanStack Router guards at commit c76af8d baseline.
- Enforce 11/10 construction UX: 5-pillar top tabs (Hub | Precon | Ops | Admin | Reports), context-only sidebar, rich HbcCard previews (Stage/Status/KPIs) in picker, unified HbcCommandPalette, shell hydration overlay, Fluent-token transitions.
- Align strictly to existing patterns: HbcMotion (max 300 ms, reduced-motion), FeatureGate/RoleGate/PermissionGate, TanStack Router v1 preload/guards, HbcCard/KPICard/StageBadge reuse, HbcTanStackTable virtualization.
- Capture diagnostics: keyboard navigation + a11y audit, before/after perceived latency (project switch < 400 ms), bundle impact check.
- Deliver minimal diff-ready changes + exact ready-to-insert CLAUDE.md diffs for §§4, 7, 15 and UI/Navigation subsection.
- Re-verify with Playwright (switch + keyboard + mobile flows) and Storybook dark-mode variants; confirm zero jank for field PM workflows.
Reference: CLAUDE.md §§4 (Core Architecture Patterns), §15 (Current Phase Status), UI Components / Navigation subsection, and PERFORMANCE_OPTIMIZATION_GUIDE.md §5 (for any motion/bundle side-effects).
Related Skills
RMF112018/TanStack Router Stability SPFx
tools
VerifiedTrustedCommunity
Stable singleton pattern for TanStack Router v1 preventing route-tree recreation and UI freezes on AppContext changes in SPFx
SKILL.mdUpdated Apr 17, 2026
RMF112018/TanStack Query & Virtualization
databases
VerifiedTrustedCommunity
Query-key stability, default options, and virtualization threshold enforcement
SKILL.mdUpdated Apr 17, 2026
RMF112018/SPFx Performance Diagnostics & Bundle Optimization
tools
VerifiedTrustedCommunity
High-ROI bundle reduction, profiler-driven diagnostics, and verification for SPFx + Vite environments
SKILL.mdUpdated Apr 17, 2026
RMF112018/Schedule What-If Sandbox & Monte Carlo
databases
VerifiedTrustedCommunity
Branching what-if scenarios and Monte Carlo risk simulation with tornado/S-curve visualization
SKILL.mdUpdated Apr 17, 2026