Verified:GitHub

page-pattern

Implements page and component structures with UIModel mappers, hooks, and navigation handlers for Next.js and React Native.

Updated Apr 7, 2026

Search Tags:#next.js #navigation #react native #component architecture #custom hooks #page pattern #uimodel

One-click install

npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill page-pattern-hontauadrian

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: page-pattern
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/scout/skills/page-pattern
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill page-pattern-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building pages and components without a consistent architecture leads to tangled logic, router calls scattered through hooks, and untestable UI code. This Skill enforces a strict five-file page pattern that separates types, mapping, logic, navigation, and presentation across standalone Next.js, monorepo web, and monorepo mobile variants. ## Core Features & Use Cases - Five-File Page Structure: Generates types.ts, a pure UIModel mapper, a logic hook without router access, a navigation handler owning the router, and a UI-only page component. - Multi-Variant Support: Provides implementations for standalone Next.js, monorepo web (typed label constants), and monorepo mobile (scopedTranslate, expo-router). - Route Guard Contract: Enforces a machine-parseable JSDoc header declaring routeGuard, unauthRedirect, and postLoginRedirect for every page. - Use Case: When adding a new login screen to a monorepo, use this Skill to scaffold the hook composing shared base hooks, the mapper producing the UIModel, and the thin app route wrapper. ## Quick Start Create a new login page following the page pattern with types, mapper, hook, navigation handler, and a thin route wrapper.

Frequently Asked Questions about page-pattern

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

FAQPage Schema

Why should components not contain useState or useQuery?▼

The component pattern forbids all logic hooks like useState, useReducer, useMemo, and useQuery in presentational files. All logic lives in a custom hook, all types in types.ts, and barrel exports in index.ts, keeping components purely presentational and testable.