Run any Skill in Manus with one click

phoenix-design

Stars10,354

Forks950

UpdatedJune 19, 2026 at 23:50

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/.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Arize-ai

Arize-ai/phoenix

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

8 files

SKILL.md

readonly

name	phoenix-design
description	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/.
license	Apache-2.0
metadata	{"author":"oss@arize.com","version":"2.0.0","internal":true}

Phoenix Design System

The keywords "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in this specification are to be interpreted as described in BCP 14 [RFC2119] [RFC8174] when, and only when, they appear in all capitals, as shown here.

What Are You Doing?

Read the relevant reference(s) based on the task:

Task	Reference
Layout stability, scroll behavior, interaction patterns	`references/layout.md`
Alert and form dialog usage, footer button styling, content writing	`references/dialogs.md`
Error scoping, inline alerts, input validation	`references/error-display.md`
Naming CSS classes	`references/bem.md`
Creating or consuming CSS design tokens	`references/tokens.md`
Picking an icon for a noun (project, trace, span, file, etc.)	`references/icons.md`
Displaying counts in tabs, headings, or filter buttons	`references/counters.md`

More from this repository

same repository

arize-phoenix

Arize-ai/phoenix

Open-source AI observability platform for tracing, evaluating, and improving LLM applications with OpenTelemetry integration

2026-06-3010.4k

phoenix-evals

Arize-ai/phoenix

Build and run evaluators for AI/LLM applications using Phoenix.

2026-06-3010.4k

phoenix-frontend

Arize-ai/phoenix

Frontend development guidelines for the Phoenix AI observability platform. Use when writing, reviewing, or modifying React components, TypeScript code, styles, or UI features in the app/ directory. Triggers on any frontend task — new components, UI changes, styling, accessibility fixes, form handling, or component refactoring. Also use when the user asks about frontend conventions or component patterns for this project. For design system rules (error display, layout, dialogs, tokens), use the phoenix-design skill.

2026-06-1910.4k

phoenix-playwright-tests

Arize-ai/phoenix

Write Playwright E2E tests for the Phoenix AI observability platform. Use when creating, updating, or debugging Playwright tests, or when the user asks about testing UI features, writing E2E tests, or automating browser interactions for Phoenix.

2026-06-1910.4k

phoenix-tracing

Arize-ai/phoenix

OpenInference semantic conventions and instrumentation for Phoenix AI observability. Use when implementing LLM tracing, creating custom spans, or deploying to production.

2026-06-1910.4k

phoenix-client-development

Arize-ai/phoenix

Development guide for the @arizeai/phoenix-client TypeScript SDK — run and resume experiments, manage OpenTelemetry tracer providers with stack-based attach/detach, and write vitest unit and integration tests. Use when adding features to phoenix-client, debugging experiment lifecycle or provider cleanup, modifying dataset/prompt/session/span APIs, or writing tests for the js/packages/phoenix-client/ directory.

2026-06-1910.4k

name	phoenix-design
description	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/.
license	Apache-2.0
metadata	{"author":"oss@arize.com","version":"2.0.0","internal":true}

Phoenix Design System

What Are You Doing?

Read the relevant reference(s) based on the task:

Task	Reference
Layout stability, scroll behavior, interaction patterns	`references/layout.md`
Alert and form dialog usage, footer button styling, content writing	`references/dialogs.md`
Error scoping, inline alerts, input validation	`references/error-display.md`
Naming CSS classes	`references/bem.md`
Creating or consuming CSS design tokens	`references/tokens.md`
Picking an icon for a noun (project, trace, span, file, etc.)	`references/icons.md`
Displaying counts in tabs, headings, or filter buttons	`references/counters.md`