# Frontend Pages Router

> Change or review the Next.js frontend in this repository. Use when work touches frontend/pages, frontend/components, frontend/services, auth UX, article detail flows, sitewide chat UI, browser-only state, or Pages Router behavior.

- Skill: `hoangsonww/frontend-pages-router` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add hoangsonww/frontend-pages-router`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangsonww/frontend-pages-router/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hoangsonww (https://skillmd.com/u/hoangsonww)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hoangsonww/frontend-pages-router

---


# Frontend Pages Router

Preserve client-side behavior before refactoring structure.

## Follow This Workflow

1. Identify the route or component that owns the behavior.
2. Check for browser-only dependencies such as `localStorage`, cookies, `window`, and shallow routing.
3. Preserve query syncing and debounce behavior on `/home`.
4. Preserve article detail flows across favorites, comments, ratings, related content, bias analysis, and chat.
5. Validate with `cd frontend && npm run lint`; add Playwright when the change affects route behavior or interactions.

## Use The References

- Read `references/frontend-map.md` for high-risk routes and components.
- Read `references/chat-ui.md` when the task touches the sitewide chat page.