CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

phoenix-frontend

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

Quality

86%

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

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

A lean, well-structured composable-rules skill: the body is pure project-specific guidance with no filler, and it routes detail to real, well-signaled one-level-deep reference files. It could be slightly more actionable with a few concrete code/command examples, and a couple of rule sections would benefit from clearer applicability gating.

DimensionReasoningScore

Conciseness

The ~40-line body contains only project-specific rules ('use useAgentDataChangeFetchKey from @phoenix/hooks', 'update the route's handle.agentRoute metadata in js/app/src/Routes.tsx') with zero explanation of concepts Claude already knows and no padding. Every token earns its place.

5 / 5

Actionability

Concrete, executable guidance with named APIs, hooks, and exact file paths, but no copy-paste code or command examples — the anchor-5 level expects commands/examples covering common cases. Per the scoring notes the absence of code in an instruction-only skill is not penalized per se, so this sits above anchor 3's incomplete/pseudocode level but below anchor 5.

4 / 5

Workflow Clarity

A clear light sequence exists: explore 'js/app/src/components/ and js/app/package.json' first, apply the rules, then verify ('After visual changes, use the available browser tooling to verify the UI looks correct'). Verification checkpoints are present and no destructive/batch operations are involved, but a few rule sections lack explicit gating on when they apply, leaving minor gaps versus anchor 5.

4 / 5

Progressive Disclosure

Verified against the actual bundle: the reference table lists all six real references/ files with explicit 'When to read' conditions, references are exactly one level deep (relay.md cross-links testing.md; resize-svg-logo-assets.md points to the real scripts/scale-svg.py), and detailed content is appropriately split out. This matches the clear-overview, well-signaled, one-level-deep pattern of anchor 5.

5 / 5

Total

18

/

20

Passed

Description

83%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 that clearly states what it provides and gives explicit, natural-language triggers, plus useful boundary routing to a sibling design skill. Its only weaknesses are minor: slightly generic action verbs, a few missing synonyms/extensions, and a broad 'any frontend task' claim.

DimensionReasoningScore

Specificity

Names the domain and several concrete task types — 'new components, UI changes, styling, accessibility fixes, form handling, or component refactoring' — with only minor gaps in capability coverage. It is trigger-rich rather than comprehensively enumerating what the guidelines cover, so it falls just below anchor 5.

4 / 5

Completeness

Explicitly answers both: what ('Frontend development guidelines for the Phoenix AI observability platform') and when ('Use when writing, reviewing, or modifying React components... Triggers on any frontend task — ... Also use when the user asks about frontend conventions'). Both are concrete and match the anchor-5 example pattern.

5 / 5

Trigger Term Quality

Good coverage of natural phrases users would say ('React components', 'styling', 'accessibility fixes', 'form handling', 'component refactoring', 'frontend conventions'), but common variations like file extensions (.tsx, .css) or 'CSS' are missing. Not the generic one-or-two-keyword case of anchor 3, but short of the comprehensive synonym/extension coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

Scoped to a named project and directory (js/app/), and it actively disambiguates the closest sibling ('For design system rules (error display, layout, dialogs, tokens), use the phoenix-design skill'). The broad phrase 'Triggers on any frontend task' leaves minor overlap risk with other frontend-related skills, keeping it just below anchor 5.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

Repository

Arize-ai/phoenix

Path

.agents/skills/phoenix-frontend/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.