# Frontend Pages Router

> Use this skill when changing the Next.js frontend in this repository, especially pages/, components/, services/, auth flows, article detail pages, favorites, translation, or the sitewide AI chat UI.

- Skill: `hoangsonww/frontend-pages-router-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add hoangsonww/frontend-pages-router-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangsonww/frontend-pages-router-2/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-2

---


# Frontend Pages Router

This skill is for `frontend/`.

## Working Model

- The app uses the Pages Router.
- UI state is spread across page components, shared components, CSS files, and browser storage.
- Several features depend on client-only APIs and local persistence.

## Working Rules

- Check SSR versus client-only assumptions before moving logic.
- Preserve shallow routing, search debounce, and query synchronization on `/home`.
- Preserve localStorage keys unless the migration is intentional.
- Keep auth token handling consistent when touching requests.
- If you touch the sitewide chat UI, preserve SSE parsing, citations, warnings, and scrolling behavior.

## Validation

- Run `cd frontend && npm run lint` for code changes when feasible.
- Run Playwright for route or interaction changes when the task materially affects UX.

## References

- For route and component map, read `references/frontend-map.md`.
- For chat UI specifics, read `references/chat-ui.md`.