skills.rest
therealityreport
therealityreportCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Align Next.js App Router UI, routing, and accessibility with backend contracts.

Updated Aug 23, 2025
Search Tags:#frontend#nextjs#app-router#server-client#ui-accessibility#trr-app
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill senior-frontend-therealityreport
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/senior-frontend
Command: npx skills add https://github.com/therealityreport/trr-app --skill senior-frontend-therealityreport

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TRR-APP frontend changes often require close coordination with backend contracts; this skill provides a repo-local ownership guide for frontend changes, ensuring UI, routing, and accessibility considerations stay aligned with stable contracts.

Core Features & Use Cases

  • Defines frontend boundaries for App Router components, server/client placement, and metadata integration.
  • Guides UI state behavior, loading/error handling and accessibility checks during feature work.
  • Use case: when updating the Next.js App Router UI for TRR-APP, activate this skill to align frontend changes with backend contracts and UI patterns.

Quick Start

Apply this skill to guide frontend changes in TRR-APP, ensuring UI, routing, and accessibility stay aligned with backend contracts.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I structure Next.js App Router server and client components to align with backend contracts?▼

To align Next.js App Router server and client components with backend contracts, you must enforce strict server/client component placement boundaries and integrate metadata handling to ensure deterministic UI rendering and secure data collaboration.

What is the best way to configure loading and error boundaries in a Next.js App Router project?▼

Configuring loading and error boundaries in a Next.js App Router project requires establishing client-side UX guardrails and defining frontend boundaries. This ensures UI state behavior and accessibility checks remain aligned with stable backend contracts during feature work.

When do I need to align frontend routing and accessibility checks with backend API contracts?▼

You need to align frontend routing and accessibility checks with backend API contracts when updating the Next.js App Router UI. This coordination ensures UI state behavior, metadata integration, and server/client component placement satisfy stable contract requirements.

Can I use this approach to guide UI state behavior and metadata integration for TRR-APP frontend changes?▼

Yes, you can use this approach to guide TRR-APP frontend changes by defining frontend boundaries for App Router components, server/client placement, and metadata integration. It ensures UI state behavior and accessibility checks align with stable backend contracts.

What are the limitations of managing frontend conventions without aligning server/client component placement to backend contracts?▼

Without aligning server/client component placement to backend contracts, frontend conventions break down, causing insecure collaboration, misaligned UI state behavior, and improper loading and error boundary handling in Next.js App Router projects.

Related Skills

Explore More Software Engineering Skills→
ColdstartLabs-caColdstartLabs-ca

nextjs-app-router

Implement Next.js 15 App Router patterns for routes, API endpoints, and components.

Official
Intermediate
MonumentalSystemsMonumentalSystems
17

fullstack-conventions

Enforce full-stack coding conventions for React and TypeScript services.

Official
Intermediate
reginadelrio-vadaireginadelrio-vadai

nextjs-supabase-auth

Integrate Supabase Auth with Next.js App Router using @supabase/ssr.

Community
Advanced
bbartlingbbartling
157

react-operator-dashboard

Generate React operator dashboards with Vite and react-router-dom.

Community
Basic