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

# 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.register(), fastify.get()

NestJS

Indicators:
- package.json: "@nestjs/core"
- Files: @Controller(), @Injectable(), @Module() decorators
- Config: nest-cli.json

Hono

Indicators:
- package.json: "hono"
- Files: new Hono(), app.get()

Koa

Indicators:
- package.json: "koa"
- Files: new Koa(), ctx.body

Next.js API Routes

Indicators:
- package.json: "next"
- Files: app/api/*/route.ts (App Router) or pages/api/*.ts (Pages Router)

---

Database & ORM Detection

Prisma

Indicators:
- package.json: "prisma", "@prisma/client"
- Files: prisma/schema.prisma
- Config: prisma/schema.prisma

Usage patterns:
- prisma.model.findMany()
- PrismaClient import

TypeORM

Indicators:
- package.json: "typeorm"
- Files: @Entity(), @Column() decorators
- Config: ormconfig.json, data-source.ts

Usage patterns:
- getRepository()
- createQueryBuilder()

Drizzle

Indicators:
- package.json: "drizzle-orm"
- Files: drizzle/ directory, *.schema.ts
- Config: drizzle.config.ts

Usage patterns:
- db.select().from()
- pgTable(), mysqlTable()

Sequelize

Indicators:
- package.json: "sequelize"
- Files: Model.define(), sequelize.define()
- Config: .sequelizerc

Knex

Indicators:
- package.json: "knex"
- Config: knexfile.js, knexfile.ts

Usage patterns:
- knex('table').select()
- knex.schema.createTable()

Database Type

PostgreSQL:
- DATABASE_URL contains "postgresql://" or "postgres://"
- package.json: "pg"

MySQL:
- DATABASE_URL contains "mysql://"
- package.json: "mysql2"

SQLite:
- DATABASE_URL contains "file:" or ".db"
- package.json: "better-sqlite3", "sqlite3"
- Files: *.db, *.sqlite files

MongoDB:
- DATABASE_URL contains "mongodb://"
- package.json: "mongodb", "mongoose"

---

State Management Detection

React State Libraries

Redux:
- package.json: "@reduxjs/toolkit", "redux"
- Files: createSlice(), configureStore()

Zustand:
- package.json: "zustand"
- Files: create() from zustand

Jotai:
- package.json: "jotai"
- Files: atom(), useAtom()

TanStack Query:
- package.json: "@tanstack/react-query"
- Files: useQuery(), useMutation()

Recoil:
- package.json: "recoil"
- Files: atom(), selector(), useRecoilState()

Vue State Libraries

Pinia:
- package.json: "pinia"
- Files: defineStore()

Vuex:
- package.json: "vuex"
- Files: createStore(), mapState()

---

Styling Detection

Tailwind CSS

Indicators:
- package.json: "tailwindcss"
- Config: tailwind.config.js, tailwind.config.ts
- Files: className with utility classes (flex, p-4, text-lg)

CSS-in-JS

Styled Components:
- package.json: "styled-components"
- Files: styled.div``, css``

Emotion:
- package.json: "@emotion/react", "@emotion/styled"
- Files: css``, styled()

Component Libraries

Material UI:
- package.json: "@mui/material"

Chakra UI:
- package.json: "@chakra-ui/react"

Radix UI:
- package.json: "@radix-ui/*"

shadcn/ui:
- Files: components/ui/ directory with Radix-based components

Ant Design:
- package.json: "antd"

CSS Modules

Indicators:
- Files: *.module.css, *.module.scss
- Imports: import styles from './Component.module.css'

---

Testing Framework Detection

Unit Testing

Jest:
- package.json: "jest"
- Config: jest.config.js, jest.config.ts
- Files: *.test.ts, *.spec.ts with describe/it/expect

Vitest:
- package.json: "vitest"
- Config: vitest.config.ts
- Files: Same as Jest but often in vitest-specific config

Mocha:
- package.json: "mocha"
- Config: .mocharc.js, .mocharc.json
- Often with "chai" for assertions

E2E Testing

Playwright:
- package.json: "@playwright/test"
- Config: playwright.config.ts
- Files: *.spec.ts in e2e/ or tests/

Cypress:
- package.json: "cypress"
- Config: cypress.config.ts, cypress.json
- Files: cypress/ directory with e2e/, support/

---

Validation Library Detection

Zod:
- package.json: "zod"
- Files: z.object(), z.string()

Yup:
- package.json: "yup"
- Files: yup.object(), yup.string()

Joi:
- package.json: "joi"
- Files: Joi.object(), Joi.string()

class-validator (NestJS):
- package.json: "class-validator"
- Files: @IsString(), @IsEmail() decorators

---

Build Tool Detection

Vite:
- package.json: "vite"
- Config: vite.config.ts

Webpack:
- package.json: "webpack"
- Config: webpack.config.js

esbuild:
- package.json: "esbuild"
- Often used through other tools

Turbopack:
- Next.js 13+ with --turbo flag

---

Detection Script

Run this detection process before writing code:

## Stack Detection Checklist

1. [ ] Read package.json dependencies
2. [ ] Check for framework config files
3. [ ] Examine existing code patterns
4. [ ] Document detected stack:
   - Frontend: _______________
   - Backend: _______________
   - Database/ORM: _______________
   - Testing: _______________
   - Styling: _______________
   - Validation: _______________
5. [ ] Use ONLY detected technology patterns

---

Usage in Agents

Before Writing Code

1. Read package.json
2. Identify all relevant technologies
3. Load appropriate technology-specific skills
4. Use ONLY patterns from detected stack
5. NEVER assume technology - verify first

If Technology Not Detected

1. Ask user to clarify technology stack
2. Check for alternative indicators
3. Default to minimal assumptions
4. Explain any assumptions made

---

Common Mistakes to Avoid

1. Assuming React - Check first, could be Vue/Angular/Svelte
2. Assuming Prisma - Check first, could be TypeORM/Drizzle/raw SQL
3. Assuming Jest - Check first, could be Vitest/Mocha
4. Assuming Tailwind - Check first, could be CSS modules/styled-components
5. Assuming Express - Check first, could be Fastify/NestJS/Hono

---

Related Skills

Load technology-specific skills after detection:

• react-patterns for React projects
• vue-patterns for Vue projects
• prisma-patterns for Prisma projects
• typeorm-patterns for TypeORM projects
• jest-patterns for Jest projects
• playwright-patterns for Playwright projects
• tailwind-patterns for Tailwind projects