web-projects

# 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.