stack-detection

# Stack Detection Skill

This skill provides patterns for detecting a project's technology stack to ensure agents use the correct technology-specific patterns.

## Why Stack Detection Matters

**Problem**: Agents with hardcoded technology examples will hallucinate incorrect code for projects using different technologies.

**Solution**: Always detect the project's actual technology stack BEFORE writing any code.

## Detection Process

### Step 1: Read package.json

```bash
# Check for package.json
cat package.json 2>/dev/null || echo "No package.json found"
```

### Step 2: Parse Dependencies

Examine `dependencies` and `devDependencies` for technology indicators.

### Step 3: Check Config Files

Look for framework-specific configuration files.

### Step 4: Examine Existing Code

Check existing patterns in the codebase.

---

## Frontend Framework Detection

### React
```
Indicators:
- package.json: "react", "react-dom"
- Files: jsx/tsx extensions, React imports
- Config: None required (bundler handles it)

Sub-frameworks:
- "next" → Next.js (App Router if app/ exists, Pages Router if pages/)
- "gatsby" → Gatsby
- "remix" → Remix
- "@tanstack/react-router" → TanStack Router
```

### Vue
```
Indicators:
- package.json: "vue"
- Files: .vue extensions
- Config: vite.config with Vue plugin, or vue.config.js

Sub-frameworks:
- "nuxt" → Nuxt 3
- "nuxt-bridge" → Nuxt Bridge
```

### Angular
```
Indicators:
- package.json: "@angular/core"
- Files: .component.ts, .module.ts, .service.ts
- Config: angular.json
```

### Svelte
```
Indicators:
- package.json: "svelte"
- Files: .svelte extensions
- Config: svelte.config.js

Sub-frameworks:
- "@sveltejs/kit" → SvelteKit
```

### SolidJS
```
Indicators:
- package.json: "solid-js"
- Config: vite.config with Solid plugin
```

---

## Backend Framework Detection

### Express
```
Indicators:
- package.json: "express"
- Files: app.use(), app.get(), Router()
```

### Fastify
```
Indicators:
- package.json: "fastify"
- Files: fastify.regi