phoenix-frontend
Phoenix Frontend Development skill provides guidelines for building React components and TypeScript code within the Phoenix AI observability platform's app directory. Use this skill when creating or refactoring components, handling forms, implementing accessibility fixes, managing styling, or asking about frontend conventions and component patterns. Consult specialized rule files for Relay usage, accessibility requirements, test IDs, and SVG logo assets. Always verify visual changes with browser testing and update route metadata when page content materially changes.
git clone --depth 1 https://github.com/Arize-ai/phoenix /tmp/phoenix-frontend && cp -r /tmp/phoenix-frontend/.agents/skills/phoenix-frontend ~/.claude/skills/phoenix-frontendSKILL.md
# Phoenix Frontend Development Composable rules for building UI in the Phoenix app. Before starting work, explore `app/src/components/` and `app/package.json` to understand existing patterns, packages, and conventions — then follow these rules. ## Rule Files Read the relevant file(s) based on the task: | Rule file | When to read | |-----------|-------------| | `rules/components.md` | Creating, composing, or refactoring components | | `rules/relay.md` | Using Relay | | `rules/accessibility.md` | Any interactive element, form, overlay, or semantic markup | | `rules/test-ids.md` | Adding or changing `data-testid` attributes for E2E tests | | `rules/resize-svg-logo-assets.md` | Adding or updating provider/integration logo icons | ## Verification After visual changes, use `agent-browser` to verify the UI looks correct. When modifying a shared component, check its usages across the app. ## Route Metadata When adding, removing, renaming, or materially changing what a page contains, update the route's `handle.agentRoute` metadata in `app/src/Routes.tsx` if an assistant agent should be able to link users to that destination. Keep metadata small and search-oriented: - `label`: human page name. - `description`: concise page purpose based on what the page now contains, including user phrases PXI might hear when looking for that page. If a content change makes an existing route easier or harder to find by natural language, adjust `description` in the same change. ## URL State Significant view state must be recreatable from the URL. If a user can select a tab, sub-view, or detail state that should survive reloads, sharing, or adjacent-record pagination, encode it in route params or search params and preserve the relevant URL state during navigation.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
Build and maintain documentation sites with Mintlify. Use when
Debug LLM applications using the Phoenix CLI. Fetch traces, analyze errors, structure trace review with open coding and axial coding, inspect datasets, review experiments, query annotation configs, and use the GraphQL API. Use whenever the user is analyzing traces or spans, investigating LLM/agent failures, deciding what to do after instrumenting an app, building failure taxonomies, choosing what evals to write, or asking "what's going wrong", "what kinds of mistakes", or "where do I focus" — even without naming a technique.
Design system conventions for the Phoenix frontend — layout, dialogs, error display, BEM CSS class naming, and CSS design tokens. Use when building UI, naming CSS classes, creating or consuming tokens, handling errors, or designing dialog interactions in app/src/.
>
>-
Build and run evaluators for AI/LLM applications using Phoenix.
Manage GitHub issues, labels, and project boards for the Arize-ai/phoenix repository. Use when filing roadmap issues, triaging bugs, applying labels, managing the Phoenix roadmap project board, or querying issue/project state via the GitHub CLI.