CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

data-client-vue

Read, change and render async and shared state in Vue with @data-client/vue: any data from an API or other async source, and global state shared across components (it has to persist somewhere, which makes it async). Use it for loading and error states, mutations and forms, filtered or derived views, and debugging data that looks wrong or stale on screen. Use it in place of fetch in onMounted or watch, or app-wide refs and provide/inject; its main composables are useSuspense, useQuery and useController.

Quality

97%

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

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

This is a high-quality API-overview skill: dense, executable code with per-call HTTP annotations, framework gotchas stated only where they are non-obvious, and a complete, verified one-level-deep reference bundle. The only meaningful gap is the absence of explicit post-mutation validation/verification checkpoints, which keeps workflow clarity just below the top anchor.

Suggestions

Add a brief verification note after the Mutations section (e.g. how to confirm a ctrl.fetch succeeded or re-read the updated value via useCache/useQuery, and when invalidate vs expireAll is needed to see the change) to close the validation gap in write workflows.

In the debugging section, name one concrete symptom-to-check example inline (e.g. stale list after a push) so the store-inspection procedure has an explicit first checkpoint before delegating to devtools-debugging.md.

DimensionReasoningScore

Conciseness

The body is lean and assumes Vue competence: every section is a code example with one-line annotations (e.g. "// GET https://jsonplaceholder.typicode.com/todos/5") or a non-obvious gotcha Claude would not know ("composables called after the first await lose the component instance", "undefined ... means 'not loaded yet', not 'doesn't exist'"). It never explains what Vue, Suspense, or composables are, matching the 'every token earns its place' anchor rather than the level below with 'minor instances of over-explanation'.

5 / 5

Actionability

All guidance is copy-paste-ready TypeScript: useSuspense/useLive/useCache/useQuery/useDLE/useSubscription/useFetch usage with concrete params, full CRUD mutation handlers via ctrl.fetch, useLoading/useDebounce wiring, Query construction, and conditional fetching with a null-returning getter. Comments state the exact HTTP request each call produces, which matches 'fully executable; copy-paste ready code or commands; specific examples cover the common cases'.

5 / 5

Workflow Clarity

The body is organized as a clear progression (Setup → Rendering → Mutations → boundaries → Controller → Queries → Debugging → Managers), and the debugging section gives an ordered procedure ("inspect the page's store before reading code for the cause" via __DC__.controller/__DC__.actions, then symptom mapping in devtools-debugging.md). It is not a 5 because there are no explicit validation/verification checkpoints after mutations or writes (e.g. confirming a ctrl.fetch landed or handling its rejection beyond useLoading's error ref), leaving error-recovery loops mostly implicit in references.

4 / 5

Progressive Disclosure

The SKILL.md body is an overview with inline examples, and all detail lives one level deep in a references/ directory whose 29 files all exist and are each linked with a one-line label in a closing References section (plus contextual inline links like _vueArgs.md and _AsyncBoundary.md at the point of need). This matches 'clear overview with well-signaled one-level-deep references; easy navigation'; there is no nesting of references within references.

5 / 5

Total

19

/

20

Passed

Description

100%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 exemplary: it states concrete capabilities in third person, gives explicit and varied 'Use it...' trigger guidance with natural Vue vocabulary, and is tightly scoped to @data-client/vue. It reads like the anchor-5 reference examples with no padding or over-claims.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "Read, change and render async and shared state", "loading and error states, mutations and forms, filtered or derived views, and debugging data that looks wrong or stale" — anchored to a named library (@data-client/vue) and named composables (useSuspense, useQuery, useController). It matches the 'multiple specific concrete actions; comprehensive coverage' anchor, and is not the level below because coverage spans read, write, render, and debug use cases with no significant gaps.

5 / 5

Completeness

Both questions are answered explicitly: 'what' via "Read, change and render async and shared state in Vue with @data-client/vue" and 'when' via two explicit trigger clauses — "Use it for loading and error states, mutations and forms, filtered or derived views, and debugging data that looks wrong or stale" and "Use it in place of fetch in onMounted or watch, or app-wide refs and provide/inject". This matches the anchor-5 example structure (what + explicit 'Use when' with concrete triggers), so the completeness cap for missing trigger guidance does not apply.

5 / 5

Trigger Term Quality

Natural phrases a Vue user would say are comprehensively covered with synonyms: "loading and error states", "mutations and forms", "data that looks wrong or stale", "global state shared across components", "fetch in onMounted or watch", "refs and provide/inject", plus the package name @data-client/vue as the domain's identifier equivalent. It is not a 4 because synonym coverage (async/shared/global state, wrong/stale data) goes beyond 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

The description is scoped to Vue and a specific package with distinct triggers (fetch in onMounted/watch, app-wide refs, provide/inject, stale on-screen data), giving it a clear niche with minimal overlap risk against generic state-management or fetching skills. It is not a 4 because the Vue-specific and library-specific framing leaves little overlap even with closely related data-fetching skills.

5 / 5

Total

20

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

reactive/data-client

Path

.agents/skills/data-client-vue/SKILL.md

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.