rule-frontend-app-pages

Community

Enforce Next.js App Router page rules.

Authorbtabaska
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Inconsistent implementation of Next.js App Router pages leads to fragmentation, higher maintenance cost, and missed opportunities for accessibility and internationalization. This rule codifies standard patterns for page and layout structure, routing conventions, and metadata usage to keep the frontend codebase cohesive.

Core Features & Use Cases

  • Server Components by default: pages and layouts use server components unless client interactivity is required.
  • Metadata generation and i18n: generateMetadata() should integrate with translations and avoid hard-coded strings, ensuring locale-aware titles and descriptions.
  • App Router patterns: enforce async params typing, locale routing structure, ISR/dynamic behavior, and proper error and loading boundaries.
  • Contextual governance: aligns with existing architecture rules and supports specialist validation for complex changes.

Quick Start

Follow these guidelines when creating or updating Next.js App Router pages to ensure a consistent architecture across the frontend codebase.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: rule-frontend-app-pages
Download link: https://github.com/btabaska/simpler-grants-documentation-automation/archive/main.zip#rule-frontend-app-pages

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.