my-fullstack-ai-platform/.agents/rules/frontend.md

trigger	description
model_decision	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.