web-projects

ilude's avatarfrom ilude

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.

⭐5stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill acts as an intelligent architect for modern web development, providing standardized guidelines for JavaScript and TypeScript ecosystems. It optimizes the development workflow by automatically detecting and aligning with specific framework configurations (React, Next.js, Vue, Angular, Svelte), package managers, and styling patterns, ensuring code consistency and reducing configuration errors in complex frontend and Node.js projects.

Use Cases

  • Framework-Specific Development: Automatically adapt coding suggestions and project structures based on detected frameworks like Next.js, Vite, or Svelte to maintain architectural integrity.
  • Cross-Package Manager Compatibility: Ensure seamless workflow transitions by detecting whether a project uses npm, yarn, or pnpm and executing the correct dependency commands.
  • Standardized Styling and UI Patterns: Maintain visual consistency by identifying and following the project's established styling methods, such as Tailwind CSS, Styled Components, or CSS Modules.
  • Testing and QA Alignment: Integrate with existing testing frameworks like Jest, Vitest, or Cypress by following established naming conventions and configuration patterns for new test cases.
  • Configuration Management: Streamline the setup and modification of essential development files including tsconfig.json, eslintrc, and environment variables across different deployment stages.
nameweb-projects
descriptionGuidelines 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.