CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

vue-patterns

Vue.js 3 Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns. Activates for Vue, Nuxt, Vite, or Pinia projects. Use when building or reviewing Vue 3, Nuxt, or Pinia code — Composition API, reactivity, or router navigation.

Quality

85%

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

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

A highly actionable, well-organized single-file reference with excellent executable code examples and a strong anti-patterns table. Its main weaknesses are mild over-explanation of basic Vue template syntax and a fully monolithic structure — no progressive disclosure via reference files despite substantial Nuxt, Vue 3.5, and testing content that would justify splitting.

Suggestions

Move the Nuxt-specific patterns (section 9) and Vue 3.5+ APIs (section 10) into separate reference files (e.g. references/nuxt.md, references/vue-35.md) and link to them with one-level-deep, clearly signaled references from SKILL.md.

Trim section 6's basic template syntax (v-if/v-else, v-for keys, plain v-model) — Claude already knows standard Vue template syntax — keeping only the genuinely opinionated guidance like computed filtered lists over v-if + v-for.

Drop or shorten the 'When to Activate' section, which restates the frontmatter description verbatim in spirit, and instead reserve that space for decision guidance not already covered (e.g. when to choose Pinia vs provide/inject is already in a table — extend that style).

DimensionReasoningScore

Conciseness

Largely lean — terse tables, rules lists, and code with almost no prose padding — but Section 6 re-explains basic template syntax (v-if/v-else, v-for with keys, plain v-model) that Claude already knows, and 'When to Activate' duplicates the frontmatter description. These are minor instances of over-explanation that could be trimmed (anchor 4), not the broader padding of anchor 3.

4 / 5

Actionability

Fully executable, copy-paste-ready TypeScript/Vue code throughout: useDebounce composable, Pinia setup store with loading/error handling, router guard, component test with pinia setup, Nuxt server route with zod validation, and Vue 3.5 API examples — specific examples cover the common cases, matching anchor 5; the comment-only SFC ordering block is a deliberate convention, not a gap.

5 / 5

Workflow Clarity

Content is clearly organized into ten numbered topic sections with concrete patterns (SFC ordering, store action loading/success/error handling, test stack). It is a patterns reference rather than a multi-step process skill, so no validation checkpoints are applicable — no destructive or batch operations exist — placing it at anchor 4 rather than 5's explicit validate/fix/retry loops.

4 / 5

Progressive Disclosure

The entire ~450-line reference lives inline in SKILL.md with no bundle files or references at all; sections like Nuxt-specific patterns, Vue 3.5 APIs, and testing are clearly separable into reference files. Internal section structure is good, but content that should be separate is inline and there are no references to signal — matching anchor 3 rather than 4's 'most content appropriately placed'.

3 / 5

Total

16

/

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.

A strong description that names a distinct ecosystem niche, enumerates specific capability areas, and includes an explicit, concrete 'Use when' trigger clause. The only weaknesses are topic-noun phrasing instead of concrete actions and the absence of a few natural trigger variations like '.vue' files or 'composables'.

DimensionReasoningScore

Specificity

Lists several specific capability areas — 'Composition API patterns, component architecture, reactivity best practices, Pinia state management, Vue Router navigation, and Nuxt SSR patterns' — but these are topic nouns rather than concrete actions (no verbs like 'extract' or 'configure'), placing it noticeably above anchor 3 but short of anchor 5's fully action-based coverage.

4 / 5

Completeness

Clearly answers both: the 'what' (Vue 3 Composition API patterns, Pinia state management, Vue Router, Nuxt SSR) and an explicit 'Use when building or reviewing Vue 3, Nuxt, or Pinia code — Composition API, reactivity, or router navigation' trigger clause, matching the anchor 5 example structure exactly; a 4 would require the 'when' to be less explicit than it is.

5 / 5

Trigger Term Quality

Good natural keyword coverage — Vue, Vue 3, Nuxt, Vite, Pinia, Composition API, reactivity, router — all phrases users would naturally say. Not 5 because file extensions (.vue) and the common term 'composables' are missing, which anchor 5 expects as synonyms/extensions; not 3 because coverage clearly exceeds 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

Clear framework niche (Vue 3 / Nuxt / Pinia / Vite) with distinct, unambiguous triggers unlikely to fire for non-Vue skills; matches anchor 5's 'clear niche with distinct triggers; minimal conflict risk' — only trivially adjacent to generic frontend/TypeScript skills.

5 / 5

Total

18

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

affaan-m/ECC

Path

skills/vue-patterns/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.