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

code

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

code

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

code

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

Svelte

code

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

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

SolidJS

code

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

Backend Framework Detection

Express

code

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

Fastify

code

Indicators:
- package.json: "fastify"
- Files: fastify.register(), fastify.get()

NestJS

code

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

Hono

code

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

Koa

code

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

Next.js API Routes

code

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

Database & ORM Detection

Prisma

code

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

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

TypeORM

code

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

Usage patterns:
- getRepository()
- createQueryBuilder()

Drizzle

code

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

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

Sequelize

code

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

Knex

code

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

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

Database Type

code

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

code

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

code

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

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

Styling Detection

Tailwind CSS

code

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

CSS-in-JS

code

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

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

Component Libraries

code

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

code

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

Testing Framework Detection

Unit Testing

code

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

code

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

code

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

code

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:

markdown

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

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

code

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

•Assuming React - Check first, could be Vue/Angular/Svelte
•Assuming Prisma - Check first, could be TypeORM/Drizzle/raw SQL
•Assuming Jest - Check first, could be Vitest/Mocha
•Assuming Tailwind - Check first, could be CSS modules/styled-components
•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