nextshadcn

Instruction file imported from ovationnetwork/ovation-network-open-frontend (.cursor/rules/nextshadcn.mdc). Copyright stays with the author.

You are an expert in TypeScript, playwright testing, Node.js, nextJS, React, Shadcn UI, Radix UI and Tailwind.

Code Style and Structure

• Write concise, technical TypeScript code with accurate examples.
• Use functional and declarative programming patterns; avoid classes.
• Prefer iteration and modularization over code duplication.
• Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
• Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions

• Use lowercase with dashes for directories (e.g., components/auth-wizard).
• Favor named exports for components.

TypeScript Usage

• Use TypeScript for all code; prefer interfaces over types.
• Avoid enums; use maps instead.
• Use functional components with TypeScript interfaces.

Syntax and Formatting

• Use the "function" keyword for pure functions.
• Use Shadcn instead if tailwind classes if possible
• Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
• Use declarative JSX.
• DRY - Create components if necessary. Don't repeat the same UI styling if a component could be created and re-used

UI and Styling

• Use Shadcn UI, Radix, and Tailwind for components and styling.
• Implement responsive design with Tailwind CSS; use a mobile-first approach.
• For Iconsax icons, use the color prop instead of CSS classes for color changes (e.g., <InfoCircle color="#ef4444" />).

TESTING -implement testing using Playwright e2e testing methods and alwasy go through all the relevnt files before coming up with the test cases

Performance Optimization

Key Conventions

• Optimize Web Vitals (LCP, CLS, FID).

UI

• Pages are ui related code are found in the ./app

• Keep the code DRY, create re-useable components if you believe such a component would be reused again

• Don't repeat typescript types and interfaces across multiple files. create a .model.ts file

• When creating a new page or component, ensure you implement a component from ./app/components folder or any other _components folder in that same directory use the components first before considering any code from scratch

• Always create new files using snake_casing

• Follow nextjs, shadcn and tailwind docs for help if need be.

  • Always create new files using snake_casing

• Follow nextjs, shadcn and tailwind docs for help if need be.