create-tigra 1.0.0

package/template/.agent/rules/client/01-project-structure.md

@@ -0,0 +1,326 @@
+---
+trigger: always_on
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Project Structure & File Naming
+
+## Folder Structure
+
+```
+src/
+├── app/                    # App configuration
+│   ├── App.tsx
+│   ├── router.tsx
+│   └── providers.tsx
+├── components/
+│   ├── layout/            # Header, Footer, MainLayout
+│   │   ├── Header.tsx
+│   │   ├── Footer.tsx
+│   │   ├── Sidebar.tsx
+│   │   └── MainLayout.tsx
+│   └── common/            # Shared components
+│       ├── LoadingSpinner.tsx
+│       ├── ErrorBoundary.tsx
+│       ├── ProtectedRoute.tsx
+│       ├── Pagination.tsx
+│       └── EmptyState.tsx
+├── features/              # Feature modules (domain-driven)
+│   ├── auth/
+│   │   ├── components/    # LoginForm, RegisterForm
+│   │   ├── hooks/         # useAuth, useLogin, useRegister
+│   │   ├── pages/         # LoginPage, RegisterPage
+│   │   ├── services/      # auth.service.ts
+│   │   ├── store/         # authSlice.ts (Redux)
+│   │   ├── types/         # auth.types.ts
+│   │   └── utils/         # auth.utils.ts
+│   ├── resources/         # Example feature
+│   │   ├── components/
+│   │   ├── hooks/
+│   │   ├── pages/
+│   │   ├── services/
+│   │   ├── types/
+│   │   └── utils/
+│   └── users/
+├── hooks/                 # Global custom hooks
+│   ├── useDebounce.ts
+│   ├── useLocalStorage.ts
+│   └── useMediaQuery.ts
+├── lib/
+│   ├── api/
+│   │   ├── axios.config.ts
+│   │   └── api.types.ts
+│   ├── constants/
+│   │   ├── routes.ts
+│   │   ├── api-endpoints.ts
+│   │   └── app.constants.ts
+│   └── utils/
+│       ├── format.ts
+│       ├── validation.ts
+│       └── error.ts
+├── store/                 # Redux store
+│   ├── index.ts
+│   └── hooks.ts
+├── types/                 # Global types
+│   ├── index.ts
+│   └── api.types.ts
+└── styles/
+    ├── globals.css        # Global CSS
+    └── theme.css          # Ant Design custom theme (if needed)
+```
+
+## File Naming Rules
+
+### Components
+- **PascalCase**: `ResourceCard.tsx`, `LoginForm.tsx`
+- **Pattern**: `<ComponentName>.tsx`
+- **CSS**: If using CSS Modules, name as `<ComponentName>.module.css`
+
+### Pages
+- **PascalCase + Page suffix**: `ResourcesPage.tsx`, `LoginPage.tsx`
+- **Pattern**: `<FeatureName>Page.tsx`
+
+### Hooks
+- **camelCase + use prefix**: `useAuth.ts`, `useResources.ts`
+- **Pattern**: `use<HookName>.ts`
+
+### Services
+- **camelCase + .service suffix**: `auth.service.ts`, `resource.service.ts`
+- **Pattern**: `<domain>.service.ts`
+
+### Types
+- **camelCase + .types suffix**: `auth.types.ts`, `resource.types.ts`
+- **Pattern**: `<domain>.types.ts`
+
+### Store (Redux)
+- **camelCase + Slice suffix**: `authSlice.ts`, `resourceSlice.ts`
+- **Pattern**: `<domain>Slice.ts`
+
+### Utils
+- **camelCase + .utils suffix**: `auth.utils.ts`, `date.utils.ts`
+- **Pattern**: `<purpose>.utils.ts`
+
+### Constants
+- **camelCase**: `routes.ts`, `api-endpoints.ts`, `app.constants.ts`
+
+## Module Structure Pattern
+
+Every feature module follows this pattern:
+
+```
+features/<domain>/
+├── components/         # Feature-specific components
+├── hooks/             # Feature-specific hooks
+├── pages/             # Feature pages (routes)
+├── services/          # API service
+├── store/             # Redux slice (if needed)
+├── types/             # TypeScript types
+└── utils/             # Feature utilities
+```
+
+## Import Path Aliases
+
+```json
+// tsconfig.json & vite.config.ts
+{
+  "paths": {
+    "@/*": ["./src/*"],
+    "@/components/*": ["./src/components/*"],
+    "@/features/*": ["./src/features/*"],
+    "@/lib/*": ["./src/lib/*"],
+    "@/hooks/*": ["./src/hooks/*"],
+    "@/store/*": ["./src/store/*"],
+    "@/types/*": ["./src/types/*"],
+    "@/styles/*": ["./src/styles/*"]
+  }
+}
+```
+
+## Import Order
+
+```tsx
+// 1. React and framework
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// 2. Third-party libraries (Ant Design first)
+import { Button, Card, Input } from 'antd';
+import { useQuery } from '@tanstack/react-query';
+
+// 3. Styles
+import './ResourceCard.css'; // or .module.css
+
+// 4. Local components
+import { ResourceCard } from '../components/ResourceCard';
+
+// 5. Hooks
+import { useAuth } from '@/features/auth/hooks/useAuth';
+import { useResources } from '../hooks/useResources';
+
+// 6. Services
+import { resourceService } from '../services/resource.service';
+
+// 7. Types (always use 'type' keyword)
+import type { Resource } from '../types/resource.types';
+
+// 8. Utils
+import { formatDate } from '@/lib/utils/format';
+```
+
+## Constants Structure
+
+### API Endpoints
+
+```tsx
+// lib/constants/api-endpoints.ts
+export const API_ENDPOINTS = {
+  AUTH: {
+    REGISTER: '/auth/register',
+    LOGIN: '/auth/login',
+    LOGOUT: '/auth/logout',
+    REFRESH: '/auth/refresh',
+    ME: '/auth/me',
+    VERIFY_EMAIL: '/auth/verify-email',
+    RESEND_VERIFICATION: '/auth/resend-verification',
+    REQUEST_PASSWORD_RESET: '/auth/request-password-reset',
+    RESET_PASSWORD: '/auth/reset-password',
+  },
+  USERS: {
+    ME: '/users/me',
+    UPDATE_ME: '/users/me',
+    DELETE_ME: '/users/me',
+  },
+  RESOURCES: {
+    LIST: '/resources',
+    MY_RESOURCES: '/resources/my',
+    CREATE: '/resources',
+    GET: (id: string) => `/resources/${id}`,
+    UPDATE: (id: string) => `/resources/${id}`,
+    DELETE: (id: string) => `/resources/${id}`,
+  },
+} as const;
+```
+
+### Routes
+
+```tsx
+// lib/constants/routes.ts
+export const ROUTES = {
+  HOME: '/',
+  LOGIN: '/login',
+  REGISTER: '/register',
+  VERIFY_EMAIL: '/verify-email',
+  RESET_PASSWORD: '/reset-password',
+  DASHBOARD: '/dashboard',
+  PROFILE: '/profile',
+  RESOURCES: {
+    LIST: '/resources',
+    DETAILS: (id: string) => `/resources/${id}`,
+    MY_RESOURCES: '/my-resources',
+    CREATE: '/resources/create',
+    EDIT: (id: string) => `/resources/${id}/edit`,
+  },
+} as const;
+```
+
+### App Constants
+
+```tsx
+// lib/constants/app.constants.ts
+export const APP_NAME = 'My Application';
+
+export const PAGINATION = {
+  DEFAULT_PAGE: 1,
+  DEFAULT_LIMIT: 10,
+  MAX_LIMIT: 100,
+} as const;
+
+export const USER_ROLES = {
+  USER: 'USER',
+  ORG: 'ORGANIZATION',
+  ADMIN: 'ADMIN',
+} as const;
+
+export const CURRENCIES = {
+  GEL: 'GEL',
+  USD: 'USD',
+  EUR: 'EUR',
+} as const;
+```
+
+## Naming Conventions
+
+### Variables
+- **camelCase**: `userName`, `resourceList`, `isLoading`
+
+### Functions
+- **camelCase**: `getUserData()`, `handleSubmit()`, `formatPrice()`
+
+### Constants
+- **UPPER_SNAKE_CASE**: `API_BASE_URL`, `MAX_FILE_SIZE`
+
+### Types/Interfaces
+- **PascalCase**: `User`, `Resource`, `ResourceFilters`
+- **Interface prefix**: `IUser`, `IResource` (optional, be consistent)
+
+### Enums/Type Unions
+- **PascalCase**: `UserRole`, `ResourceStatus`
+
+## Export Patterns
+
+### Named Exports (Preferred)
+```tsx
+// ✅ GOOD
+export const ResourceCard = () => {};
+export const ResourceList = () => {};
+
+// Import
+import { ResourceCard, ResourceList } from './components';
+```
+
+### Default Export (Only for app.ts)
+```tsx
+// ❌ AVOID for components
+export default ResourceCard;
+
+// ✅ OK for App
+export default App;
+```
+
+### Barrel Exports
+```tsx
+// features/resources/index.ts
+export { ResourceCard } from './components/ResourceCard';
+export { ResourceList } from './components/ResourceList';
+export { useResources } from './hooks/useResources';
+export { resourceService } from './services/resource.service';
+export type * from './types/resource.types';
+
+// Usage
+import { ResourceCard, useResources, resourceService } from '@/features/resources';
+```
+
+## Environment Variables
+
+```env
+# .env.development
+VITE_API_BASE_URL=http://localhost:3000/api/v1
+VITE_APP_NAME=My Application
+
+# .env.production
+VITE_API_BASE_URL=https://api.myapplication.com/api/v1
+VITE_APP_NAME=My Application
+```
+
+**Rules:**
+- Prefix with `VITE_` to expose to client
+- Never commit `.env` files
+- Always provide `.env.example`
+
+```tsx
+// Accessing env variables
+const apiUrl = import.meta.env.VITE_API_BASE_URL;
+const isDev = import.meta.env.DEV;
+const isProd = import.meta.env.PROD;
+```

package/template/.agent/rules/client/02-component-patterns.md

@@ -0,0 +1,249 @@
+---
+trigger: always_on
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Component Patterns & Rules
+
+## Component Structure Template
+
+```tsx
+// 1. IMPORTS (grouped and ordered)
+import { useState, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Card } from 'antd'; // Ant Design
+import { useResources } from '../hooks/useResources';
+import type { Resource } from '../types/resource.types';
+
+// Import CSS (Vanilla or Module)
+import './ResourceCard.css';
+
+// 2. TYPES (component-specific only)
+interface ResourceCardProps {
+  resource: Resource;
+  onEdit?: (id: string) => void;
+  className?: string; // Standard className prop for custom styles
+}
+
+// 3. COMPONENT
+export const ResourceCard = ({ resource, onEdit, className }: ResourceCardProps) => {
+  // 3a. HOOKS (router → Redux → React Query → state → custom)
+  const navigate = useNavigate();
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // 3b. EVENT HANDLERS
+  const handleClick = useCallback(() => {
+    navigate(`/resources/${resource.id}`);
+  }, [navigate, resource.id]);
+  
+  // 3c. EFFECTS
+  useEffect(() => {
+    // Side effects
+  }, []);
+  
+  // 3d. EARLY RETURNS
+  if (!resource) return null;
+  
+  // 3e. RENDER
+  return (
+    <Card 
+      className={`resource-card ${className || ''}`} 
+      onClick={handleClick}
+      hoverable
+    >
+      <h3>{resource.title}</h3>
+      {/* JSX */}
+    </Card>
+  );
+};
+```
+
+## Component Types
+
+### 1. Presentational Components
+**Location**: `components/common/` or `features/*/components/`
+
+**Rules**:
+- NO business logic
+- NO API calls
+- NO Redux/Context (except theme)
+- Receive ALL data via props
+- Focus ONLY on UI
+
+```tsx
+// ✅ GOOD - Pure presentation
+interface ResourceCardProps {
+  resource: Resource;
+  onClick: (id: string) => void;
+}
+
+export const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
+  return (
+    <div className="card-container" onClick={() => onClick(resource.id)}>
+      <h3>{resource.title}</h3>
+      <p>{resource.price}</p>
+    </div>
+  );
+};
+```
+
+### 2. Container Components
+**Location**: `features/*/pages/` or `features/*/components/`
+
+**Rules**:
+- Contains business logic
+- Makes API calls via hooks
+- Manages state
+- Passes data to presentational components
+
+```tsx
+// ✅ GOOD - Container component
+export const ResourcesPage = () => {
+  const [filters, setFilters] = useState<ResourceFilters>({});
+  const { resources, isLoading } = useResources(filters);
+  const navigate = useNavigate();
+  
+  const handleResourceClick = (id: string) => {
+    navigate(`/resources/${id}`);
+  };
+  
+  if (isLoading) return <LoadingSpinner />;
+  
+  return (
+    <div className="page-container">
+      <ResourceFilters value={filters} onChange={setFilters} />
+      <div className="resource-list">
+        {resources.map(res => (
+          <ResourceCard key={res.id} resource={res} onClick={handleResourceClick} />
+        ))}
+      </div>
+    </div>
+  );
+};
+```
+
+## Styling Rules
+
+### CSS Architecture
+Instead of Tailwind, use Vanilla CSS or CSS Modules.
+
+**Vanilla CSS Pattern**:
+```css
+/* ResourceCard.css */
+.resource-card {
+  padding: 16px;
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.resource-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+```
+
+**CSS Modules Pattern**:
+```tsx
+import styles from './ResourceCard.module.css';
+
+<div className={styles.cardContainer}>...</div>
+```
+
+**Rules**:
+1. **NO Inline styles**: Avoid `<div style={{...}}>`.
+2. **Use Variables**: Use CSS variables for theme colors (defined in `globals.css`).
+3. **Consistency**: Use Ant Design's built-in props for standard spacing and layout where possible.
+4. **Responsive**: Use media queries in CSS files.
+
+```css
+/* ✅ GOOD - Responsive in CSS */
+.page-container {
+  padding: 20px;
+}
+
+@media (min-width: 768px) {
+  .page-container {
+    padding: 40px;
+  }
+}
+```
+
+## Component Size Rules
+
+### Limits
+- **Max 250 lines** per component
+- **Max 5 props** (use object if more)
+- **Max 3 levels** of JSX nesting
+
+### When to Split
+Split when:
+1. Component exceeds 250 lines
+2. JSX nesting exceeds 3 levels
+3. Multiple responsibilities
+4. Part is reusable elsewhere
+
+## Props Rules
+
+### Props Interface
+```tsx
+// ✅ GOOD - Group related props
+interface ResourceCardProps {
+  resource: Resource;
+  actions?: ResourceActions;
+  className?: string;
+}
+```
+
+### Children Prop
+```tsx
+interface LayoutProps {
+  children: React.ReactNode;
+  headerContent?: React.ReactNode;
+}
+
+export const Layout = ({ children, headerContent }: LayoutProps) => {
+  return (
+    <div className="layout">
+      {headerContent && <div className="header">{headerContent}</div>}
+      {children}
+    </div>
+  );
+};
+```
+
+## Performance Optimization
+
+### React.memo
+```tsx
+// ✅ Use for components in lists
+export const ResourceCard = React.memo(({ resource }: ResourceCardProps) => {
+  return <div>{resource.title}</div>;
+});
+
+ResourceCard.displayName = 'ResourceCard';
+```
+
+### useCallback
+```tsx
+// ✅ For handlers passed to children
+const handleClick = useCallback((id: string) => {
+  navigate(`/resources/${id}`);
+}, [navigate]);
+
+<ResourceCard resource={resource} onClick={handleClick} />
+```
+
+## Accessibility Rules
+- Use semantic HTML tags.
+- Use `aria-*` attributes when standard elements aren't enough.
+- Ensure Ant Design components are used with proper labels.
+
+## Component Checklist
+- [ ] Under 250 lines
+- [ ] Props interface defined (max 5)
+- [ ] Event handlers use useCallback
+- [ ] Expensive computations use useMemo
+- [ ] Early returns for error/loading
+- [ ] CSS files used (no inline styles, no Tailwind)
+- [ ] Accessibility attributes
+- [ ] Named export (not default)