skills.rest
Arize-ai
Arize-aiOFFICIAL
Explore all skills by this author →
Website𝕏@arizeaiGitHub

phoenix-frontend

Enforces React, TypeScript, and Relay conventions for Phoenix frontend development.

11.3k|1.1k|Updated Nov 9, 2022
Search Tags:#svg#Frontend#typeScript#component-patterns# accessibility#Relay#reAct
One-click install
npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phoenix-frontend
Source: https://github.com/Arize-ai/phoenix/tree/main/.agents/skills/phoenix-frontend
Command: npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires svgpathtools, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend work in the Phoenix app requires following many project-specific conventions — component layering, Relay data-fetching rules, accessibility standards, overlay selection, and test ID naming — that are easy to get wrong without guidance.

Core Features & Use Cases

  • Component Guidelines: Rules for core vs. domain components, React Compiler memoization, ref handling, callback prop naming, and Storybook stories.
  • Data Fetching Rules: Relay store retention semantics, when to use usePreloadedQuery vs. fetchQuery, and single-entity fetching via the node root field.
  • Accessibility & Testing Standards: WCAG 2.1 AA requirements, semantic markup rules, and stable data-testid naming conventions for E2E tests.
  • SVG Logo Workflow: A deterministic script and step-by-step process for resizing and inserting provider/integration logo icons.
  • Use Case: When adding a new settings page with a form, use this Skill to pick the right overlay component, follow accessibility rules, name test IDs correctly, and update route metadata.

Quick Start

Use the phoenix-frontend skill to create a new React component in js/app that follows the project's component, accessibility, and Relay conventions.

Frequently Asked Questions about phoenix-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new React component in the Phoenix app?▼

Compose new features from existing core primitives in js/app/src/components/core/ before creating low-level UI. Core components must not contain data fetching, and new core components need minimal Storybook stories showing primary variants.

When should I use fetchQuery vs usePreloadedQuery in Relay?▼

Use declarative hooks like usePreloadedQuery or useLazyLoadQuery for data rendered on a page, since they retain data in the Relay store. fetchQuery lacks retention guarantees and is only safe for one-shot actions like redirects.

Should I use useMemo or useCallback in Phoenix React code?▼

No. React Compiler is enabled and handles memoization automatically, so useMemo, useCallback, and React.memo must not be used. Define callback props inline without wrapping them.

What is the difference between Drawer and Modal components?▼

Drawer is a non-modal right-side panel for list-detail flows where the list stays visible behind it. Modal blocks page interaction and is used for confirmations, forms, and focused workflows requiring full attention.

How do I name data-testid attributes for E2E tests?▼

Use kebab-case with the pattern scope-subject-role, such as create-dataset-button. Keep the testid constant for the element's lifetime and expose state through separate data-* attributes like data-mode.

How do I add a new provider logo icon to the Phoenix frontend?▼

Run the bundled scale-svg.py script with svgpathtools to resize the SVG to 24x24 for providers or 32x32 for integrations, convert it to JSX attribute conventions, and insert it into GenerativeProviderIcon.tsx or IntegrationIcons.tsx.

Related Skills

Explore More Software Engineering Skills→
radenadriradenadri

codebase-conformity

Inspect existing patterns before writing new code in a codebase.

Community
Advanced
FoxSilouFoxSilou

frontend-testing

Automate Blazor/MAUI UI validation with bUnit and Playwright tests.

Community
Advanced
cgRGMcgRGM
1

resend-design-system

Guide UI implementation using Resend design tokens and component patterns.

Community
Intermediate
nxy7nxy7

document

Generate inline docs, API references, and user guides from code analysis.

Community
Basic