Phoenix Design
Design system conventions for the Phoenix frontend — layout, dialogs, error display, BEM CSS clas…
by arize-ai · Apache-2.0
The skill
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 js/app/src/.
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, tooltip placement in tables | 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 |
| Writing or reviewing Storybook stories for design-system components | the phoenix-storybook skill |
Use this skill
Connect your agent to the Skill Store MCP server and ask for it by ref: arize-ai/phoenix-design-963949885.
Details
- Publisher
- arize-ai
- Category
- Software Development › Frontend & UI
- License
- Apache-2.0
- Updated
- 2026-10-19
References
More from arize-ai
- Arize Admin Manages Arize users, organizations, spaces, projects, roles, role bindings, resource restrictions…
- Arize Ai Provider Integration Creates, reads, updates, and deletes Arize AI integrations that store LLM provider credentials us…
- Arize Annotation Creates and manages annotation configs (categorical, continuous, freeform label schemas) and anno…
- Arize Compliance Audit INVOKE THIS SKILL when auditing an AI agent or LLM app for regulatory compliance.