MFD3000 · August 30, 2024 16:02
diff --git a/gistfile1.txt b/gistfile1.txt
 Certainly! Below is a more compact version of the rules, designed to be concise while retaining the essential details:

 ---

 ### **Expertise: React, TypeScript, MUI, @dnd-kit, framer-motion, Vite. Follow Airbnb React style guide and Screaming Architecture.**

 #### **Code Style & Structure:**
 - **Use functional components and hooks**; avoid classes. Prefer **modularization** over duplication.
 - **Descriptive variable names** (e.g., `isLoading`, `hasError`). Component names in **PascalCase**; variables and functions in **camelCase**.
 - **File structure**: Feature-first. Use `_shared/` for reusable components, theme, and types.

 #### **Naming Conventions:**
 - **Component files**: PascalCase (e.g., `MyComponent.tsx`). 
 - **Directories**: lowercase with dashes (e.g., `components/my-component`).
 - **Prefer named exports** for components and utilities.

 #### **TypeScript Usage:**
 - **Strict typing**; avoid `any`. Prefer `interfaces` over `types`.
 - Use **TypeScript with functional components** and hooks.

 #### **Syntax & Formatting:**
 - **Follow Airbnb formatting**: Double quotes, `const`/`let`, concise JSX.
 - **Arrow functions** for components and handlers.

 #### **UI & Styling:**
 - **MUI components** with `@emotion/styled` and `sx` prop. **Mobile-first** design with MUI Grid.
 - **Centralize theme** in `_shared/theme/`.

 #### **Drag & Drop:**
 - **Use `@dnd-kit`** for drag-and-drop; fallback to `react-beautiful-dnd` if necessary.

 #### **Animations:**
 - **Use `framer-motion`** for smooth, performant transitions.

 #### **Performance Optimization:**
 - **Minimize `useEffect`** and state; prefer context or reducers.
 - **Lazy load** non-critical components. Optimize images (WebP, size data, lazy load).

 #### **Key Conventions:**
 - **Follow Screaming Architecture**: Feature-focused directories, `_shared/` for common resources.
 - Use `dotenv` for environment variables; avoid exposing sensitive data.

 #### **Build & Deployment:**
 - **Vite for builds**; ensure optimized output. **Deploy with GitHub Pages** (`gh-pages`).

 #### **Documentation & Comments:**
 - **Document thoroughly** using JSDoc/TypeScript comments; explain the "why," not the "what."

 ---

 This compact version delivers the same essential guidance while using fewer tokens, making it ideal for environments where brevity is important.
	Certainly! Below is a more compact version of the rules, designed to be concise while retaining the essential details:

	---

	### Expertise: React, TypeScript, MUI, @dnd-kit, framer-motion, Vite. Follow Airbnb React style guide and Screaming Architecture.

	#### Code Style & Structure:
	- Use functional components and hooks; avoid classes. Prefer modularization over duplication.
	- Descriptive variable names (e.g., `isLoading`, `hasError`). Component names in PascalCase; variables and functions in camelCase.
	- File structure: Feature-first. Use `_shared/` for reusable components, theme, and types.

	#### Naming Conventions:
	- Component files: PascalCase (e.g., `MyComponent.tsx`).
	- Directories: lowercase with dashes (e.g., `components/my-component`).
	- Prefer named exports for components and utilities.

	#### TypeScript Usage:
	- Strict typing; avoid `any`. Prefer `interfaces` over `types`.
	- Use TypeScript with functional components and hooks.

	#### Syntax & Formatting:
	- Follow Airbnb formatting: Double quotes, `const`/`let`, concise JSX.
	- Arrow functions for components and handlers.

	#### UI & Styling:
	- MUI components with `@emotion/styled` and `sx` prop. Mobile-first design with MUI Grid.
	- Centralize theme in `_shared/theme/`.

	#### Drag & Drop:
	- Use `@dnd-kit` for drag-and-drop; fallback to `react-beautiful-dnd` if necessary.

	#### Animations:
	- Use `framer-motion` for smooth, performant transitions.

	#### Performance Optimization:
	- Minimize `useEffect` and state; prefer context or reducers.
	- Lazy load non-critical components. Optimize images (WebP, size data, lazy load).

	#### Key Conventions:
	- Follow Screaming Architecture: Feature-focused directories, `_shared/` for common resources.
	- Use `dotenv` for environment variables; avoid exposing sensitive data.

	#### Build & Deployment:
	- Vite for builds; ensure optimized output. Deploy with GitHub Pages (`gh-pages`).

	#### Documentation & Comments:
	- Document thoroughly using JSDoc/TypeScript comments; explain the "why," not the "what."

	---

	This compact version delivers the same essential guidance while using fewer tokens, making it ideal for environments where brevity is important.