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.