---
trigger: model_decision
description: Applied when creating or modifying frontend components, Next.js pages, Tailwind styling, and UI logic in the app/ or components/ directories to ensure strict TypeScript usage, consistent design patterns, and responsive best practices.
---

# Frontend Rules

This document outlines the coding standards and best practices for the frontend of the Teklifsat Platform.

## TypeScript & Types

- **Never use `any`**: Always define proper interfaces or types for your data. If a type is truly unknown, use `unknown` and type guards.
- **Strict Typing**: Enable and follow strict TypeScript rules.
- **Component Props**: Always define an interface or type for component props, even if empty.

## React & Next.js

- **Functional Components**: Use functional components with arrow functions.
- **Hooks**: Use standard hooks (`useState`, `useEffect`, `useMemo`, `useCallback`) appropriately.
- **App Router Design**:
  - Default to Server Components (`'use server'`) for data fetching.
  - Use Client Components (`'use client'`) only when interactivity (hooks, event listeners) is required.
  - Keep Client Components at the leaves of your component tree.
- **File Naming**: Use `kebab-case` for file and directory names.

## Styling & UI

- **Tailwind CSS**: Use Tailwind for all styling. Avoid inline styles or custom CSS classes unless absolutely necessary.
- **Dynamic Classes**: Always use the `cn` utility from `lib/utils.ts` for conditional or dynamic class merging.
- **Radix UI**: Use Radix UI primitives for complex accessible components (Modals, Dropdowns, etc.).
- **Icons**: Use `Lucide` as the primary icon set.
- **Responsive Design**: Mobile-first approach is mandatory. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, etc.).
- **Theme Consistency**: Use the CSS variables defined in `globals.css` for colors, spacing, and other design tokens.

## State Management

- Use React context or appropriate libraries when state needs to be shared across many components.
- Prefer local state for component-specific data.
- Leverage Supabase Realtime for live updates where necessary.

## Performance & SEO

- **Image Optimization**: Use the Next.js `Image` component for all images.
- **Semantic HTML**: Use proper semantic tags (`<header>`, `<footer>`, `<main>`, `<section>`, etc.) for better accessibility and SEO.
- **Meta Tags**: Ensure each page has appropriate meta titles and descriptions.