Last active
August 30, 2024 16:02
-
-
Save MFD3000/32e1a00edee85e00738bf7f44dc4a79c to your computer and use it in GitHub Desktop.
Revisions
-
MFD3000 revised this gist
Aug 30, 2024 . 1 changed file with 29 additions and 9 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,13 +1,34 @@ ### **Expertise: React, TypeScript, MUI, @dnd-kit, framer-motion, Vite. Follow Airbnb React style guide, Screaming Architecture, and project-specific standards.** #### **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. - **Absolute Imports**: Configure and use absolute paths for imports to avoid deep relative paths. #### **File Structure Example:** ```plaintext src/ │ ├── features/ │ ├── _shared/ │ │ ├── components/ │ │ ├── theme/ │ │ └── types/ │ ├── todos/ │ │ └── components/ │ └── home/ │ ├── index.tsx │ ├── LandingPage.tsx │ └── components/ │ ├── pages/ │ └── home/ │ └── index.tsx │ ├── App.tsx └── main.tsx ``` #### **Naming Conventions:** - **Component files**: PascalCase (e.g., `MyComponent.tsx`). @@ -21,6 +42,7 @@ Certainly! Below is a more compact version of the rules, designed to be concise #### **Syntax & Formatting:** - **Follow Airbnb formatting**: Double quotes, `const`/`let`, concise JSX. - **Arrow functions** for components and handlers. - **Prettier** for consistent code formatting. **ESLint** for code linting based on Airbnb's style guide. Ensure code passes linting (`npm run lint`) and is formatted (`npm run format`) before committing. #### **UI & Styling:** - **MUI components** with `@emotion/styled` and `sx` prop. **Mobile-first** design with MUI Grid. @@ -38,6 +60,7 @@ Certainly! Below is a more compact version of the rules, designed to be concise #### **Key Conventions:** - **Follow Screaming Architecture**: Feature-focused directories, `_shared/` for common resources. - **Absolute Imports**: Utilize to avoid deep relative paths. - Use `dotenv` for environment variables; avoid exposing sensitive data. #### **Build & Deployment:** @@ -46,6 +69,3 @@ Certainly! Below is a more compact version of the rules, designed to be concise #### **Documentation & Comments:** - **Document thoroughly** using JSDoc/TypeScript comments; explain the "why," not the "what." -
Aug 30, 2024 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Aug 30, 2024 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ 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.