Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

phoenix-design

Sterne10.354

Forks950

Aktualisiert19. Juni 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

Arize-ai

Arize-ai/phoenix

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

Datei-Explorer

8 Dateien

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`
Choosing or adding an `EmptyStateGraphic` variant (the per-region/topic empty-state graphics)	`references/empty-states.md`

Mehr aus diesem Repository

gleiches 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`
Choosing or adding an `EmptyStateGraphic` variant (the per-region/topic empty-state graphics)	`references/empty-states.md`