phoenix-design

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

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary progressive-disclosure router: a lean overview table dispatches to eight real, one-level-deep reference files by task. It is held back only by a mildly unnecessary RFC boilerplate preamble and the absence of any inline example or post-routing guidance.

Suggestions

Trim or move the BCP 14 / RFC2119 keyword-interpretation paragraph into the reference files that actually use MUST/SHOULD wording, since Claude already understands these keywords.

Add a one-line note on how to proceed when multiple references apply (e.g. read several in sequence) or what to do after consulting a reference, to strengthen workflow clarity.

Include one short inline example (e.g. a token definition snippet or a BEM class example) so the overview is actionable without always requiring a file read.

Dimension	Reasoning	Score
Conciseness	The body is a lean routing table that assumes Claude's competence, but the BCP 14 / RFC2119 keyword-interpretation preamble is mild over-explanation of a convention Claude already understands, keeping it just below 5.	4 / 5
Actionability	The task→reference table gives concrete, specific file routing ("Read the relevant reference(s) based on the task"), but there is no inline example or command, so it is mostly rather than fully executable guidance.	4 / 5
Workflow Clarity	The single routing step ("Read the relevant reference(s) based on the task") is unambiguous via the table, but the actual workflow is deferred to the referenced files with no guidance on combining multiple references or what to do after reading.	4 / 5
Progressive Disclosure	A clear overview consisting of a well-signaled, one-level-deep task→file routing table; all eight referenced files (layout.md, dialogs.md, error-display.md, bem.md, tokens.md, icons.md, counters.md, empty-states.md) exist and are appropriately split for easy navigation.	5 / 5
	Total	17 / 20 Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-scoped description that clearly answers both what the skill covers and when to use it, with concrete trigger phrases and tight Phoenix-specific scoping. The only minor gap is domain-naming rather than action-verb phrasing and a few missing synonyms.

Dimension	Reasoning	Score
Specificity	Lists several concrete capability areas ("layout, dialogs, error display, BEM CSS class naming, and CSS design tokens") but names domains/topics rather than verb-driven actions, so it falls short of the comprehensive action-list anchor at 5.	4 / 5
Completeness	Explicitly states both what ("Design system conventions for the Phoenix frontend — layout, dialogs, error display, BEM CSS class naming, and CSS design tokens") and when ("Use when building UI, naming CSS classes, creating or consuming tokens, handling errors, or designing dialog interactions in js/app/src/.") with concrete trigger phrases.	5 / 5
Trigger Term Quality	"Use when building UI, naming CSS classes, creating or consuming tokens, handling errors, or designing dialog interactions" gives good natural keyword coverage, but lacks synonyms/file-extension variants that would push it to 5.	4 / 5
Distinctiveness Conflict Risk	Scoped tightly to the Phoenix frontend and js/app/src/ with distinct triggers (BEM naming, design tokens, dialog interactions), giving a clear niche with minimal conflict risk.	5 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_field	'metadata' should map string keys to string values	Warning

	Total	15 / 16 Passed

Repository: Arize-ai/phoenix
Path: .agents/skills/phoenix-design/SKILL.md
Commit: e127482

Reviewed: 6 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.