By kvnwolf
Web development tools — TanStack framework, forms, component testing, and E2E testing
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
Writes component tests using Vitest Browser Mode with Playwright for real-browser testing. Use when testing React components, writing browser-based tests, verifying UI behavior, testing forms, or deciding whether a component needs a test.
Writes end-to-end tests with Playwright Test for full user flow verification. Use when adding, modifying, or removing user flows in an application. Do not use for isolated component behavior — use component-testing instead.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Builds type-safe, accessible forms with TanStack Form, Base UI Field, and the useAppForm hook. Use when creating forms, adding validation, handling form submission, or working with form fields and form state management.
Executes bash commands
Hook triggers when Bash tool is used
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Plugin marketplace for Claude Code — opinionated developer tools used across multiple projects.
# Add the marketplace
/plugin marketplace add kvnwolf/devtools
# Install plugins
/plugin install base
/plugin install web
/plugin install backend
Foundational developer tools for any TypeScript project.
Skills:
| Skill | Description |
|---|---|
| base | Scaffolds new TypeScript projects from scratch |
| commit | Wraps up work by syncing documentation, committing, pushing, and opening a pull request |
| create-skill | Creates or modifies agent skills |
| environment-variables | Manages and validates environment variables with t3-env and Zod |
| execute | Executes a plan generated by /plan — orchestrates team members in parallel with isolated worktrees |
| find-skills | Helps users discover and install agent skills from the open skills ecosystem |
| plan | Plans development tasks through codebase exploration, exhaustive interviews, and structured file-based plans |
| unit-testing | Writes unit tests following behavior-driven conventions with Vitest |
| work | Plans and executes development tasks through codebase exploration, interviews, and structured plans |
Agents:
| Agent | Description |
|---|---|
| task-executor | Executes a single task from a plan autonomously — reads task file, implements, commits, merges, and updates tracking |
Hooks:
| Hook | Event | Description |
|---|---|---|
| strip-git-c | PreToolUse (Bash) | Strips git -C <path> so commands run in the current directory |
| enforce-bun | PreToolUse (Bash) | Replaces npm/npx with bun/bunx |
| lint-changes | PostToolUse (Write|Edit) | Runs Biome lint on edited files |
| typecheck | PostToolUse (Write|Edit) | Runs incremental TypeScript type-checking |
| run-related-tests | PostToolUse (Write|Edit) | Runs Vitest related tests on edited files |
Web development tools — TanStack framework, forms, and browser testing.
Skills:
| Skill | Description |
|---|---|
| agent-browser | Browser automation CLI for AI agents — navigate, fill forms, click, screenshot, scrape, and test web apps |
| component-testing | Writes component tests using Vitest Browser Mode with Playwright |
| e2e-testing | Writes end-to-end tests with Playwright Test |
| shadcn | Provides instructions for building UIs with shadcn/ui components |
| tanstack-form | Builds type-safe, accessible forms with TanStack Form |
| tanstack-start | Provides instructions for working with TanStack Start projects |
| vercel-react-best-practices | React and Next.js performance optimization guidelines from Vercel Engineering |
Hooks:
| Hook | Event | Description |
|---|---|---|
| enforce-agent-browser | PreToolUse (Bash) | Replaces agent-browser with bunx agent-browser@latest and adds --headed |
Backend development tools — Convex database, authentication, and email.
Skills:
| Skill | Description |
|---|---|
| convex | Provides instructions for working with Convex backend projects |
| convex-auth | Provides instructions for working with Better Auth in Convex projects |
| convex-auth-admin | Provides instructions for the Better Auth admin plugin |
| convex-auth-email-otp | Provides instructions for the Better Auth email OTP plugin |
| convex-auth-organizations | Provides instructions for the Better Auth organization plugin |
| convex-resend | Provides instructions for sending emails with Resend |
Hooks:
| Hook | Event | Description |
|---|---|---|
| convex-generate | PostToolUse (Write|Edit) | Runs bun run convex generate when files in convex/ are edited |
bun run setupnpx claudepluginhub kvnwolf/devtools --plugin webFoundational developer tools for any TypeScript project — project scaffolding, git workflow, testing, linting, and type-checking
Backend development tools — Convex database, authentication with Better Auth, and email with Resend
Architect-and-workers engineering kit: staged work sessions (scope → interview → research → spec → execute → wrap), worker agents (researcher, implementor, reviewer, verifier), and supporting skills.
Project scaffolding with 30+ integrations
Frontend component development with accessibility and responsive design
Agents and skills that are specialised in building and maintaining web applications
Full-stack orchestration with deployment, performance, security, and test automation
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Claude Code skill pack for StackBlitz (18 skills)