Analyze, track, and optimize web app performance metrics including INP optimization (< 200ms target), Core Web Vitals, bundle size, runtime performance, and network metrics. Use when measuring performance, debugging slowdowns, optimizing bundles, preventing regressions, or setting performance budgets. Includes INP, LCP, CLS, Islands architecture, Scheduler API, and touch target optimization.
Expert code review specialist. Reviews code for quality, security, and maintainability. Use immediately after writing or modifying code, or when you need thorough code quality assessment.
This skill should be used when testing ScreenGraph end-to-end flows (drift detection, agent runs) while monitoring backend and frontend logs in real-time. Use when the user wants to observe system behavior across services, debug live runs, or verify event streaming.
Optimize web applications to achieve 95%+ Lighthouse scores across all categories. Use when optimizing performance, accessibility, best practices, or SEO for web applications.
React and Next.js performance optimization guidelines. Use when writing, reviewing, or refactoring React/Next.js code. Applies to Blaze (web), Spark (desktop), and Tap (mobile) agents.
Génère un rapport complet de qualité du code incluant les vérifications TypeScript, Biome (lint/format), les tests et la couverture de code. Utilise ce skill quand l'utilisateur demande un rapport de qualité, un audit de code, ou veut vérifier l'état général du projet.
Use this agent when you need to analyze code for performance issues, optimize algorithms, identify bottlenecks, or ensure scalability. This includes reviewing database queries, memory usage, caching strategies, and overall system performance. The agent should be invoked after implementing features or when performance concerns arise.\n\n<example>\nContext: The user has just implemented a new feature that processes user data.\nuser: "I've implemented the user analytics feature. Can you check if it will scale?"\nassistant: "I'll use the performance-oracle agent to analyze the scalability and performance characteristics of your implementation."\n<commentary>\nSince the user is concerned about scalability, use the Task tool to launch the performance-oracle agent to analyze the code for performance issues.\n</commentary>\n</example>\n\n<example>\nContext: The user is experiencing slow API responses.\nuser: "The API endpoint for fetching reports is taking over 2 seconds to respond"\nassistant: "Let me invoke the per
Performance monitoring and regression prevention. Lighthouse CI, performance budgets, Core Web Vitals monitoring, alerting. Keep sites fast over time.
Webpack build optimization expert with deep knowledge of configuration patterns, bundle analysis, code splitting, module federation, performance optimization, and plugin/loader ecosystem. Use PROACTIVELY for any Webpack bundling issues including complex optimizations, build performance, custom plugins/loaders, and modern architecture patterns. If a specialized expert is a better fit, I will recommend switching and stop.
AI agent performs systematic root cause analysis using 5 Whys, Fishbone diagrams, and evidence-based investigation. Use when debugging, conducting post-mortems, or investigating incidents.
A simple test skill that analyzes code files and provides a summary report. Use when asked to analyze code structure, count files, or provide project statistics. Demonstrates Claude Code skill functionality.
Use this skill whenever the user wants to analyze, improve, or enforce performance best practices in a Next.js (App Router) + TypeScript + Tailwind + shadcn/ui project, including bundle size, data fetching, caching, streaming, images, fonts, and client/server boundaries.
Guide for debugging issue on a specific code sections, pattern, or files. Used this skill when user asking for assistant when debugging an issues or explaining a code.
Structured debugging methodology for investigating and resolving technical issues. Use this skill when debugging any technical problem, investigating errors, or troubleshooting unexpected behavior to ensure root cause analysis rather than symptom treatment.
Provides comprehensive code review covering 6 focused aspects - architecture & design, code quality, security & dependencies, performance & scalability, testing coverage, and documentation & API design. Use this skill for deep analysis with actionable feedback after significant code changes.
Expert in React state management including Redux Toolkit, Zustand, Jotai, React Query/TanStack Query, and Context API. Use for state architecture decisions, performance issues, or complex state logic.
Conduct comprehensive research across the codebase to answer questions, explore solutions, or understand existing implementations. Use when researching a problem, designing a new feature that interfaces with existing code, or documenting how something works.
Use when reviewing code for security, performance, or quality issues. Provides checklists and patterns for thorough code review.
Real-time observability dashboard for multi-agent Claude Code sessions. Visualize agent interactions, tool usage, and session flows in real-time through a web dashboard. Track multiple agents running in parallel with swim lane visualization, event filtering, and live charts. **Key Features:** - 🔴 Real-time event streaming via WebSocket - 📊 Agent swim lanes showing parallel execution - 🔍 Event filtering by agent, session, event type - 📈 Live charts for tool usage patterns - 💾 Filesystem-based (no database required) **Inspired by [@indydevdan](https://github.com/indydevdan)**'s work on multi-agent observability. **Our approach:** Filesystem + in-memory streaming vs. indydevdan's SQLite database approach.
