create-tigra 1.0.0

package/template/.cursor/rules/client-05-api-integration.mdc

@@ -0,0 +1,130 @@
+---
+trigger: always_on
+globs: "client/**/*"
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# API Integration & Error Handling
+
+## Axios Configuration
+Standard pattern for interceptors and token management.
+
+```tsx
+// lib/api/axios.config.ts
+import axios from 'axios';
+import { store } from '@/store';
+import { logout, updateTokens } from '@/features/auth/store/authSlice';
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  headers: { 'Content-Type': 'application/json' },
+  timeout: 30000,
+});
+
+apiClient.interceptors.request.use((config) => {
+  const token = store.getState().auth.tokens?.accessToken;
+  if (token) config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+```
+
+## Service Pattern
+Use classes or plain objects to group API calls by domain.
+
+```tsx
+// features/resources/services/resource.service.ts
+class ResourceService {
+  async getResources(params = {}) {
+    const response = await apiClient.get('/resources', { params });
+    return response.data.data;
+  }
+}
+export const resourceService = new ResourceService();
+```
+
+## Error Handling Utilities
+
+```tsx
+// lib/utils/error.ts
+export const getErrorMessage = (error: unknown): string => {
+  if (axios.isAxiosError(error)) {
+    return error.response?.data?.error?.message || error.message;
+  }
+  return 'An unexpected error occurred';
+};
+```
+
+## UI Feedback (Ant Design)
+
+### Error Components
+```tsx
+// components/common/ErrorMessage.tsx
+import { Alert } from 'antd';
+import { getErrorMessage } from '@/lib/utils/error';
+
+export const ErrorMessage = ({ error }: { error: any }) => (
+  <Alert
+    message="Error"
+    description={getErrorMessage(error)}
+    type="error"
+    showIcon
+  />
+);
+```
+
+### Loading States
+```tsx
+// components/common/LoadingSpinner.tsx
+import { Spin } from 'antd';
+
+export const LoadingSpinner = () => (
+  <div className="spinner-container">
+    <Spin size="large" />
+  </div>
+);
+```
+
+### Skeleton (Ant Design)
+```tsx
+// components/common/ResourceSkeleton.tsx
+import { Skeleton, Card } from 'antd';
+
+export const ResourceSkeleton = () => (
+  <Card>
+    <Skeleton active />
+  </Card>
+);
+```
+
+## Notifications (Ant Design)
+Use `message` or `notification` from Ant Design.
+
+```tsx
+import { message } from 'antd';
+
+// Success
+message.success('Action completed!');
+
+// Error
+message.error(getErrorMessage(error));
+```
+
+## File Upload Pattern
+```tsx
+// features/resources/hooks/useUploadFiles.ts
+export const useUploadFiles = () => {
+  return useMutation({
+    mutationFn: async (files: File[]) => {
+      const formData = new FormData();
+      files.forEach((file) => formData.append('files', file));
+      return apiClient.post('/upload', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+    },
+  });
+};
+```
+
+## Infinite Scroll Pattern
+Standard React Query `useInfiniteQuery` implementation with Ant Design's `Button` for "Load More" or a custom observer.

package/template/.cursor/rules/client-06-forms-validation.mdc

