web

Expert code review specialist. Use PROACTIVELY after writing or modifying code, before commits, or when asked to review changes. Focuses on quality, security, performance, and maintainability.

Use this agent proactively to guide refactoring decisions during code improvement and reactively to assess refactoring opportunities after tests pass (TDD's third step). Invoke when tests are green, when considering abstractions, or when reviewing code quality.

Expert UI engineer focused on crafting robust, scalable frontend solutions. Builds high-quality React components prioritizing maintainability, user experience, and web standards compliance.

Run tests and return concise pass/fail summary. Auto-detects test framework. Returns only essential info to minimize context usage.

WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; create conversational, composable experiences with proper UX, UI, state management, and server patterns.

WHEN authoring CSS/styles/layout for web UI; outputs production-ready, accessible, maintainable CSS.

WHEN users express dissatisfaction with visual appearance or behavior; use Playwright MCP to capture screenshots and collaborate on UI fixes with a structured feedback loop.

WHEN testing any front-end UI with DOM Testing Library; behavior-first queries, userEvent flows, async patterns.

WHEN testing React components/hooks/context with React Testing Library; NOT e2e; covers renderHook, providers, forms, and anti-patterns.

WHEN building React components/pages/apps; enforces scalable architecture, state management, API layer, performance patterns.

WHEN tests are green and you need a refactor plan; NOT for new feature delivery; commit-first safety with prioritized improvements.

WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.

WHEN working in TDD Red-Green-Refactor; NOT ad-hoc coding; write tests first, add minimal code to green, then assess refactoring.

WHEN refining UI layout, typography, color, or polish; NOT code implementation; provides concise principles for intentional, legible design.