CtrlK
BlogDocsLog inGet started
Tessl Logo

data-client-react

Use @data-client/react hooks for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, DataProvider, AsyncBoundary, useLoading, useDebounce. Use when reading/rendering remote data, triggering mutations, doing optimistic updates, real-time subscriptions, or wiring Suspense/error boundaries in React.

71

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

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 content is a well-structured, highly actionable reference: lean code-first examples, clear hook-selection cues, and clean one-level-deep progressive disclosure to a complete references directory. The main improvement room is light tightening of the closing index and best-practices prose.

Suggestions

Condense the terminal References list or merge it with the inline pointers to reduce redundancy with the per-section references already made above.

Trim the explanatory rationale in the Best Practices bullet on hiding data bindings to a single directive sentence.

Consider a brief hook-selection decision table (need fetch? need Suspense? need live updates?) to make the implicit workflow explicit.

DimensionReasoningScore

Conciseness

The body is predominantly lean, copy-paste code that assumes Claude knows React and avoids explaining basic concepts; held at 4 rather than 5 because the terminal References index and the explanatory Best Practices prose ('Don't hide data bindings inside custom hooks: wrapping them obfuscates...') could be tightened.

4 / 5

Actionability

Provides extensive copy-paste-ready TS/TSX covering rendering (useSuspense/useLive/useCache/useQuery/useDLE/useSubscription), parallel fetches with React.use(), mutations via useController, useLoading/useDebounce, AsyncBoundary, and programmatic Query objects — fully executable across the common cases.

5 / 5

Workflow Clarity

As a reference/catalog organized by use case rather than a multi-step procedure, it gives clear hook-selection guidance through inline comments ('without fetch', 'fetch without Suspense', 'subscribe without Suspense'); no destructive/batch workflow is described so the validation-cap rule does not apply, but there is no explicit decision flow or checkpoints, keeping it at 4.

4 / 5

Progressive Disclosure

The body is an overview with inline code that points to one-level-deep reference files (AsyncBoundary.md, Controller.md, Actions.md, devtools-debugging.md, etc.), all of which exist in references/, and closes with a well-signaled, described index of every reference file including the '_' sub-reference pages.

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 strong: it states concrete capabilities, lists the relevant hooks, and provides an explicit 'Use when' trigger clause with a distinctive package niche. The only notable issue is the imperative 'Use' voice, which the rubric treats as second-person and penalizes on specificity.

Suggestions

Rephrase the opening in third-person/gerund voice (e.g., 'Fetches, mutates, and renders remote data via @data-client/react hooks...') to satisfy the voice requirement and recover the specificity point.

Add a few natural trigger synonyms such as 'polling', 'websockets', or 'cached data' to push trigger-term coverage from good to comprehensive.

DimensionReasoningScore

Specificity

Lists multiple concrete actions (data fetching, mutations, rendering, optimistic updates, real-time subscriptions, wiring Suspense/error boundaries) plus specific hook names, which is comprehensive; reduced from 5 to 4 because the description opens with the imperative 'Use @data-client/react hooks', a second-person voice the rubric penalizes by one point on specificity.

4 / 5

Completeness

Explicitly answers both 'what' (use the listed @data-client/react hooks for fetching/mutations/rendering) and 'when' via a concrete 'Use when reading/rendering remote data, triggering mutations, doing optimistic updates, real-time subscriptions, or wiring Suspense/error boundaries in React.' clause, matching the anchor-5 example pattern.

5 / 5

Trigger Term Quality

Strong keyword coverage spanning action phrases ('data fetching', 'mutations', 'optimistic updates', 'real-time subscriptions', 'Suspense/error boundaries', 'React') and the package plus twelve hook identifiers users would naturally say; held at 4 rather than 5 because some natural variations (e.g., 'polling', 'websockets', 'cached data') are absent.

4 / 5

Distinctiveness Conflict Risk

Names the specific package '@data-client/react' and its distinctive hooks, carving a clear niche that is unlikely to trigger for sibling skills (data-client-rest, data-client-manager, data-client-schema) or unrelated React data libraries.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
reactive/data-client
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.