Web Projects
Auto-activate when: Working with package.json, package-lock.json, yarn.lock, pnpm-lock.yaml, tsconfig.json, .eslintrc*, vite.config.*, next.config.*, *.jsx, *.tsx, *.vue, *.svelte, or when user mentions React, Next.js, Vue, Angular, Svelte, npm, yarn, pnpm, or frontend development.
Guidelines for modern JavaScript/TypeScript web projects.
Project Structure Recognition
Package Managers
- Check
package.json for dependencies and scripts
- Detect from lock files:
package-lock.json, yarn.lock, pnpm-lock.yaml
Framework Detection
Look for framework-specific configuration files:
- Next.js:
next.config.js, next.config.ts
- Vite:
vite.config.js, vite.config.ts
- React: Check
package.json dependencies
- Vue:
vue.config.js, vite.config.ts with Vue plugin
- Angular:
angular.json
- Svelte:
svelte.config.js
Development Workflow
Package Manager Usage
Respect the project's package manager:
- npm:
npm install, npm run, npm test
- yarn:
yarn install, yarn, yarn test
- pnpm:
pnpm install, pnpm run, pnpm test
Detection: Lock file or config (.npmrc, .yarnrc, pnpm-workspace.yaml)
Common Scripts
Check package.json "scripts" section for:
dev or start - Development serverbuild - Production buildtest - Run testslint - Lintingformat - Code formatting
Code Patterns
Component Patterns
- Respect existing patterns - Don't change established structure
- Check naming conventions and import/export patterns
- Review existing components directory
Testing Setup
- Respect existing test framework - Jest, Vitest, Testing Library, Cypress, Playwright
- Check config in
package.json or dedicated files
- Follow established patterns and naming (
.test.js, .spec.ts, etc.)
Styling Approach
Identify and follow the project's styling method:
- CSS Modules (
.module.css)
- Styled Components / Emotion
- Tailwind CSS (
tailwind.config.js)
- SASS/SCSS (
.scss files)
- Plain CSS
Configuration Files
Common Config Files
tsconfig.json - TypeScript configuration.eslintrc - Linting rules.prettierrc - Code formattingjest.config.js or vitest.config.ts - Test configuration.env.local, .env.development - Environment variables
Quick Reference
Common mistakes to avoid:
- ❌ Mixing package managers
- ❌ Changing test framework without discussion
Note: Web projects vary greatly - always check the project's specific configuration and patterns before making assumptions.
1---2name: web-projects3description: Guidelines for web development projects using JavaScript/TypeScript frameworks. Activate when working with web projects, package.json, npm/yarn/pnpm, React, Next.js, Vue, Angular, Svelte, or other web frameworks, frontend components, or Node.js applications.4---5
6# Web Projects
7
8**Auto-activate when:** Working with `package.json`, `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, `tsconfig.json`, `.eslintrc*`, `vite.config.*`, `next.config.*`, `*.jsx`, `*.tsx`, `*.vue`, `*.svelte`, or when user mentions React, Next.js, Vue, Angular, Svelte, npm, yarn, pnpm, or frontend development.
9
10Guidelines for modern JavaScript/TypeScript web projects.
11
12## Project Structure Recognition
13
14### Package Managers
15- Check `package.json` for dependencies and scripts
16- Detect from lock files: `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`
17
18### Framework Detection
19Look for framework-specific configuration files:
20- **Next.js**: `next.config.js`, `next.config.ts`
21- **Vite**: `vite.config.js`, `vite.config.ts`
22- **React**: Check `package.json` dependencies
23- **Vue**: `vue.config.js`, `vite.config.ts` with Vue plugin
24- **Angular**: `angular.json`
25- **Svelte**: `svelte.config.js`
26
27## Development Workflow
28
29### Package Manager Usage
30Respect the project's package manager:
31- **npm**: `npm install`, `npm run`, `npm test`
32- **yarn**: `yarn install`, `yarn`, `yarn test`
33- **pnpm**: `pnpm install`, `pnpm run`, `pnpm test`
34
35**Detection:** Lock file or config (`.npmrc`, `.yarnrc`, `pnpm-workspace.yaml`)
36
37### Common Scripts
38Check `package.json` "scripts" section for:
39- `dev` or `start` - Development server
40- `build` - Production build
41- `test` - Run tests
42- `lint` - Linting
43- `format` - Code formatting
44
45## Code Patterns
46
47### Component Patterns
48- **Respect existing patterns** - Don't change established structure
49- Check naming conventions and import/export patterns
50- Review existing components directory
51
52### Testing Setup
53- **Respect existing test framework** - Jest, Vitest, Testing Library, Cypress, Playwright
54- Check config in `package.json` or dedicated files
55- Follow established patterns and naming (`.test.js`, `.spec.ts`, etc.)
56
57### Styling Approach
58Identify and follow the project's styling method:
59- CSS Modules (`.module.css`)
60- Styled Components / Emotion
61- Tailwind CSS (`tailwind.config.js`)
62- SASS/SCSS (`.scss` files)
63- Plain CSS
64
65## Configuration Files
66
67### Common Config Files
68- `tsconfig.json` - TypeScript configuration
69- `.eslintrc` - Linting rules
70- `.prettierrc` - Code formatting
71- `jest.config.js` or `vitest.config.ts` - Test configuration
72- `.env.local`, `.env.development` - Environment variables
73
74## Quick Reference
75
76**Common mistakes to avoid:**
77- ❌ Mixing package managers
78- ❌ Changing test framework without discussion
79
80---
81
82**Note:** Web projects vary greatly - always check the project's specific configuration and patterns before making assumptions.
majiayu000