@@ -0,0 +1,130 @@
+---
+trigger: always_on
+globs: "client/**/*"
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Forms & Validation
+
+## Form Handling with React Hook Form + Zod + Ant Design
+
+To maintain the project's logic and architecture while using Ant Design, use **React Hook Form (RHF)** for state management and **Zod** for validation, connecting them to **Ant Design** components via the `Controller` component.
+
+### Basic Form Pattern
+
+```tsx
+// features/auth/components/LoginForm.tsx
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button, Input, Form } from 'antd';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export const LoginForm = ({ onSubmit, isSubmitting }) => {
+  const { control, handleSubmit, formState: { errors } } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+  
+  return (
+    <Form layout="vertical" onFinish={handleSubmit(onSubmit)}>
+      <Form.Item 
+        label="Email" 
+        validateStatus={errors.email ? 'error' : ''} 
+        help={errors.email?.message}
+      >
+        <Controller
+          name="email"
+          control={control}
+          render={({ field }) => <Input {...field} type="email" placeholder="Email" />}
+        />
+      </Form.Item>
+      
+      <Form.Item 
+        label="Password" 
+        validateStatus={errors.password ? 'error' : ''} 
+        help={errors.password?.message}
+      >
+        <Controller
+          name="password"
+          control={control}
+          render={({ field }) => <Input.Password {...field} placeholder="Password" />}
+        />
+      </Form.Item>
+      
+      <Button type="primary" htmlType="submit" loading={isSubmitting} block>
+        Login
+      </Button>
+    </Form>
+  );
+};
+```
+
+### Complete Form Example (Resources)
+
+```tsx
+const resourceSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  price: z.coerce.number().min(0, 'Price must be positive'),
+  category: z.string().min(1, 'Category is required'),
+});
+
+type ResourceFormData = z.infer<typeof resourceSchema>;
+
+export const CreateResourceForm = ({ onSubmit, isSubmitting }) => {
+  const { control, handleSubmit, formState: { errors } } = useForm<ResourceFormData>({
+    resolver: zodResolver(resourceSchema),
+  });
+  
+  return (
+    <Form layout="vertical" onFinish={handleSubmit(onSubmit)}>
+      <Form.Item label="Title" validateStatus={errors.title ? 'error' : ''} help={errors.title?.message}>
+        <Controller name="title" control={control} render={({ field }) => <Input {...field} />} />
+      </Form.Item>
+
+      <Form.Item label="Price" validateStatus={errors.price ? 'error' : ''} help={errors.price?.message}>
+        <Controller name="price" control={control} render={({ field }) => <Input type="number" {...field} />} />
+      </Form.Item>
+      
+      <Button type="primary" htmlType="submit" loading={isSubmitting}>
+        Create Resource
+      </Button>
+    </Form>
+  );
+};
+```
+
+## Form with Select (Ant Design)
+
+```tsx
+import { Select } from 'antd';
+
+<Form.Item label="Category" validateStatus={errors.category ? 'error' : ''} help={errors.category?.message}>
+  <Controller
+    name="category"
+    control={control}
+    render={({ field }) => (
+      <Select {...field} placeholder="Select Category">
+        <Select.Option value="cat1">Category 1</Select.Option>
+        <Select.Option value="cat2">Category 2</Select.Option>
+      </Select>
+    )}
+  />
+</Form.Item>
+```
+
+## Form with File Upload (Ant Design)
+
+Use Ant Design's `Upload` component, often manually handling the file list to sync with RHF if needed, or using a local state and calling an upload service.
+
+## Validation Best Practices
+- ✅ **Consistent Schemas**: Keep Zod schemas in a dedicated `schemas/` folder within features.
+- ✅ **Error Mapping**: Map API validation errors back to RHF fields using `setError`.
+- ✅ **Loading States**: Use Ant Design's `loading` prop on buttons.
+- ✅ **User Experience**: Don't show validation errors until the field is "touched" or the form is submitted.

package/template/.cursor/rules/client-07-common-patterns.mdc

