skills.rest
marcusta
marcustaCOMMUNITY
Explore all skills by this author →
GitHub

navigation-guard

Detect PlayerPageLayout misuse on TapScore detail and list pages.

Updated May 25, 2025
Search Tags:#layout#frontend#navigation#code-review#detail-page#playerpagelayout
One-click install
npx skills add https://github.com/marcusta/golf-serie --skill navigation-guard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation-guard
Source: https://github.com/marcusta/golf-serie/tree/main/.claude/skills/navigation-guard
Command: npx skills add https://github.com/marcusta/golf-serie --skill navigation-guard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates correct usage of PlayerPageLayout component in TapScore. Ensures detail pages use PlayerPageLayout while top-level list pages do not. Use when implementing new pages or reviewing navigation structure to prevent misuse and maintain consistent UX.

Core Features & Use Cases

  • Detect improper usage of PlayerPageLayout on list pages and detail pages.
  • Provide guidance for code reviews and PR reviews to enforce layout consistency.
  • Generate violation reports and proposed fixes to restore proper navigation structure.

Quick Start

Review a target page to confirm detail pages use PlayerPageLayout and list pages use the plain layout.

Frequently Asked Questions about navigation-guard

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

FAQPage Schema
How do I enforce correct layout usage for detail pages and list pages in frontend code reviews?▼

Enforce correct layout usage in frontend code reviews by validating that detail pages implement the PlayerPageLayout component while top-level list pages use the plain layout. This prevents navigation-structure violations and maintains consistent UX patterns.

What is the correct navigation structure for detail pages versus list pages?▼

Correct navigation structure requires detail pages to use PlayerPageLayout and list pages to avoid it. This distinction enforces proper isDetailView pattern updates, consistent back-button behavior, and breadcrumbs across the application.

How do I detect improper PlayerPageLayout usage during a pull request review?▼

Detect improper PlayerPageLayout usage during a pull request review by checking if list pages incorrectly implement the detail layout or if detail pages omit it. Generate violation reports and apply proposed fixes to restore proper navigation structure.

Does this navigation guard work for pages without existing isDetailView logic?▼

This navigation guard works for pages without existing isDetailView logic by providing guidance to update layout patterns. It identifies missing logic and promotes consistent back-button behavior and breadcrumbs when implementing new pages.

Why does my list page show incorrect back-button behavior after adding a detail layout?▼

Your list page shows incorrect back-button behavior because adding a detail layout to a list page violates the navigation structure. List pages should use the plain layout, while only detail pages should implement PlayerPageLayout with proper breadcrumbs.

Related Skills

Explore More Software Engineering Skills→
wangtengda0310wangtengda0310

frontend-layout-docs

Document frontend layouts with ASCII diagrams and component hierarchy maps.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-breadcrumb

Implement Canopy lg-breadcrumb navigation in Angular projects.

Official
Intermediate
devopstalesdevopstales
1

engram-tui-quality

Enforce UX rules and deterministic tests for Engram TUI interfaces.

Community
Intermediate
patternflypatternfly
10

pf-component-structure

Audits and enforces proper structural nesting in PatternFly React components.

Official
Intermediate