ts-dev-kit

15 specialized agents + 22 curated skills for TypeScript fullstack development

What's Included

Agents (15)

| Agent | Specialty | | ----------------------- | ------------------------------------------------------- | | accessibility-pro | WCAG 2.1 AA compliance and inclusive design | | api-builder | Fastify 5 REST APIs, validation, auth, rate limiting | | code-reviewer | Code correctness, security, performance reviews | | database-expert | PostgreSQL optimization, schema design, migrations | | debugger | Error investigation, stack traces, systematic diagnosis | | docker-expert | Multi-stage builds, Compose, image optimization | | multi-agent-coordinator | Orchestrates multiple agents for complex workflows | | nextjs-expert | App Router, RSC, edge functions, server actions | | performance-engineer | Query optimization, caching, bundle reduction | | playwright-expert | E2E tests, cross-browser, visual testing | | react-specialist | Hooks, performance, state management, components | | security-scanner | Vulnerability detection, OWASP, dependency auditing | | test-generator | Unit, integration, E2E test suites | | typescript-pro | Generics, type inference, conditional types | | ux-optimizer | User flows, form UX, friction reduction |

Skills (22)

| Skill | Slug | Domain | | ---------------------- | ------------------------- | ------------------------------------------------- | | BullMQ | /bullmq | Redis job queues, workers, flows, schedulers | | Codebase Adapter | /codebase-adapter | Adapt plugin to your project on installation | | Composition Patterns | /composition-patterns | React compound components, render props | | Conventional Commits | /conventional-commits | Commit message spec, types, SemVer — with live staged diff | | Core Web Vitals | /core-web-vitals | LCP, INP, CLS reference + HTML report generator | | Debug | /debug | Full-stack debugging workflow, multi-agent triage | | Docker | /docker | Dockerfiles, compose, optimization, security | | Drizzle ORM | /drizzle-pg | PostgreSQL ORM schemas, queries, migrations | | Execute Task | /execute-task | Orchestrate agents to implement a task file | | Fastify Best Practices | /fastify-best-practices | Routes, plugins, hooks, validation | | Generate PRD | /generate-prd | Product Requirements Documents from descriptions | | Generate Task | /generate-task | Break PRD features into agent-ready task files | | ioredis | /ioredis | Redis client, pipelines, Pub/Sub, Cluster | | Next.js Best Practices | /nextjs-best-practices | App Router, RSC, data patterns | | OWASP Security Review | /owasp-security-review | Top 10:2025 vulnerability checklist | | PostgreSQL | /postgresql | Queries, schemas, indexes, JSONB | | React Best Practices | /react-best-practices | React 19 performance, rendering | | Service Worker | /service-worker | PWA caching, push notifications | | TanStack Query | /tanstack-query | React Query v5, caching, SSR/hydration | | TypeScript Conventions | /typescript-conventions | Strict config, patterns, best practices | | UI/UX Guidelines | /ui-ux-guidelines | Accessibility, layout, forms | | Yolo | /yolo | Devcontainer setup for autonomous Claude Code |

Workflow

This is the recommended end-to-end flow — from a blank project to a committed feature:

1. Install the plugin

/plugin marketplace add jgamaraalv/ts-dev-kit
/plugin install ts-dev-kit@ts-dev-kit

2. Adapt to your project (recommended)

Run once after installing to align agents and skills with your actual stack, package names, paths, and MCPs:

/codebase-adapter

The skill reads your package.json, lockfile, .claude/agents/, and MCP config, then surgically patches the plugin's agent and skill files to match your project — without touching any workflow logic.

3. Define what to build

Generate a PRD from a description:

/generate-prd Add a user notification system that sends emails and in-app alerts

Then break it into agent-ready task files:

/generate-task

This produces structured task files with acceptance criteria, affected packages, quality gate commands, and a suggested agent.

4. Execute the task

/execute-task tasks/notifications-api.md

The skill picks the right execution mode (single-agent or multi-agent), dispatches the appropriate agents, and runs quality gates (typecheck, lint, test) before declaring the task done.

5. Commit

/conventional-commits

The skill pre-injects your staged diff and the last 8 commits so Claude sees the actual changes before suggesting a message — no copy-pasting needed.

Installation

Method 1: Claude Code Plugin (agents + skills)

/plugin marketplace add jgamaraalv/ts-dev-kit
/plugin install ts-dev-kit@ts-dev-kit

Or via CLI:

claude plugin install ts-dev-kit --scope user

Method 2: skills.sh (skills only — works with Claude Code, Cursor, Windsurf)

# Install all skills
npx skills add jgamaraalv/ts-dev-kit

# Install a specific skill
npx skills add jgamaraalv/ts-dev-kit --skill fastify-best-practices

# Install globally
npx skills add jgamaraalv/ts-dev-kit --global

Note: skills.sh installs skills only, not agents.

Method 3: npm

npm install -g @jgamaraalv/ts-dev-kit
claude --plugin-dir ./node_modules/@jgamaraalv/ts-dev-kit

Method 4: Direct from GitHub

git clone https://github.com/jgamaraalv/ts-dev-kit.git
claude --plugin-dir ./ts-dev-kit

Recommended MCP Servers

Some agents and skills reference external MCP tools for documentation lookup, browser debugging, E2E testing, and web fetching. These are optional — skills degrade gracefully without them — but installing them unlocks the full experience.

| MCP Server | Used by | Purpose | | --------------- | ------------------------------------------------ | ------------------------------------ | | context7 | Most skills (doc lookup) | Query up-to-date library docs | | playwright | playwright-expert, debugger, test-generator | Browser automation and E2E testing | | chrome-devtools | debugger | Frontend debugging, screenshots | | firecrawl | execute-task | Web fetching and scraping | | sentry | debugger, debug skill | Error tracking and stack traces | | posthog | debugger | User impact and error frequency |

Installing as Claude Code plugins

claude plugin add context7
claude plugin add playwright
claude plugin add firecrawl

Installing as standalone MCP servers

# context7 — no API key required
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

# playwright — no API key required
claude mcp add playwright -- npx -y @playwright/mcp@latest

# firecrawl — requires FIRECRAWL_API_KEY
claude mcp add firecrawl --env FIRECRAWL_API_KEY=your-key -- npx -y firecrawl-mcp

chrome-devtools requires Chrome running with remote debugging enabled (--remote-debugging-port=9222). Refer to the Chrome DevTools MCP docs for setup instructions.

Dynamic Context Injection

Several skills use the !command`` syntax to pre-inject live data before Claude receives the prompt. This means Claude already has the real context when it starts — no manual copy-pasting required.

| Skill | What gets injected | | ----- | ------------------ | | /conventional-commits | Staged diff summary, full staged diff, last 8 commit messages | | /debug | Last 10 git commits, working tree status | | /codebase-adapter | Working directory, lockfile, installed agents, MCP servers, package.json | | /yolo | Project root, devcontainer presence, Docker status, VS Code installation |

Tech Stack Covered

TypeScript, Fastify 5, Next.js (App Router), React 19, PostgreSQL 16, Redis (ioredis), BullMQ, Drizzle ORM, TanStack Query v5, Docker, Playwright, Service Workers, Core Web Vitals, WCAG 2.1, OWASP Top 10:2025, Tailwind CSS v4

License

MIT