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.

74

Quality

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

SKILL.md
Quality
Evals
Security

Quality

Content

87%

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

The body is a concise, well-organized instruction skill that points to real one-level-deep reference files and gives concrete file paths and a verification tool, though it presents rules rather than an explicitly sequenced validation workflow. Progressive disclosure and conciseness are strong; the main gap is workflow sequencing.

Suggestions

Add a short ordered checklist for the highest-risk workflows (e.g., modifying a shared component: locate usages → update → verify with agent-browser) with an explicit validate/re-check step to lift workflow clarity.

For the URL State rule, include one concrete example of encoding tab/sub-view state into route or search params so the guidance is copy-paste ready rather than abstract.

Consider a one-line 'before you start' checklist that sequences the explore-references → apply-rules → verify pattern across the whole skill.

DimensionReasoningScore

Conciseness

Lean body with no concept-explanation fluff; it assumes Claude's competence ('explore app/src/components/ and app/package.json … then follow these rules') and every line earns its place, matching the 'lean and efficient' anchor.

3 / 3

Actionability

Concrete, executable pointers throughout — specific file paths ('app/src/Routes.tsx'), the agentRoute handle field, label/description metadata, and the 'agent-browser' verification tool — meeting the actionable-guidance bar for an instruction-only skill where code absence is not penalized.

3 / 3

Workflow Clarity

A verification checkpoint exists ('After visual changes, use agent-browser … check its usages'), but the route-metadata and URL-state sections are rule guidance rather than a sequenced multi-step workflow with explicit validation, so it sits at the 'steps present but checkpoints implicit' level rather than a clear sequenced flow.

2 / 3

Progressive Disclosure

Clear overview plus a well-signaled reference table where all five referenced files (components.md, relay.md, accessibility.md, test-ids.md, resize-svg-logo-assets.md) exist and are exactly one level deep, matching the 'clear overview with well-signaled one-level-deep references' anchor.

3 / 3

Total

11

/

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.

The description is specific, well-triggered, and complete, naming concrete frontend actions and explicit 'Use when' conditions while scoping itself to the Phoenix app and deferring design-system rules to another skill. It is concise without fluff and clearly distinct from sibling skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'writing, reviewing, or modifying React components, TypeScript code, styles, or UI features' and 'new components, UI changes, styling, accessibility fixes, form handling, or component refactoring' — matching the 'multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly answers both what (frontend development guidelines for Phoenix) and when ('Use when writing, reviewing, or modifying…', 'Triggers on any frontend task', 'Also use when the user asks about frontend conventions'), satisfying the explicit-trigger anchor.

3 / 3

Trigger Term Quality

Natural user-facing terms are well covered ('frontend task', 'new components', 'UI changes', 'styling', 'accessibility fixes', 'form handling', 'component refactoring', 'frontend conventions or component patterns'), matching the 'good coverage' anchor.

3 / 3

Distinctiveness Conflict Risk

Scoped to the Phoenix app/ directory and explicitly redirects overlapping design-system concerns to a sibling skill ('For design system rules … use the phoenix-design skill'), giving a clear niche unlikely to conflict.

3 / 3

Total

12

/

12

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.