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

69

Quality

86%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

72%

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

This is a well-structured, concise hub skill that effectively delegates to specialized rule files and avoids over-explaining concepts Claude already knows. Its main weakness is the lack of concrete, executable examples — particularly for the route metadata pattern and URL state encoding — which would make the guidance more immediately actionable. The workflow could also benefit from explicit sequencing and validation steps.

Suggestions

Add a concrete code example of a `handle.agentRoute` metadata object in Routes.tsx to make the route metadata section copy-paste ready.

Add a brief example of URL state encoding (e.g., a tab selection encoded in search params) to make the URL State section more actionable.

Consider adding an explicit numbered workflow (e.g., 1. Explore existing patterns → 2. Read relevant rule files → 3. Implement → 4. Verify with agent-browser → 5. Update route metadata if applicable) to improve workflow clarity.

DimensionReasoningScore

Conciseness

Every section is lean and purposeful. No unnecessary explanations of what React, TypeScript, or Relay are. The routing metadata section gives just enough detail (field names + descriptions) without over-explaining. The content assumes Claude's competence throughout.

3 / 3

Actionability

The skill provides clear directives (explore directories, read rule files, use agent-browser, update handle.agentRoute) but lacks concrete code examples — e.g., no example of a `handle.agentRoute` metadata object, no sample component pattern. The guidance is specific in intent but not copy-paste ready.

2 / 3

Workflow Clarity

There is a reasonable implicit workflow: explore existing patterns → read relevant rule files → implement → verify with agent-browser → update route metadata if needed. However, the sequence is not explicitly laid out as ordered steps, and there are no validation checkpoints or feedback loops for catching errors during component development.

2 / 3

Progressive Disclosure

The skill is an excellent overview that delegates detailed guidance to clearly signaled, one-level-deep rule files via a well-organized table. Each rule file has a clear 'when to read' trigger. The structure is easy to navigate and appropriately splits content. Note: bundle files were not provided, but the referencing pattern itself is exemplary.

3 / 3

Total

10

/

12

Passed

Description

100%

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

This is a strong, well-crafted skill description that excels across all dimensions. It provides specific concrete actions, abundant natural trigger terms, explicit 'Use when' and 'Triggers on' clauses, and clear boundary delineation with the related phoenix-design skill. The scoping to a specific project directory and technology stack makes it highly distinctive.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: writing/reviewing/modifying React components, TypeScript code, styles, UI features, new components, UI changes, styling, accessibility fixes, form handling, component refactoring. Also specifies the directory (app/) and the project (Phoenix AI observability platform).

3 / 3

Completeness

Clearly answers both 'what' (frontend development guidelines for Phoenix AI observability platform) and 'when' (explicit 'Use when' clause covering writing/reviewing/modifying React components, plus 'Triggers on' clause listing specific scenarios, plus 'Also use when' for conventions questions). Additionally includes a boundary clarification directing design system tasks to another skill.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'React components', 'TypeScript code', 'styles', 'UI features', 'frontend', 'new components', 'UI changes', 'styling', 'accessibility fixes', 'form handling', 'component refactoring', 'frontend conventions', 'component patterns'. These are all terms a developer would naturally use.

3 / 3

Distinctiveness Conflict Risk

Clearly scoped to frontend work in the app/ directory of a specific project (Phoenix AI observability platform), and explicitly delineates its boundary from the phoenix-design skill for design system rules. This makes it highly distinguishable and unlikely to conflict with other skills.

3 / 3

Total

12

/

12

Passed

Validation

81%

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

Validation9 / 11 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

9

/

11

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.