Instruction file imported from geekskai/blog (.cursor/rules/app.mdc). Copyright stays with the author.

App Directory Rules

• app/ is the source of truth for route structure, metadata, and route-level rendering decisions. Prefer fixing issues here before adding workarounds lower in the tree.
• This repo is locale-aware. Route changes must preserve the [locale] structure, alternate links, and proxy.ts behavior.
• Keep route files thin:
  • page.tsx: route composition and minimal data orchestration
  • layout.tsx: shared shell and metadata wrappers
  • route-local components/: interactive or visual pieces
  • route-local hooks/utils: reusable route logic
• Prefer server rendering for route shells and SEO/content sections. Push client-only logic into leaf components.
• Tool pages must optimize the first viewport on both mobile and desktop:
  • headline + primary action should be reachable quickly on mobile
  • desktop can add richer supporting content, but the main workflow should still remain prominent
• Route-level loading states must not cause the page to jump. If a route mounts browser-only UI, reserve height before hydration.
• Route metadata must remain explicit and production-safe: title, description, alternates/canonical where relevant, and metadataBase compatibility.
• API handlers under app/api should validate input, return stable JSON shapes, and avoid leaking browser-only assumptions.
• Keep static asset imports inside app/assets or public intentional. Large browser-only libraries or animations should not be pulled into route shells unless needed.
• When changing route structure or metadata behavior, verify build stability, because this repo relies on contentlayer pre-generation plus a webpack production build path for compatibility.