Instruction file imported from QHX0329/bargain-tfg (.github/instructions/frontend-rn.instructions.md). Copyright stays with the author.

Frontend Scope

• Use functional React components and hooks.
• Use PascalCase for components and camelCase for variables, functions, and hooks.
• Keep TypeScript types/interfaces explicit for props and API contracts.

UI And Architecture

• Preserve existing app navigation and store patterns (React Navigation + Zustand).
• Keep screens thin; move reusable UI and logic to components/ and hooks/.
• Prefer centralized API access through src/api/ clients rather than ad-hoc fetch calls.

Style And Consistency

• Keep formatting aligned with project ESLint/Prettier defaults (print width around 100, single quotes).
• Reuse theme tokens from src/theme/ instead of hardcoded visual values.
• Avoid introducing one-off patterns when an existing component or utility covers the need.

Validation

• Run frontend lint and tests for changed areas:
• cd frontend && npx eslint src/
• cd frontend && npx jest --coverage

Design Deliverables

• Do not provide UI wireframes as ASCII art.
• Use renderable HTML/CSS/JS, SVG, or PNG for visual mockups.