Created
December 2, 2025 03:05
-
-
Save arm5077/81a6bb17e5ab0c7e4585c3102241fac4 to your computer and use it in GitHub Desktop.
My personal Cursor rules for NextJS stuff
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 characters
| # McGill NextJS Project Rules | |
| ## Global Rules | |
| - Use TypeScript for all Next.js components. | |
| - Never use Tailwind. Do not propose Tailwind classes or configs. | |
| - Include `clsx` in the project, but do not use it by default on the root element. | |
| - Use SCSS modules (`*.module.scss`) for all component styling. | |
| - Alphabetize CSS property declarations inside SCSS files. | |
| - Import `@/theme/styles.scss` at the top of every generated SCSS module. | |
| - Keep all components inside `src/components`. | |
| - Nested components may live inside their parent component’s folder unless they are shared; shared components go in `src/components/shared`. | |
| - Follow the component folder structure: | |
| `ComponentName/ComponentName.tsx` and `ComponentName/ComponentName.module.scss`. | |
| - Ensure a `src/theme` folder exists with: | |
| - `colors.scss` | |
| - `typography.scss` | |
| - `layout.scss` | |
| - `styles.scss` | |
| ## Directory Rules | |
| ### src/ | |
| - Must contain `components/` and `theme/`. | |
| ### src/components/ | |
| - Every component lives in its own folder using PascalCase. | |
| - Shared components must be inside `src/components/shared`. | |
| ### src/theme/ | |
| - Must include the SCSS files: `colors.scss`, `typography.scss`, `layout.scss`, `styles.scss`. | |
| ## Component Template | |
| When creating a new component, use this exact scaffold: | |
| ```tsx | |
| import styles from "./{{component}}.module.scss"; | |
| export type {{component}}Props = { | |
| // add props here | |
| }; | |
| export default function {{component}}(props: {{component}}Props) { | |
| return ( | |
| <div className={styles.{{componentCamel}}}> | |
| {/* content */} | |
| </div> | |
| ); | |
| } | |
| ``` | |
| ## SCSS Module Template | |
| Use this scaffold for SCSS modules: | |
| ```scss | |
| @import “@/theme/styles.scss”; | |
| .{{componentCamelCase}} { | |
| // styles | |
| } | |
| ``` | |
| ## Naming Conventions | |
| - Component folders: PascalCase | |
| - Component files: PascalCase | |
| - TS class references: camelCase | |
| - CSS selectors: camelCase |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment