web

agent-browser CLI（Vercel Labs 製・Rust ネイティブ・CDP で Chrome を直接制御・デーモンに Node.js/Playwright 不要）によるブラウザ操作自動化。snapshot→ref ワークフロー、read（Chrome 起動なしで URL を markdown 取得）/chat（自然言語操作）/batch（連続実行）/mcp（MCP サーバー化）、セマンティックロケーター・状態永続化（storageState 互換 JSON）・認証 Vault・ネットワーク傍受に対応。 Use when アプリの web 操作・ブラウザ自動化（スクレイピング、UI 操作フロー、認証永続化、フォーム送信、データ抽出）を行うとき。これらは本スキル（agent-browser CLI）を第一選択にする。 住み分け: E2E テストスイートの設計・実装は testing-e2e-with-playwright、パフォーマンス計測/Lighthouse/詳細トレース等の診断は chrome-devtools MCP、ユーザーの既存 Chrome タブ/ログイン済みセッション操作は claude-in-chrome を使う。

Build backend services, web servers, and CLI tools on the Node.js runtime using the Fastify framework. Use when package.json contains fastify, when defining Fastify routes, plugins, hooks, or JSON-schema validation, or when working with Node runtime internals (event loop phases, libuv, streams, buffers, clustering, worker threads, blocking-the-event-loop avoidance) beyond browser-level JavaScript. Covers Fastify routing and request/reply, schema-based validation and serialization (AJV/JSON Schema), the plugin and encapsulation model, Pino logging, server-side rendering with EJS/Handlebars, RESTful CRUD APIs, persistence with Mongoose/Sequelize/SQLite/Redis, session/cookie and JWT authentication flows, message queues (RabbitMQ/amqplib), CLI tooling (process stdio, promisify, CSV), external data integration (fetch, feed aggregation, scraping via cheerio/Puppeteer), email and generative-AI service integration, and project scaffolding (npm init, ESM, node --watch).

Decision guide for choosing among API styles — REST, GraphQL (query-based), gRPC (RPC), webhooks (callback), WebSocket (bidirectional), messaging (broker-based), and web feeds — based on trade-offs in communication type, transmission mode, responsiveness, binary-data support, and development effort. Covers API concepts (message, transmission modes, lifecycle, API-as-a-product), protocol foundations (HTTP/1.1 vs HTTP/2 vs HTTP/3 QUIC, TCP head-of-line blocking), cross-style patterns (pagination, rate limiting, caching, retries, versioning, OWASP), and per-style trade-offs with a when-to-use decision matrix. Use when selecting or comparing API styles — REST vs GraphQL vs gRPC vs realtime/event-driven — or justifying an architecture decision. For REST API design, testing, or gRPC .proto specs, use developing-web-apis. For Express/NestJS implementation, use developing-fullstack-javascript. For MCP protocol, use lang:developing-mcp. For microservice/infrastructure trade-offs, use cloud:architecting-infrastructure.

