46 lines
2.4 KiB
Markdown
46 lines
2.4 KiB
Markdown
|
---
|
||
|
|
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.
|