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.

70

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

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.

The body is an efficient, well-structured overview that points to real one-level-deep reference files with clear triggers and includes verification and route-metadata guidance. Adding a short inline example for the common component or URL-state patterns would push actionability toward the top of the scale.

Suggestions

Add a brief inline code or markup snippet illustrating the route handle.agentRoute metadata shape so the rule is copy-paste ready.

Show a one-line example of encoding view state into route/search params (e.g. `?tab=...`) to make the URL State section more actionable.

Optionally note when to consult references/components.md vs relay.md in the same row-based table for cross-cutting tasks to remove minor navigation ambiguity.

DimensionReasoningScore

Conciseness

Lean and efficient body (~30 lines) that assumes Claude's competence; it never explains libraries or basic concepts and every line gives a directive or pointer.

5 / 5

Actionability

Concrete guidance with specific paths and tools ('explore `js/app/src/components/` and `js/app/package.json`', 'update the route's `handle.agentRoute` metadata in `js/app/src/Routes.tsx`', 'use `agent-browser` to verify'), but no inline code examples for the rule patterns.

4 / 5

Workflow Clarity

The rules are clearly organized with a 'Verification' checkpoint, and the skill is a rule-set rather than a destructive batch workflow so the simple-skill exception applies; it lacks an explicit multi-step validated sequence, keeping it just below 5.

4 / 5

Progressive Disclosure

A clean reference table pairs each of the five existing bundle files with a 'When to read' condition, all references are one level deep and well-signaled, and the body stays a concise overview.

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

The description is well-crafted: it states concrete capabilities, provides explicit and varied trigger phrases, and clearly scopes itself to a specific directory while delegating design-system concerns to another skill. Minor gaps in synonym/file-extension coverage keep trigger quality and specificity just below ceiling.

DimensionReasoningScore

Specificity

Lists several concrete actions ('writing, reviewing, or modifying React components, TypeScript code, styles, or UI features' plus 'new components, UI changes, styling, accessibility fixes, form handling, or component refactoring') with only minor coverage gaps (no mention of testing actions).

4 / 5

Completeness

Explicitly answers both what ('Frontend development guidelines for the Phoenix AI observability platform') and when ('Use when writing, reviewing, or modifying...', '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 trigger coverage ('any frontend task', 'new components, UI changes, styling, accessibility fixes, form handling, or component refactoring', 'frontend conventions or component patterns'), though it omits common synonyms like '.tsx' or 'CSS'.

4 / 5

Distinctiveness Conflict Risk

Scoped to a specific directory and platform ('js/app/', Phoenix) and explicitly redirects design-system work to a sibling skill ('use the phoenix-design skill'), giving it a clear niche with minimal conflict risk.

5 / 5

Total

18

/

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.