@@ -0,0 +1,151 @@
+---
+trigger: always_on
+globs: "client/**/*"
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Common Patterns & Utilities
+
+## Custom Hooks
+
+### useAuth Hook
+Standard pattern for authentication state and methods.
+
+```tsx
+// features/auth/hooks/useAuth.ts
+export const useAuth = () => {
+  const dispatch = useAppDispatch();
+  const { user, isAuthenticated } = useAppSelector((state) => state.auth);
+  
+  const login = async (data: LoginRequest) => {
+    const response = await authService.login(data);
+    dispatch(setCredentials(response));
+  };
+  
+  const logout = () => {
+    dispatch(logoutAction());
+  };
+  
+  return { user, isAuthenticated, login, logout };
+};
+```
+
+## Common Components (Ant Design)
+
+### Pagination
+Use Ant Design's `Pagination` component.
+
+```tsx
+import { Pagination } from 'antd';
+
+export const CustomPagination = ({ current, total, onChange }) => (
+  <Pagination
+    current={current}
+    total={total}
+    onChange={onChange}
+    showSizeChanger={false}
+  />
+);
+```
+
+### Empty State
+Use Ant Design's `Empty` component.
+
+```tsx
+import { Empty, Button } from 'antd';
+
+export const NoData = ({ message, onAction, actionText }) => (
+  <Empty
+    description={message}
+    image={Empty.PRESENTED_IMAGE_SIMPLE}
+  >
+    {onAction && (
+      <Button type="primary" onClick={onAction}>
+        {actionText}
+      </Button>
+    )}
+  </Empty>
+);
+```
+
+### Confirm Dialog
+Use Ant Design's `Modal.confirm`.
+
+```tsx
+import { Modal } from 'antd';
+
+const showDeleteConfirm = (onConfirm: () => void) => {
+  Modal.confirm({
+    title: 'Are you sure you want to delete this resource?',
+    content: 'This action cannot be undone.',
+    okText: 'Yes, Delete',
+    okType: 'danger',
+    cancelText: 'No',
+    onOk() {
+      onConfirm();
+    },
+  });
+};
+```
+
+## Utility Functions
+
+### Format Utils
+Standard internationalization utils.
+
+```tsx
+// lib/utils/format.ts
+export const formatCurrency = (amount: number, currency = 'USD') => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount);
+};
+```
+
+## Router & App Setup
+
+### Router Configuration
+```tsx
+// app/router.tsx
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'resources', element: <ResourcesPage /> },
+      { path: 'login', element: <LoginPage /> },
+    ],
+  },
+]);
+```
+
+## Table Pattern (Ant Design)
+Use Ant Design's `Table` component for consistent data display.
+
+```tsx
+// features/resources/components/ResourceTable.tsx
+import { Table, Button, Space } from 'antd';
+
+export const ResourceTable = ({ data, onEdit, onDelete, loading }) => {
+  const columns = [
+    { title: 'Title', dataIndex: 'title', key: 'title' },
+    { title: 'Category', dataIndex: 'category', key: 'category' },
+    {
+      title: 'Actions',
+      key: 'actions',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button onClick={() => onEdit(record.id)}>Edit</Button>
+          <Button danger onClick={() => onDelete(record.id)}>Delete</Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return <Table dataSource={data} columns={columns} loading={loading} rowKey="id" />;
+};
+```
+I use `Space` for horizontal layout and `Space.Compact` for grouped actions.

package/template/.cursor/rules/client-08-color-system.mdc

@@ -0,0 +1,94 @@
+---
+trigger: always_on
+globs: "client/**/*"
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Color System & Theming
+
+## Color Architecture
+All colors are defined as **CSS variables** in a global stylesheet and synchronized with **Ant Design's ConfigProvider** for component theming.
+
+## CSS Variables Setup
+
+```css
+/* styles/theme.css */
+:root {
+  --primary-color: #1677ff;
+  --success-color: #52c41a;
+  --warning-color: #faad14;
+  --error-color: #f5222d;
+  --text-color: rgba(0, 0, 0, 0.88);
+  --bg-color: #ffffff;
+  --border-color: #d9d9d9;
+}
+
+[data-theme='dark'] {
+  --primary-color: #1668dc;
+  --bg-color: #141414;
+  --text-color: rgba(255, 255, 255, 0.85);
+}
+```
+
+## Ant Design Configuration
+
+```tsx
+// app/providers.tsx
+import { ConfigProvider, theme } from 'antd';
+
+export const AppProviders = ({ children, isDarkMode }) => (
+  <ConfigProvider
+    theme={{
+      algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      token: {
+        colorPrimary: '#1677ff',
+        borderRadius: 4,
+      },
+    }}
+  >
+    {children}
+  </ConfigProvider>
+);
+```
+
+## Usage Rules
+
+### ✅ CORRECT - Use CSS Variables in Vanilla CSS
+
+```css
+/* features/resources/components/ResourceCard.css */
+.resource-card {
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+}
+
+.resource-card:hover {
+  border-color: var(--primary-color);
+}
+```
+
+### ❌ NEVER Hardcode Colors in Components
+
+```tsx
+// ❌ BAD
+<div style={{ color: '#ff0000' }}>Error</div>
+
+// ✅ GOOD
+<div className="error-text">Error</div> /* defined in CSS using var(--error-color) */
+```
+
+## Dark Mode Implementation
+Use the `data-theme` attribute on the `html` or `body` tag and sync it with Ant Design's algorithm.
+
+## AI Agent Rules
+
+### Rule 1: No Hardcoded Colors
+Always use `var(--color-name)` in CSS files. Never use hex/rgb values directly in component files.
+
+### Rule 2: Semantic Naming
+Use functional names like `--primary-color`, `--text-secondary`, not descriptive ones like `--blue`.
+
+### Rule 3: Single Source of Truth
+Global theme variables must stay in `styles/theme.css`. Components should import their own `.css` files that reference these variables.

