Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

phoenix-design

Étoiles10 354

Forks950

Mis à jour19 juin 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

Arize-ai

Arize-ai/phoenix

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·SOC 15-1255

Explorateur de fichiers

8 fichiers

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`

Plus depuis ce dépôt

même dépôt

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`