Creates distinctive, production-grade frontend code with bold aesthetic direction (typography, color, motion, anti-AI-slop), shadcn/ui integration, object-oriented UI (OOUI) methodology, and micro-frontend architecture patterns. Use when implementing web components, pages, or applications requiring creative, polished UI code; when designing UI structure using object-oriented approach (object extraction, view/navigation patterns, layout pattern selection); or when architecting micro-frontend systems (team splitting, Module Federation, BFF patterns, migration strategy, Conway's Law application). For Storybook story creation and component testing, use developing-react instead. For theoretical UI/UX design principles, use design:designing-ux instead. For Tailwind CSS methodology and component design patterns, use styling-with-tailwind instead. For design system methodology (pattern language, organizational strategy, UI pattern catalog), use design:building-design-systems instead.

FastAPI (Python) web API development guide covering fundamentals (routing, path/query params, Pydantic models, request/response, error handling), data persistence (SQLAlchemy, SQLModel, async DB, MongoDB, CRUD, Alembic migrations), dependency injection (Depends, dependency_overrides, scopes/lifespan), auth & security (OAuth2, JWT, CORS), async & concurrency (async/await, Starlette, BackgroundTasks, WebSocket, SSE/streaming), testing (TestClient, pytest, httpx, mocking), production deployment & scaling (uvicorn/gunicorn, Docker, optimization), generative-AI services (model serving, streaming, concurrency), and microservice/GraphQL/OpenAPI patterns. MUST load when fastapi is in pyproject.toml/requirements.txt or .py files import fastapi. For Python language/tooling fundamentals (uv/ruff/mypy, packaging, non-FastAPI patterns), use lang:developing-python. For REST/HTTP-spec design, versioning, and API test strategy, use developing-web-apis. For Node.js/Fastify backend services, use building-nodejs-services.

Full-stack JavaScript development covering backend (NestJS/Express), frontend (React), deployment (CI/CD), and quality; also covers JavaScript language fundamentals (types, closures, prototypes, async/await, modules, and metaprogramming). MUST load when package.json contains Express, NestJS, or similar backend frameworks. Covers API design, state management, caching, and testing. Also use when working with JavaScript language-level concerns — type coercion, scoping, this binding, Promise patterns, Proxy/Reflect, or iterator protocols. Also covers V8 engine internals (hidden classes, inline caches, string/number repr), event loop model, JS/Node error model, and Express 5 + Drizzle ORM CRUD APIs. For Fastify-based services, Node.js runtime internals (libuv, streams, clustering, worker threads), CLI tools, message queues, or standalone Node project scaffolding, use building-nodejs-services instead.

Next.js 16.3 development guide covering App Router, Server Components, Turbopack, import.meta.glob, React Compiler, catchError, proxy.ts, root params, Cache Components, Instant Navigations (Stream/Cache/Block, Partial Prefetching), opt-in caching APIs (updateTag/revalidateTag/refresh), strict TypeScript, TypeScript 7, Tailwind CSS 4.x, Prisma 7.x, Zod 4.x, Vitest 4.x, Playwright, Docker. MUST load when package.json contains 'next' or next.config.* is detected. For React-specific concerns (internals, performance, animation, RTL) and React Router routing/auth/i18n architecture, use developing-react. SaaS構築パターン（認証・決済・AI統合）を含む。 For enterprise multi-tenant SaaS, use cloud:building-multi-tenant-saas. For AI integration with Vercel AI SDK and LangChain.js, use ai:integrating-ai-web-apps. For logging design, use cloud:implementing-observability. For Tailwind CSS methodology and customization, use styling-with-tailwind. For Firebase platform details (Auth/Firestore/Rules)→cloud:developing-firebase.

React 19.x development guide covering React 19 features (Actions, useActionState, useOptimistic, View Transitions, Activity, useEffectEvent), internals (rendering principles, memoization, Context/data flow), design patterns (Container/Presenter, HOC, Render Props, Compound Components), state management (useState to Zustand/TanStack Query, nuqs/Jotai), error handling (ErrorBoundary, React 19 error APIs), accessibility (ARIA, focus management, keyboard navigation, WCAG 2.1 AA), performance optimization (react-doctor 47+ rules, React Compiler, hydration/PPR), UI animation patterns (CSS transitions, easing), React Testing Library (RTL queries, userEvent, MSW mocks, TDD patterns), and Storybook (CSF3, interaction testing, a11y). Also covers React Router, auth/RBAC, i18n (react-i18next), OpenAPI type generation, and production architecture. Use when package.json contains 'react' (without 'next'), or when working on React-specific concerns in any framework.

Web API development guide covering design (endpoints, responses, HTTP spec, versioning, security incl. OAuth 2.0 and rate limiting), spec-first methodology (spec writing incl. gRPC .proto, Go E2E test framework architecture, technical debt repayment), and testing strategy (design testing with OpenAPI schemas, contract testing with Pact, automation, ATDD, performance, security testing). Use when designing REST APIs, writing API specs, adopting spec-first development, or building API test strategies. For framework-specific implementation (Express, NestJS), use developing-fullstack-javascript. For microservices patterns and trade-off analysis of API usability vs maintenance, use cloud:architecting-infrastructure instead. For choosing among API styles (REST vs GraphQL vs gRPC vs webhooks vs WebSocket vs messaging) and their trade-offs before implementation, use choosing-api-styles. For Fastify framework implementation (routing, plugins, schema validation), use building-nodejs-services.

Comprehensive design-to-code implementation skill covering general design principles, Figma MCP integration, and Figma UI design workflows. General: design system integration, visual parity validation, responsive implementation, accessibility. Figma MCP (13 tools): basic/advanced workflows (Figma Make, Code Connect, Design System Rules, design token sync), visual validation. Figma UI design: wireframe→prototype→detailed design→handoff workflow, 8pt grid, component-driven design, UIStack (5 states), style naming conventions, engineer collaboration. Use when implementing designs from any source (screenshots, mockups, Figma URLs, specs) or when designing mobile UI in Figma and preparing design handoff. Requires Figma MCP server for Figma-specific code generation workflows. For creative frontend code generation with shadcn/ui and Storybook, use designing-frontend instead. For design system architecture and organizational adoption strategy, use design:building-design-systems instead.

Web API security guide: OWASP API Security Top 10 (2023) detection/remediation (BOLA, broken authentication, BOPLA/mass assignment/excessive data exposure, unrestricted resource consumption, BFLA, sensitive business flows, SSRF, security misconfiguration, improper inventory, unsafe API consumption), API threat modeling, secure-by-design (schema-driven input constraints, unpredictable IDs, safe user flows), authn/authz (JWT, OAuth 2.0, sender-constrained tokens, OIDC, RBAC), FAPI hardening, API security observability and testing. Use when hardening/reviewing HTTP/REST API security, mitigating OWASP API Top 10 risks, designing API authn/authz, or building API security tests. For general API design→developing-web-apis. For API style choice→choosing-api-styles. For code-level OWASP Top 10/pentest→devkit:securing-code. For authz model selection (ABAC/ReBAC/Cedar/OPA) →cloud:implementing-dynamic-authorization. For threat-modeling methodology (STRIDE/LINDDUN) →cloud:architecting-security.

Tailwind CSS styling methodology covering utility-first philosophy, v4 CSS-first config (@theme, directives), utility/modifier reference, dark mode implementation, component design patterns (className props, headless UI and animation library selection), customization (plugins, presets, JS API), migration strategies, and design system construction with design tokens. Use when styling web applications with Tailwind CSS or making CSS architecture decisions. For frontend code generation with shadcn/ui and Storybook, use designing-frontend instead. For general UI/UX design principles, use design:designing-ux instead. For design system strategy beyond CSS (pattern language, organizational adoption, UI pattern catalog, measurement), use design:building-design-systems instead.

Playwright E2Eテストの設計・実装・運用ガイド。セマンティックロケーター優先順位、Page Object Model、fixtures、Web-First Assertionsとフレークテスト対策、テストデータ分離、APIモッキング/ネットワークエミュレーション、認証セットアップ（storageState）、CI/CD・Docker統合と並列実行、デバッグ（trace/UI Mode）、ビジュアルリグレッション、アクセシビリティテストをカバー。 Use when writing, reviewing, or maintaining E2E tests with @playwright/test. playwright.config.* 検出時に自動ロード。 テスト全般の方法論（TDD/AAA/テストピラミッド）は devkit:testing-code、Vitestランナー固有（設定・移行・Browser Mode）は testing-with-vitest、テスト以外のブラウザ操作自動化（スクレイピング/UI操作/フォーム送信）は automating-browser を使う。

Vitest 4.x specialized testing guide covering the test runner core: v3 to v4 migration and breaking changes (maxWorkers, test.projects, module runner, coverage overhaul), configuration (environments, coverage v8/istanbul, reporters), CLI and test filtering/tags, parallelism and performance (pools, sharding), Browser Mode (stable in v4, visual regression), fixtures and test context (test.extend), lifecycle hooks (aroundEach/aroundAll, globalSetup), mocking (vi API, modules, timers, MSW), matchers, type testing, and in-source testing. Use when package.json contains vitest or vitest.config.* is present, or when configuring, migrating, or optimizing Vitest. For framework-agnostic test methodology (TDD, AAA, test pyramid, four pillars, anti-patterns), use devkit:testing-code. For React Testing Library and React component testing, use developing-react. For Playwright E2E, use testing-e2e-with-playwright.

Next.js development integration tools via the next-devtools MCP, served from the running dev server's /_next/mcp endpoint (nextjs_runtime, get_compilation_issues, compile_route). Covers dev-server discovery, route structure inspection (nextjs_get_routes), error diagnostics with automatic fixes (nextjs_get_errors / nextjs_auto_fix), and fast compilation checks against the live dev server (project-wide with get_compilation_issues, single-route with compile_route). Use when interacting with the next-devtools MCP on a running dev server (requires Next.js 16.0.0+ and a started dev server via npm run dev). Primary tool for next-devtools MCP interactions. For Next.js framework patterns (App Router, Server Components, caching APIs, Prisma/Zod), use developing-nextjs instead.