All Skills

Use when designing, refactoring, or debugging Vue 3 components, Composition API patterns, props/emits, slots, composables, and component architecture.

Turn ideas into fully formed designs and specs through natural collaborative dialogue. Use when planning new features, designing architecture, or making significant changes to the codebase.

Turn ideas into fully formed designs and specs through natural collaborative dialogue. Use when planning new features, designing architecture, or making significant changes to the codebase.

Autonomous Testing Agent

Analyze existing repositories, maintain structure, setup guardrails and best practices

Web Performance Detective

Self-hosted auth for TypeScript/Cloudflare Workers with social auth, 2FA, passkeys, organizations, RBAC, and 15+ plugins. Requires Drizzle ORM or Kysely for D1 (no direct adapter). Self-hosted alternative to Clerk/Auth.js. Use when: self-hosting auth on D1, building OAuth provider, multi-tenant SaaS, or troubleshooting D1 adapter errors, session caching, rate limits, Expo crashes, additionalFields bugs.

Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag & drop conflicts, and CSS transform bugs. Use when: animating lists/accordions/toasts, troubleshooting SSR animation errors, React 19 StrictMode issues, or need accessible drop-in transitions with auto prefers-reduced-motion.

Build React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool approval workflows, and 18 UI error solutions. Prevents documented issues with React Strict Mode, concurrent requests, stale closures, and tool approval edge cases. Use when: implementing AI chat UIs, migrating v5→v6, troubleshooting "useChat failed to parse stream", "stale body values", "React maximum update depth", "Cannot read properties of undefined (reading 'state')", or tool approval workflow errors.

Add bot protection with Turnstile (CAPTCHA alternative). Use when: protecting forms, securing login/signup, preventing spam, migrating from reCAPTCHA, integrating with React/Next.js/Hono, implementing E2E tests, or debugging CSP errors, token validation failures, Chrome/Edge first-load issues, multiple widget rendering bugs, timeout-or-duplicate errors, or error codes 100*/106010/300*/600*.

Set up Cloudflare Workers with Hono routing, Vite plugin, and Static Assets. Prevents 10 errors including export syntax, routing conflicts, Vite 8 nodejs_compat, base option regression, and cache corruption. Use when: creating Workers projects, configuring Hono/Vite, or troubleshooting export syntax, API route conflicts, HMR issues, or Vite 8+ compatibility.

Build browser automation and web scraping with Playwright on your local machine. Prevents 10 documented errors including CI timeout hangs, extension testing failures, and Ubuntu compatibility issues. Includes stealth mode for anti-bot bypass, authenticated sessions, infinite scroll handling, screenshot/PDF generation, and v1.57 Speedboard performance analysis. Use when: automating browsers, scraping protected sites, testing with real IPs, bypassing bot detection, generating screenshots/PDFs, or troubleshooting "target closed", "page.pause() hangs CI", "permission prompts block tests", or "Ubuntu 25.10 installation" errors.

Expert TypeScript documentation specialist creating comprehensive technical documentation for TypeScript projects. Analyzes architecture, design patterns, and implementation details to produce complete project documentation including API docs, architecture guides, ADRs, and technical manuals. Use PROACTIVELY for system documentation, architecture guides, API documentation, and technical deep-dives.

Expert security auditor specializing in TypeScript/Node.js application security, DevSecOps, and comprehensive cybersecurity. Masters vulnerability assessment, threat modeling, secure authentication (JWT/OAuth2), OWASP standards, and TypeScript-specific security patterns. Handles security for Express, NestJS, Next.js, and Node.js applications. Use PROACTIVELY for TypeScript security audits, DevSecOps, or compliance implementation.

Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

Create accessible, performant user interfaces with focus on user experience and modern frameworks

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js.

Apply modern mobile development toolchain patterns: Expo (default), React Native, Tauri for iOS/Android apps. Use when building mobile applications, choosing cross-platform frameworks, or discussing mobile architecture.

Use this agent when adding LLM-as-Judge verification sections to implementation steps in task files. Produces structured per-step evaluation specifications (rubrics, checklists with default quality items, scoring metadata) — Hard Rules + TICK decomposition, principles extraction, RRD refinement, and self-verification.

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Use before writing any type of tests. Distills 14 industry sources into deterministic decision gates, schemas, and worked test examples.

Guidelines for web development projects using JavaScript/TypeScript frameworks. Activate when working with web projects, package.json, npm/yarn/pnpm, React, Next.js, Vue, Angular, Svelte, or other web frameworks, frontend components, or Node.js applications.

Search existing components before creating new ones. When a new component is unavoidable, design it for future reuse with proper props, composition, and placement in shared directories. Use when building UI, creating React/Vue/Svelte/Angular/SwiftUI components, adding buttons/forms/cards/modals/tables, scaffolding pages, or any time the user says "create a component", "add a component", "build a UI", or mentions component-like work.

Apply modern browser extension toolchain patterns: WXT (default), Plasmo, CRXJS for Chrome/Firefox/Safari extensions. Use when building browser extensions, choosing extension frameworks, or discussing manifest v3 patterns.