From 0600078ecfb4de45ec95af1251131fe73b5b663f Mon Sep 17 00:00:00 2001 From: notend Date: Sat, 16 Nov 2024 00:12:07 +0800 Subject: [PATCH] feat: add cursor guideline and cursorruls --- .cursorrules | 44 ++++++++++++++++++++++++++++++++++++ README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++- instruction.md | 28 +++++++++++++++++++++++ 3 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 .cursorrules create mode 100644 instruction.md diff --git a/.cursorrules b/.cursorrules new file mode 100644 index 0000000..bcbad43 --- /dev/null +++ b/.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. + diff --git a/README.md b/README.md index e631feb..2a66529 100644 --- a/README.md +++ b/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: diff --git a/instruction.md b/instruction.md new file mode 100644 index 0000000..b988630 --- /dev/null +++ b/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