app-specific-patterns

What problem does it solve?

This Skill reduces inconsistency and developer friction in the GROWI apps/app frontend by documenting concrete conventions for Next.js routing, Jotai state organization, SWR data fetching, and testing so teams can implement features faster and with fewer integration bugs.

Core Features & Use Cases

• Next.js pages router: Enforce the .page.tsx filename suffix and the getLayout pattern so pages are uniformly composed and layouts are reusable.
• Jotai state management: Prescribe a directory layout with global states under src/states, modal atoms as one file per modal, and feature-scoped atoms under features/{name}/client/states.
• SWR data fetching: Centralize hooks in stores-universal, use immutable SWR for static queries, and prefer null keys for conditional fetching.
• Testing patterns: Provide utilities and examples for mocking the Next.js router, hydrating Jotai atoms in tests, and wrapping components with an SWRConfig provider to isolate cache during tests.
• Path aliases: Standardize imports using the ~/ alias to simplify refactors and maintain consistent module resolution.

Quick Start

Create a page file with a .page.tsx suffix, export a NextPageWithLayout component, and add a getLayout function that wraps the page with the appropriate layout.