feat: add cursor guideline and cursorruls

.cursorrules

@@ -0,0 +1,44 @@
+
+  You are an expert in TypeScript, Node.js, Next.js 15 App Router, React, Shadcn UI, Radix UI and Tailwind.
+
+  Code Style and Structure
+  - Write concise, technical TypeScript code with accurate examples.
+  - Use functional and declarative programming patterns; avoid classes.
+  - Prefer iteration and modularization over code duplication.
+  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
+  - Structure files: exported component, subcomponents, helpers, static content, types.
+
+  Naming Conventions
+  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
+  - Favor named exports for components.
+
+  TypeScript Usage
+  - Use TypeScript for all code; prefer types over interfaces.
+  - Avoid enums; use maps instead.
+  - Use functional components with TypeScript types.
+
+  Syntax and Formatting
+  - Use the "function" keyword for pure functions.
+  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+  - Use declarative JSX.
+
+  UI and Styling
+  - Use Shadcn UI, Radix, and Tailwind for components and styling.
+  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
+
+  Performance Optimization
+  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
+  - Wrap client components in Suspense with fallback.
+  - Use dynamic loading for non-critical components.
+  - Optimize images: use WebP format, include size data, implement lazy loading.
+
+  Key Conventions
+  - Use 'nuqs' for URL search parameter state management.
+  - Optimize Web Vitals (LCP, CLS, FID).
+  - Limit 'use client':
+    - Favor server components and Next.js SSR.
+    - Use only for Web API access in small components.
+    - Avoid for data fetching or state management.
+
+  Follow Next.js 15 docs for Data Fetching, Rendering, and Routing.
+

README.md

@@ -65,7 +65,6 @@ For Next.js, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/N
 
 ## Know issues
 
-- [x] `eslint-plugin-vitest` can't updated, otherwise eslint will be broken. => `'plugin:prettier/recommended',`
 - Standalone building output can't run if copy it's folder, cause pnpm `symlink`, node_module cant resolve correctly. It can be avoided by installing the package with `node-linker=hoisted` in the pnpm configuration before standalone output.
 
 ## Refers
@@ -78,6 +77,66 @@ For Next.js, check this: [Next.js 14 Boilerplate](https://github.com/qinsong77/N
 
 - [How to fetch data in React [2024]](https://www.robinwieruch.de/react-fetching-data/)
 
+## Cursor
+
+### Guideline
+
+1. Brainstorm first, code second
+
+Claude/o1 are your best friends here. You should create a whole document containing every single detail of your project.
+
+- core features
+- goals & objectives
+- tech stack & packages
+- project folder structure
+- database design
+- landing page components
+- color palette
+- copyrighting
+
+All this should be put into an instruction.md (name it however you want) so Cursor can index at any time.
+
+2. Get a `.cursorrules` file
+
+https://docs.cursor.com/context/rules-for-ai#cursorrules
+
+Take an example from:
+
+- https://cursor.directory/
+- https://github.com/PatrickJS/awesome-cursorrules
+
+3. Use `v0` for landing page
+
+Get your core features, color palette and components from your `instructions.md` file you got.
+
+Bonus tip is to use screenshots as reference from other landing pages just so v0 gets your idea.
+
+Use component libraries shadcn since v0 works great with it. or with MagicUI.
+
+Remember, you don’t have to get it perfect with v0.
+
+You only need something good enough you can take and edit later in cursor.
+
+4.  Chat vs Composer
+
+Use chat for smaller tasks and for explaining code/commands. Use it to ask questions and navigate your.
+
+Use composer for writing the code, tag your `instructions.md` inside the composer always and tell him to update it as the project progresses.
+
+Only ask composer to do one task at a time. Make it make the changes step by step, if you ask to it to edit multiple files it will hallucinate and you will lose control.
+
+Always verify the code is clean before approving the change.
+
+Save your claude credits for the composer and use gpt-4o-mini with chat.
+
+5. Tag your docs
+
+Copy the documentation for the framework you use.
+
+Go to Cursor Settings > Features > Docs
+
+Paste the links and use them inside chat/composer with `@Docs`
+
 ## Getting Started
 
 First, run the development server:

instruction.md

@@ -0,0 +1,28 @@
+# Next.js 15 Boilerplate
+
+This is a [Next.js](https://nextjs.org/) 15 Boilerplate project base on [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Features
+
+- pnpm
+- chore
+  - husky
+  - lint-stage
+  - prettier
+  - commitlint
+- css: tailwindcss
+- UI Library: [shadcn/ui](https://ui.shadcn.com/)
+- bundle-analyzer: [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
+- logger: [pino](https://github.com/pinojs/pino) && development pretty logging [pino-pretty](https://github.com/pinojs/pino-pretty)
+- test:
+  - [vitest](https://vitest.dev/)
+  - [react testing library](https://testing-library.com/)
+- i18n(TBD)
+  - [setting-tutorials](https://i18nexus.com/tutorials/nextjs/react-i18next)
+  - [next-intl](https://github.com/amannn/next-intl) not compatible with turbo mode `Module not found: Can't resolve 'next-intl/config' `
+  - [next-international](https://github.com/QuiiBz/next-international) seems better, but not compatible with Not found page
+  - Maybe the best choice is official Example: [app-dir-i18n-routing](https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing)
+- Docker
+- Playwright: Write end-to-end tests like a pro or cypress
+- Github actions/CI
+- Turbo for task cache