Claude Code Plugins

Community-maintained marketplace

Feedback

tech-stack-detection

@rsmdt/the-startup
138
0

Auto-detect project tech stacks (React, Vue, Express, Django, etc.). Recognize package managers and configuration patterns. Use when starting work on any project, analyzing dependencies, or providing framework-specific guidance.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name tech-stack-detection
description Auto-detect project tech stacks (React, Vue, Express, Django, etc.). Recognize package managers and configuration patterns. Use when starting work on any project, analyzing dependencies, or providing framework-specific guidance.

Framework Detection

When to Use

  • Starting work on an unfamiliar project
  • Determining appropriate tooling and patterns for recommendations
  • Providing framework-specific guidance and best practices
  • Identifying package manager for dependency operations
  • Understanding project architecture before making changes

Detection Methodology

Step 1: Package Manager Detection

Check for package manager indicators in the project root:

File Package Manager Ecosystem
package-lock.json npm Node.js
yarn.lock Yarn Node.js
pnpm-lock.yaml pnpm Node.js
bun.lockb Bun Node.js
requirements.txt pip Python
Pipfile.lock pipenv Python
poetry.lock Poetry Python
uv.lock uv Python
Cargo.lock Cargo Rust
go.sum Go Modules Go
Gemfile.lock Bundler Ruby
composer.lock Composer PHP

Step 2: Configuration File Analysis

Examine root-level configuration files for framework indicators:

  1. Read package.json - Check dependencies and devDependencies for framework packages
  2. Read pyproject.toml - Check [project.dependencies] or [tool.poetry.dependencies]
  3. Read framework-specific configs - next.config.js, vite.config.ts, angular.json, etc.

Step 3: Directory Structure Patterns

Identify framework conventions:

  • app/ or src/app/ - Next.js App Router, Angular
  • pages/ - Next.js Pages Router, Nuxt.js
  • components/ - React/Vue component-based architecture
  • routes/ - Remix, SvelteKit
  • views/ - Django, Rails, Laravel
  • controllers/ - MVC frameworks (Rails, Laravel, NestJS)

Step 4: Framework-Specific Patterns

Apply detection patterns from the framework signatures reference.

Detection Workflow

START
  |
  v
[Check lock files] --> Identify package manager
  |
  v
[Read manifest] --> package.json / pyproject.toml / Cargo.toml
  |
  v
[Check dependencies] --> Match against known frameworks
  |
  v
[Check config files] --> Framework-specific configuration
  |
  v
[Verify directory structure] --> Confirm framework conventions
  |
  v
[Output] --> Framework, version, package manager, key patterns

Output Format

When reporting detected framework, include:

  1. Framework name and version (if determinable)
  2. Package manager (with command examples)
  3. Key configuration files to be aware of
  4. Directory conventions the framework expects
  5. Common commands for development workflow

Best Practices

  • Always verify detection by checking multiple indicators (config + dependencies + structure)
  • Report confidence level when patterns are ambiguous
  • Note when multiple frameworks are present (e.g., Next.js + Tailwind + Prisma)
  • Check for meta-frameworks built on top of base frameworks
  • Consider monorepo patterns where different packages may use different frameworks

References

See references/framework-signatures.md for comprehensive detection patterns for all major frameworks.