| name | web-projects |
| description | 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. |
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 server
build - Production build
test - Run tests
lint - Linting
format - 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 formatting
jest.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.