CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

71

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

88%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.

The body is an exemplary progressive-disclosure index: concise, fully actionable, and perfectly matched to a bundle of eight real reference files. The only defects are minor: an unnecessary RFC 2119 boilerplate paragraph, and two dangling second-level references inside the bundle (`rules/icons.md` and `form-dialogs.md`) that would dead-end a reader following those paths.

Suggestions

Fix the broken second-level references: `references/empty-states.md` should point to `references/icons.md` (not `rules/icons.md`), and `references/dialogs.md` references a `form-dialogs.md` that does not exist in the bundle.

Drop or trim the RFC 2119 keyword-convention paragraph from the body, since no such keywords appear in the body itself and Claude already knows the convention.

Give the `phoenix-storybook` row a concrete pointer (e.g. its skill path) so every row of the routing table resolves unambiguously.

DimensionReasoningScore

Conciseness

The body is a lean task-to-reference routing table with essentially no padding, but the RFC 2119 paragraph ("...are to be interpreted as described in BCP 14 [RFC2119] [RFC8174]...") explains a convention Claude already knows and no such keywords appear in the body itself — a minor instance of over-explanation that keeps it below anchor 5's 'every token earns its place'.

4 / 5

Actionability

As an instruction-only index, every task row maps to a concrete, verifiable target (e.g. "Naming CSS classes" → `references/bem.md`), and all eight referenced files exist in the bundle; per the rubric's code-vs-instruction note, the absence of code is not penalized when guidance is this actionable.

5 / 5

Workflow Clarity

This is a simple, single-purpose skill under 50 lines whose single action — read the reference matching your task — is unambiguous and fully specified by the table, so the simple-skill exception applies; no destructive or batch operations exist that would require validation checkpoints.

5 / 5

Progressive Disclosure

The SKILL.md overview is exemplary: a clear routing table with well-signaled, one-level-deep references, and all eight referenced files exist in `references/`. However, scoring against the actual bundle reveals second-level references, two of them broken: `references/empty-states.md` points to `rules/icons.md` (the mapping actually lives at `references/icons.md`) and `references/dialogs.md` points to a `form-dialogs.md` that does not exist anywhere in the bundle — minor organization gaps that fit anchor 4 rather than anchor 5's clean one-level structure.

4 / 5

Total

18

/

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 description with a clear what-and-when structure, concrete domain areas, natural trigger phrases, and tight project scoping that minimizes conflict risk. The only weaknesses are minor: a few bundle-covered topics and common synonyms (styling, components, icons) are absent from the trigger list.

Suggestions

Extend the capability list to mention icons, counters, and empty-state graphics, which the bundle covers but the description omits.

Add natural trigger synonyms such as "styling", "components", or "icons" to the 'Use when' clause to broaden keyword coverage.

DimensionReasoningScore

Specificity

The description names the domain and five concrete areas ("layout, dialogs, error display, BEM CSS class naming, and CSS design tokens"), which goes well beyond the 1-2 items of anchor 3, but coverage has minor gaps — bundle topics like icons, counters, and empty states are unmentioned, and "conventions" describes states more than actions — so it falls short of anchor 5's comprehensiveness.

4 / 5

Completeness

It explicitly answers both parts: the "what" ("Design system conventions for the Phoenix frontend — layout, dialogs, error display, BEM CSS class naming, and CSS design tokens") and a concrete "Use when..." clause listing five trigger scenarios, matching anchor 5 exactly; anchor 4's weaker 'when' does not apply.

5 / 5

Trigger Term Quality

Triggers like "building UI", "naming CSS classes", "creating or consuming tokens", "handling errors", and "designing dialog interactions" are natural phrases a user would say, matching anchor 4's good coverage; a few natural terms are still missing (e.g. "styling", "components", "icons"), preventing the comprehensive synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

The description is tightly scoped to "the Phoenix frontend" and "js/app/src/" with distinct triggers (BEM naming, design tokens, dialog interactions), giving it a clear niche with minimal conflict risk against generic CSS or UI skills — anchor 5. It is well above anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

18

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

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

Reviewed

Table of Contents

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.