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 +