From devtools
Local development environment — Docker stack, port layout (apps/app on 3100, API on 3101/3300, Supabase on 3121/3122/3123, Storybook on 3600, emails on 3883), .env.local vs .env.docker, Supabase Studio + Mailpit, and how to drive the running app via Playwright MCP. Triggers when starting the stack, checking why a service is unreachable, running the app in a browser, picking the right URL/port, or wiring up .env. Trigger phrases — "localhost:3100", "localhost:3101", "localhost:3121", "Supabase Studio", "Mailpit", "docker:dev", "pnpm docker:dev", "PORT_PREFIX", ".env.local", ".env.docker", "Playwright", "open the app", "dev server", "is the server running", "TIPTAP_PRO_TOKEN".
How this skill is triggered — by the user, by Claude, or both
Slash command
/devtools:dev-environmentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Mode | When | Command |
| Mode | When | Command |
|---|---|---|
| Workspace dev servers | Iterating on a single app, fastest reload | pnpm w:db start (Supabase via Supabase CLI), then pnpm w:app dev and/or pnpm w:api dev in separate terminals |
| Full docker stack | Want the whole system (Next.js + tRPC + Supabase + Redis) wired together with one command | pnpm docker:dev |
Both are fine. The docker stack is what CI / production look like; workspace dev is the fastest inner loop.
PORT_PREFIX=31, default)| Service | Port | URL |
|---|---|---|
| Next.js app (apps/app) | 3100 | http://localhost:3100 |
| tRPC API | 3101 | http://localhost:3101 |
| Supabase API | 3121 | http://localhost:3121 |
| Supabase DB | 3122 | postgres://postgres:postgres@localhost:3122/postgres |
| Supabase Studio | 3123 | http://localhost:3123 |
| Mailpit (captured emails) | 3124 | http://localhost:3124 |
Storybook and email previews run as separate workspace dev servers (not in the docker stack):
| Service | Port | Command |
|---|---|---|
| UI Storybook | 3600 | pnpm w:ui dev |
| Email previews | 3883 | pnpm w:emails dev |
The docker stack is PORT_PREFIX-driven. The default is 31 (ports 31xx). Run a second instance on a different prefix:
PORT_PREFIX=40 pnpm docker:dev # app → 4000, api → 4001, supabase → 4021…
Each prefix has its own DinD volume; first boot of a new prefix re-pulls Supabase sub-images (~5–10 min).
| File | Loaded by | Tracked? | Purpose |
|---|---|---|---|
.env.local | Workspace dev (pnpm w:app dev, scripts, agent skills) | No (gitignored) | Your personal secrets — Asana token, Resend key, TipTap, etc. Start from .env.local.example. |
.env.docker | Docker stack only | Yes (tracked) | Safe local-dev defaults for the containerised stack. Never put real secrets here. |
TIPTAP_PRO_TOKEN is the one secret the docker stack needs that isn't in .env.docker — set it in your shell or .env.local.
Once the app is up on http://localhost:3100, use the Playwright MCP server (the user's CLAUDE.md sets mcp__playwright__* as the preferred path; the gstack /browse skill is the higher-level interface).
To check whether the app is up before driving it:
curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3100
A 200/307 means it's serving; anything else (especially 7/connection refused) means the dev server isn't running yet.
pnpm w:db generate, restart the docker stack to pick up new SQL. Don't pnpm w:db migrate manually; it's denied (see drizzle-migrations).pnpm dev vs pnpm w:app dev — root pnpm dev runs turbo dev for everything in parallel; the workspace shortcut runs a single app. Prefer the shortcut unless you genuinely need everything.3000 (Next.js default) instead of 3100 (this repo's configured port).docker compose -f docker-compose.dev.yml logs -f app api to see where it's actually failing.pnpm docker:down (or PORT_PREFIX=40 pnpm docker:down for a non-default prefix).pnpm build and pnpm w:db migrate are denied for a reason; let CI / docker-stack boot apply them.npx claudepluginhub oneprojectorg/common-agent-toolkit --plugin devtoolsProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.