CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

72

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

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 well-structured, concise instruction skill that delegates detail to clearly signaled one-level-deep reference files and includes a verification checkpoint. Actionability and workflow checkpoint specificity are the only soft spots.

Suggestions

Tighten the Verification section with a concrete step, e.g. name the browser tool/command and what to check on shared-component usages.

Add a one-line example of encoding view state in route/search params (e.g. ?tab=...) to make the URL State rule directly executable.

Reference scripts/scale-svg.py from the body or the logo-asset reference entry so every bundle file is discoverable from the overview.

DimensionReasoningScore

Conciseness

Lean and rule-dense with no padding or explanation of concepts Claude already knows; every line (explore paths, route metadata fields, URL-state rule) earns its place and assumes competence.

5 / 5

Actionability

Concrete, specific guidance with exact paths and field names (js/app/src/Routes.tsx, handle.agentRoute, label, description), but the Verification section ("use the available browser tooling to verify the UI looks correct") is somewhat vague and URL-state encoding lacks an example.

4 / 5

Workflow Clarity

A clear before/after sequence is present (explore existing patterns first, apply rules, then verify after visual changes and check shared-component usages) with a verification checkpoint; minor gaps as the checkpoint is loosely specified.

4 / 5

Progressive Disclosure

A clear Reference Files table maps each of five real reference files to a specific when-to-read trigger, with one-level-deep references and easy navigation; the inlined rules are appropriately kept in the overview.

5 / 5

Total

18

/

20

Passed

Description

92%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 states capabilities and triggers with concrete natural-language phrases and explicit boundary guidance against a sibling skill. Only minor gap is the absence of file-extension/synonym triggers.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ("writing, reviewing, or modifying React components, TypeScript code, styles, or UI features"; "new components, UI changes, styling, accessibility fixes, form handling, or component refactoring") with comprehensive coverage of the frontend domain.

5 / 5

Completeness

Explicitly answers both what ("Frontend development guidelines for the Phoenix AI observability platform") and when ("Use when...", "Triggers on any frontend task...", "Also use when the user asks about frontend conventions") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural-keyword coverage ("new components", "UI changes", "styling", "accessibility fixes", "form handling", "component refactoring", "frontend conventions"), but missing synonyms and file extensions (e.g. .tsx, JSX, CSS) that the top anchor expects.

4 / 5

Distinctiveness Conflict Risk

Scoped to the Phoenix platform and js/app/ directory with a clear niche, and explicitly defers design-system rules to the phoenix-design skill, minimizing overlap and conflict risk.

5 / 5

Total

19

/

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.

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