Skill12k repo starsupdated 4d ago

phoenix-design

The phoenix-design Claude Code skill provides design system conventions for the Phoenix frontend, covering layout stability, dialog patterns, error display, BEM CSS naming, design tokens, icon selection, and counter display. Use it when building UI components, naming CSS classes, creating design tokens, handling error states, designing dialog interactions, or selecting icons within the Phoenix app/src/ directory.

View source Repository: phoenix

Install in Claude Code

Copy

git clone --depth 1 https://github.com/Arize-ai/phoenix /tmp/phoenix-design && cp -r /tmp/phoenix-design/.agents/skills/phoenix-design ~/.claude/skills/phoenix-design

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# 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` |

More from this repository

agent-browserSkill

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

annotate-spansSkill

arize-phoenixSkill

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