skills.rest
wonkpentink
wonkpentinkCOMMUNITY
Explore all skills by this author →
GitHub

full-page-screen-components

Create React Router page routes with components, data fetching, and authentication.

Updated Mar 1, 2026
Search Tags:#authentication#react#routing#state-management#data-fetching#page-structure
One-click install
npx skills add https://github.com/wonkpentink/agent-skills-fe --skill full-page-screen-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: full-page-screen-components
Source: https://github.com/wonkpentink/agent-skills-fe/tree/main/skills/full-page-screen-components
Command: npx skills add https://github.com/wonkpentink/agent-skills-fe --skill full-page-screen-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building full page/screen views often requires piecing together routing, data fetching, auth checks, and global state in a consistent way. This guide provides a repeatable structure and best practices to streamline page development.

Core Features & Use Cases

  • Page structure patterns: Standardized src/pages layouts (e.g., Home, Detail, List) that promote consistency and reusability.
  • Data fetching & authentication: Guidance on integrating API calls and authentication checks at the page level for secure, data-driven views.
  • Routing & state flow: Examples of composing routes, modals, and page-wide state management to handle complex interactions.
  • Use Case: Build a dashboard page that fetches data, shows a loading state, and guards access with role-based checks.

Quick Start

Create a new page under src/pages following the standard layout, wire data fetching, add authentication checks, and configure routing as demonstrated.

Frequently Asked Questions about full-page-screen-components

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

FAQPage Schema
How do I structure a complete React page with routing, data fetching, and authentication?▼

A complete React page structure consolidates routing, data fetching, and authentication checks under a standardized src/pages layout to ensure consistent, reusable, and secure page development across dashboard, list, and detail views.

What is the best way to organize React Router pages that require access control?▼

The best way to organize React Router pages with access control is applying a repeatable folder layout under src/pages that integrates role-based authentication checks and global state directly at the page level.

How do I handle loading states and modals when building dashboard pages in React?▼

Handling loading states and modals in React dashboard pages involves composing coordinated UI components with store-based state management to manage complex interactions and data fetching lifecycles consistently.

Can I use this page structure pattern for list and detail views, not just dashboards?▼

Yes, this page structure pattern applies to dashboard-like pages, detail views, and list pages, providing a standardized layout that supports headers, modals, tables, and store-based state across various view types.

Do I need specific routing dependencies to implement standardized React page components?▼

No specific routing dependencies are required to implement standardized React page components, as the guide focuses on composition patterns for React Router, data fetching, and state management rather than external libraries.

Related Skills

Explore More Software Engineering Skills→
chaitinchaitin
5

frontend-project-creator

Scaffold React frontend projects with Vite, TypeScript, and chosen UI libraries.

Official
Advanced
agwacomagwacom

setup-deploy

Detect hosting platforms and write deployment configuration to CLAUDE.md.

Official
Advanced
randoneeringrandoneering

building-streamlit-multipage-apps

Build multi-page Streamlit apps with centralized navigation and per-page modules.

Community
Intermediate
zzoohubzzoohub

nextjs

Standardize Next.js App Router patterns for project structure and development.

Community
Intermediate