Instruction file imported from vitalii-andriiovskyi/pawsitive-play (.github/instructions/ts-react-coding.instructions.md). Copyright stays with the author.

Project coding standards for TypeScript and React

Apply the general coding guidelines to all code.

TypeScript Guidelines

• Use TypeScript for all new code
• Follow functional programming principles where possible
• Use interfaces for data structures and type definitions
• Prefer immutable data (const, readonly)
• Use optional chaining (?.) and nullish coalescing (??) operators

React Guidelines

• Use functional components with hooks
• Follow the React hooks rules (no conditional hooks)
• Keep components small and focused
• Use the Next.js component for internal navigation
• Use the Next.js component for optimized images.
• If React Component has a property containing complex data, destructure it to create new variables at the beginning of the component body and use those variables in the JSX later. Add default values for them if needed.
• Add className to the component properties. Apply this className property to the root element of the component.
• Use CSS Modules for component styling.