create-tigra 1.1.0 → 2.0.1

package/template/.agent/rules/client/06-forms-validation.md

@@ -1,129 +0,0 @@
----
-trigger: always_on
----
-
-> **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/.agent/rules/client/07-common-patterns.md

@@ -1,150 +0,0 @@
----
-trigger: always_on
----
-
-> **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/.agent/rules/client/08-color-system.md

@@ -1,93 +0,0 @@
----
-trigger: always_on
----
-
-> **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/.agent/rules/client/09-security-rules.md

@@ -1,97 +0,0 @@
----
-trigger: always_on
----
-
-> **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.