ask-dont-assume
Uses an ask-first workflow when requirements, scope, permissions, or tradeoffs are unclear. Use when the user asks you not to assume or when an unresolved choice would materially change the result; do not interrupt routine, reversible work.
browser-devtools
Inspect and debug Chrome web apps with the native agent-browser CLI and Chrome DevTools. Use for network requests, console errors, source debugging, storage, performance/CPU/memory analysis, React component trees and render profiling, and browser-driven reproduction. Start with a compact overview, then inspect relevant details using installed APIs.
caching
Diagnoses stale data and defines HTTP/CDN caching, freshness, and invalidation policies. Use for cache headers, ETags, hashed assets, or cache-layer investigations. Service-worker lifecycle and TanStack APIs are separate workflows.
code-quality
Reviews and simplifies code for maintainability and correctness. Use for a requested code review, refactor, removal of unnecessary abstractions or dependencies, or investigation of tangled logic. Not a default checklist for every small edit.
css
Implements or debugs CSS layout, responsive sizing, cascade, selectors, and styling performance. Use for concrete stylesheet work; visual-system design and UX reviews belong to web-design-guidelines.
database-guardrails
Plans database-backed changes with an ask-first safety gate, minimal schema growth, programmatic versioned migrations, and evidence-based indexes. Use for database modeling, schema changes, migrations, data repair, or database performance work; do not access or change a database by default.
git
Manages Git commits, branches, conflict resolution, and recovery. Use when the task requires Git operations or history analysis; follow the repository workflow.
html
Implements semantic HTML, forms, document structure, and head metadata. Use for markup and native accessibility behavior, rather than general visual design or CSS layout.
javascript
Implements or debugs JavaScript/TypeScript language behavior, async work, data transformations, and runtime memory. Use for JS/TS logic issues; React rendering and UI design have separate workflows.
low-level-web-rendering
Chooses between DOM, SVG, Canvas, WebGL, WebGPU, and worker rendering, or evaluates experimental HTML-in-Canvas. Use for renderer selection or architecture tradeoffs, not routine work in an already-selected GPU library.
react-best-practices
Builds and reviews React components, hooks, state, data loading, and rendering performance. Use for React correctness, effect cleanup, slow renders, or unresponsive component interactions. TanStack-specific API work and React Three Fiber scenes have separate workflows.
react-three-fiber
Builds and optimizes scenes using @react-three/fiber and drei. Use for R3F frame loops, React scene ownership, assets, and instancing; do not select solely because a task mentions 3D or Three.js.
security
Reviews and implements web security boundaries, authorization, output encoding, session protection, and secret handling. Use for security-sensitive changes or a requested security review.
service-worker
Implements service-worker lifecycle, offline routing, cache ownership, update flows, and PWA behavior. Use for a worker or offline/PWA task; HTTP/CDN header policy alone belongs to caching.
tanstack
Uses TanStack Query, Router, Table, Form, Virtual, or Start in an existing or explicitly selected TanStack project. Use for its query keys, mutations, loaders, URL state, and library APIs; do not introduce the stack for generic React work.
vgpu
Builds shader effects, materials, particles, and 3D visual surfaces with Vercel vgpu. Use when vgpu is requested or installed, including integration and GPU debugging. Read version-matched docs; do not migrate other renderers implicitly.
wasm-rust
Implements Rust/WebAssembly modules and wasm-bindgen integration. Use for measured CPU kernels, wasm packaging, and JS-WASM transfers; not GPU shader execution or DOM styling.
web-design-guidelines
Designs or reviews web interfaces for visual hierarchy, coherent tokens and themes, interaction states, responsiveness, and accessibility. Use for a UI redesign, design-system decisions, or a screen/flow review. Pure CSS debugging and HTML markup implementation are separate tasks.
web-performance
Diagnoses browser loading, Core Web Vitals, main-thread work, and layout/paint bottlenecks. Use for a slow page or measured browser-performance issue; isolated React renders and GPU passes have specialist workflows.
webgl
Implements or debugs raw WebGL/WebGL2 contexts, GLSL, buffers, textures, and GL draw calls. Use for direct WebGL API work, not generic 3D tasks owned by a higher-level renderer.
webgpu
Implements or debugs raw browser WebGPU/WGSL pipelines, compute, buffers, textures, and device loss. Use for direct GPU API work; vgpu-library APIs and R3F scenes have separate workflows.
webview2-winui
Embeds web content in WinUI 3 through WebView2. Use for virtual host mapping, native/web messages, lifecycle, and desktop packaging; not generic browser React development.