opik-frontend

React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.

Quality

77%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/opik-frontend/SKILL.md

Quality

Content

80%

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

A dense, highly actionable React patterns body that assumes Claude's competence and scores well on conciseness and actionability; it is held back by a missing validate->fix->retry loop for the import workflow and by a Reference Files section whose linked files are absent from the bundle.

Suggestions

Add an explicit feedback loop after 'npm run deps:validate' (e.g. 'if it reports violations, fix the offending imports and re-run until clean') so the import-change workflow reaches a level-3 validation checkpoint.

Either create the referenced files under references/ (forms.md, ui-components.md, etc.) or remove the dead links from the Reference Files section so navigation is not broken.

If the inline gotchas (performance/memoization, forms) are meant to live in the missing reference files, move that detail out of SKILL.md to keep the overview genuinely shallow.

Dimension	Reasoning	Score
Conciseness	The body assumes Claude's React/library knowledge (no 'what is useQuery' exposition) and packs dense BAD/GOOD patterns; the only extended prose (the Google Translate gotcha) conveys genuinely non-obvious knowledge with a ref, so every token earns its place — matching the level-3 'lean and efficient' anchor.	3 / 3
Actionability	It provides fully executable, copy-paste-ready snippets (useQuery/useMutation, useMemo/useCallback, Zustand selectors, component skeleton) plus concrete commands like 'npm run deps:validate', matching the level-3 'fully executable code/commands; copy-paste ready' anchor.	3 / 3
Workflow Clarity	Sequencing exists (the numbered component structure and the 'after modifying imports: npm run deps:validate' checkpoint), but the one risky multi-step operation (import changes -> deps:validate) has no error-recovery feedback loop, so it sits at level-2 'steps listed but validation gaps' rather than the level-3 validate->fix->retry pattern.	2 / 3
Progressive Disclosure	A 'Reference Files' section signals seven one-level-deep links with one-line descriptions, but the referenced files (forms.md, ui-components.md, responsive-design.md, testing.md, code-quality.md, performance.md, permissions.md) do not exist — no references/ bundle is present — so the well-signaled structure leads to broken navigation and the disclosure is aspirational rather than real.	2 / 3
	Total	10 / 12 Passed

Description

75%

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 tight, well-scoped description with an explicit 'Use when' trigger and a distinct path-based niche; it scores full marks on completeness and distinctiveness but is weaker on naming concrete actions and broad trigger-term coverage.

Suggestions

Replace the vague 'patterns' with concrete verbs, e.g. 'Build and refactor React components, manage state, and structure data fetching in apps/opik-frontend.'

Broaden trigger terms to phrasings users actually say, e.g. add 'React UI work, Opik frontend components, TanStack Query/Zustand changes'.

Dimension	Reasoning	Score
Specificity	The phrase 'React frontend patterns' names the domain and the trailing 'on components, state, or data fetching' lists sub-areas, but it does not enumerate multiple concrete actions (cf. 'Extract text... fill forms... merge documents'), so it lands at 'names domain and some actions, but not comprehensive' rather than the multi-action level 3.	2 / 3
Completeness	It answers both what ('React frontend patterns for Opik') and when with an explicit 'Use when working in apps/opik-frontend...' clause, matching the level-3 anchor; the 'Use when' presence means completeness is not capped at 2.	3 / 3
Trigger Term Quality	Natural developer terms appear ('components, state, or data fetching') plus a path trigger ('apps/opik-frontend'), but coverage of common phrasings is thin compared to the level-3 anchor that lists several variants a user might say; it has 'some relevant keywords but missing common variations'.	2 / 3
Distinctiveness Conflict Risk	Scoping to the single path 'apps/opik-frontend' and the Opik product gives it a clear niche unlikely to trigger for unrelated skills, matching the level-3 'clear niche with distinct triggers'.	3 / 3
	Total	10 / 12 Passed

Validation

93%

Warnings & errors only

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

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 7 missing	Warning

	Total	15 / 16 Passed

Repository: comet-ml/opik
Path: .agents/skills/opik-frontend/SKILL.md
Commit: aae4650

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.