opik-frontend

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

Quality

64%

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

72%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 content is lean, well-organized, and packed with actionable code patterns and project-specific gotchas, but it is weakened by missing bundle files referenced in the Reference Files section and the absence of any validation feedback loop.

Suggestions

Ship the seven referenced files (forms.md, ui-components.md, responsive-design.md, testing.md, code-quality.md, performance.md, permissions.md) or remove the dead links, since following them yields nothing.

Add a short validate→fix→retry loop around 'npm run deps:validate' so import changes have an explicit error-recovery path.

Replace placeholder identifiers (fetchEntity, ENTITY_KEY, updateEntity) with minimal concrete definitions so query/mutation snippets are copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is lean — bullet lists and ❌/✅ code blocks with minimal prose, assuming Claude knows React/TanStack/Zod; even the longer Google Translate section earns its tokens by explaining a non-obvious, project-specific crash.	5 / 5
Actionability	Concrete, executable TypeScript examples cover the common cases (useQuery, useMutation with invalidation, useMemo/useCallback, Zustand selectors), but several snippets rely on placeholders like fetchEntity/ENTITY_KEY and the component structure is an illustrative skeleton.	4 / 5
Workflow Clarity	A numbered component-structure sequence and the 'After modifying imports: npm run deps:validate' checkpoint exist, but this is a patterns reference rather than a multi-step process, with no validate→fix→retry feedback loop.	3 / 5
Progressive Disclosure	The body is well-sectioned and the 'Reference Files' list is clearly signaled with one-line descriptions, but all seven referenced files (forms.md, ui-components.md, etc.) are absent from the bundle, so the disclosure path leads nowhere.	3 / 5
	Total	15 / 20 Passed

Description

57%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-structured with an explicit 'Use when' clause and a strong directory-based distinguisher, but it is held back by a vague 'what' ('patterns') and limited trigger-term coverage.

Suggestions

Replace the generic 'React frontend patterns' with concrete actions, e.g. 'Build and refactor Opik frontend components, manage state, and fetch data using TanStack Query'.

Broaden trigger terms to include natural phrases users say, such as 'hooks', 'forms', 'UI components', 'TanStack', or 'Zustand'.

Tighten the 'what' so it reads as capabilities rather than a single noun, mirroring the 'Extract text and tables... fill forms... merge documents' style.

Dimension	Reasoning	Score
Specificity	The phrase 'React frontend patterns for Opik' names a specific domain but lists no concrete actions — 'patterns' is generic, and 'components, state, or data fetching' describe trigger contexts rather than verbs.	2 / 5
Completeness	It has both a 'what' ('React frontend patterns for Opik') and an explicit 'Use when...' clause with concrete triggers, but the 'what' is generic ('patterns') rather than listing concrete capabilities.	4 / 5
Trigger Term Quality	'components, state, or data fetching' plus 'apps/opik-frontend' are relevant keywords a user might say, but coverage is limited to three areas and omits common variations like hooks, forms, UI, or TanStack.	3 / 5
Distinctiveness Conflict Risk	Binding the trigger to 'apps/opik-frontend' and 'Opik' makes it mostly distinct, but 'components, state, or data fetching' is generic React territory with minor overlap risk against a general frontend skill.	4 / 5
	Total	13 / 20 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: 50de943

Reviewed: 2 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.