package/template/.cursor/rules/client-09-security-rules.mdc

@@ -0,0 +1,98 @@
+---
+trigger: always_on
+globs: "client/**/*"
+---
+
+> **SCOPE**: These rules apply specifically to the **client** directory.
+
+# Frontend Security Rules
+
+## Core Security Principles
+
+1. **Never trust user input**: Always validate and sanitize data from users.
+2. **Never expose secrets**: API keys, database credentials, and secrets must never be in the client code.
+3. **Always validate and sanitize**: Even if the backend validates, client-side sanitization is essential for UX and defense-in-depth.
+4. **Defense in depth**: Multiple layers of security at every level of the stack.
+
+## XSS Prevention
+
+### React's Built-in Protection
+React automatically escapes values to prevent XSS.
+
+```tsx
+// ✅ SAFE - React escapes by default
+<div>{userInput}</div>
+
+// ❌ DANGEROUS - Avoid dangerouslySetInnerHTML unless strictly sanitized
+<div dangerouslySetInnerHTML={{ __html: userInput }} />
+```
+
+### URL Sanitization
+Always validate URLs before using them in `href` attributes.
+
+```tsx
+export const isSafeUrl = (url: string): boolean => {
+  try {
+    const parsed = new URL(url);
+    return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
+  } catch {
+    return false;
+  }
+};
+```
+
+## Authentication Token Security
+
+### Token Storage
+Avoid storing sensitive tokens in `localStorage`. Use Redux for access tokens (in-memory) and `httpOnly` cookies or encrypted storage for long-lived tokens.
+
+### Token Transmission
+Always use HTTPS and send tokens in the `Authorization` header.
+
+```tsx
+axios.interceptors.request.use((config) => {
+  const token = store.getState().auth.tokens?.accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+```
+
+## Input & File Validation
+
+### Client + Server Validation
+Use Zod for robust client-side validation, matching the backend's expectations.
+
+### File Upload Security
+Validate file type, size, and extension before uploading.
+
+```tsx
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+const MAX_SIZE = 5 * 1024 * 1024; // 5MB
+
+export const validateFile = (file: File) => {
+  if (!ALLOWED_TYPES.includes(file.type)) return { valid: false, error: 'File type not allowed' };
+  if (file.size > MAX_SIZE) return { valid: false, error: 'File too large' };
+  return { valid: true };
+};
+```
+
+## Environment Variables
+- Prefix with `VITE_` for client availability.
+- Never commit `.env` files.
+- Validate environment variables at runtime using a Zod schema.
+
+## AI Agent Security Rules
+
+### Rule 1: Never Trust User Input
+Never use `dangerouslySetInnerHTML` with raw user input.
+
+### Rule 2: Never Expose Secrets
+Do not hardcode API keys or credentials. Use `import.meta.env`.
+
+### Rule 3: Secure Tokens
+Do not recommend plain `localStorage` for sensitive authentication tokens.
+
+### Rule 4: Sanitize Content
+Sanitize any HTML content with DOMPurify before rendering.