web-projects - Claude MCP Skill

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