diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md deleted file mode 100644 index 10fed5606..000000000 --- a/.github/copilot-instructions.md +++ /dev/null @@ -1,44 +0,0 @@ -# Memos Project - AI Assistant Instructions - -## Frontend Refactoring Goal - -**PRIORITY**: Replace all MUI Joy UI (@mui/joy) and @usememos/mui components with shadcn/ui + Tailwind CSS v4 - -## Key Rules - -1. **Replace all MUI components** with shadcn/ui + Tailwind v4 -2. **Never modify generated shadcn/ui files** from `pnpm dlx shadcn@latest add` -3. **Use https://tweakcn.com/ for custom variants** when standard components need customization - -## Setup Commands - -```bash -# Initialize shadcn/ui -pnpm dlx shadcn@latest init - -# Add components -pnpm dlx shadcn@latest add [component] -``` - -## Migration Pattern - -```typescript -// OLD -import { Button, Card, Input } from "@mui/joy"; - -// NEW -import { Button } from "@/components/ui/button"; -import { Card } from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -``` - -## When Suggesting Changes - -- Include `pnpm dlx shadcn@latest add [component]` commands -- Use Tailwind classes for styling -- Mention https://tweakcn.com/ for custom variants -- Preserve TypeScript types and accessibility - -## Target Files - -Files containing `@mui/joy` or `@usememos/mui` imports diff --git a/.github/instructions/frontend.instructions.md b/.github/instructions/frontend.instructions.md new file mode 100644 index 000000000..0b38d5e51 --- /dev/null +++ b/.github/instructions/frontend.instructions.md @@ -0,0 +1,92 @@ +## Frontend Copilot Instructions + +### Tech Stack + +- **Framework:** React + Vite +- **UI:** shadcn/ui + Tailwind CSS v4 +- **State Management:** MobX +- **Package Manager:** pnpm +- **Color System:** Only use colors defined in `web/src/style.css` +- **Component Imports:** Only via `pnpm dlx shadcn@latest add [component]` + +--- + +### 💡 Guidelines + +✅ **Allowed:** + +- Use **shadcn/ui components only** (e.g., `Button`, `Input`, `Dialog`) +- Use **Tailwind utility classes** for layout, spacing, typography +- Use **Tailwind `bg-[var(--color-name)]`**, `text-[var(--color-name)]` referencing `web/src/style.css` for colors +- Use **MobX for state management** (`observable`, `computed`, `action`, `useLocalObservable`) +- Use **functional React components** with hooks +- Use **Tailwind v4 utility classes** for responsive layouts + +❌ **Not Allowed:** + +- Do not import or use **other component libraries** (e.g., Material UI, Ant Design, Chakra) +- Do not use **fixed color utilities** (e.g., `bg-gray-200`, `text-blue-500`) +- Do not use **className strings with hardcoded color values** +- Do not use **inline styles for colors** + +--- + +### 🎨 Color Usage + +**All colors must be referenced from `web/src/style.css`**, for example: + +```tsx +
...
+``` + +**Do not use** `bg-gray-200`, `text-gray-900`, etc. + +--- + +### 📦 Adding UI Components + +To add new UI components, always use: + +```bash +pnpm dlx shadcn@latest add [component] +``` + +Examples: + +```bash +pnpm dlx shadcn@latest add button +``` + +--- + +### 🛠️ File Structure + +- `web/src/components/` → shared React components +- `web/src/pages/` → route-based pages +- `web/src/store/v2/` → MobX stores +- `web/src/style.css` → color variables and global styles +- `web/src/hooks/` → reusable hooks + +--- + +### 🧩 Component Development Conventions + +1. **Functional Components + Hooks:** + + - Use `useState`, `useEffect`. + - Always type props with `React.FC` or explicit `Props` interfaces. + +2. **State:** + + - Use **MobX** for shared state across components. + - Use local component state only for purely local UI state. + +3. **Styling:** + + - Use Tailwind utility classes, referencing colors from `style.css`. + - For complex styles, extend via Tailwind plugin if needed. + +4. **Shadcn Integration:** + + - Import components only after adding via `pnpm dlx shadcn@latest add [component]`. + - Do not modify the component source unless necessary; prefer composition and theming.