Human Layer
Human-readable explanations for every file and folder in your project — right inside VS Code.
What it does
Hover over any file or folder in the Explorer to see a plain-English explanation of what it is and why it exists. No jargon, no guessing.
Supports 75+ common files and folders across React, Next.js, Node.js, and general projects — including components, hooks, middleware, .env, prisma, node_modules, Dockerfile, and more.
Features
- Hover tooltips — two-line descriptions on every known file and folder
- Human Layer panel — a sidebar panel in the Explorer showing all recognised items with their full explanations
- Blue dot hints — subtle colour markers on known files so you can spot them at a glance
- Generic extension matching — explains any
.md, .png, .svg, .jpg, and more
Supported items
Folders: src, app, components, hooks, api, lib, utils, public, styles, types, services, store, context, db, dist, docker, docs, migrations, models, prisma, redux, routes, schemas, scripts, seed, server, supabase, workers, and more.
Files: .env, .env.local, package.json, tsconfig.json, next.config.ts, tailwind.config.ts, middleware.ts, Dockerfile, docker-compose.yml, schema.prisma, vercel.json, jest.config.ts, vite.config.ts, and more.
Usage
- Open any project in VS Code
- Hover over a file or folder in the Explorer to see its explanation
- Expand the Human Layer panel in the Explorer sidebar for a full list of recognised items
Extension Settings
No configuration required. Works out of the box.
Release Notes
0.0.1
Initial release.
