CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

vuejs-project-starter

Scaffold a Vue 3.5+ project with Composition API (`<script setup>`), Pinia stores, Vue Router 4, TypeScript, Vite, and auto-imports via unplugin.

Quality

72%

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

Fix and improve this skill with Tessl

tessl review fix ./frontend/vuejs-project-starter/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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, copy-paste-ready scaffold skill with concrete commands, complete configs, and well-signposted conventions. Its weaknesses are inlined generic Vue pattern examples that re-teach knowledge Claude already has and a monolithic single-file structure where a references/ file would keep SKILL.md lean.

Suggestions

Move generic Vue pattern examples (Watchers, Teleport, Provide/Inject, useFetch) into a references/patterns.md and keep only project-specific conventions and the scaffold workflow in SKILL.md, addressing both progressive_disclosure and conciseness.

Delete the duplicated blockquote under the title and the duplicated 'Install dependencies: npm install' step in 'First Steps After Scaffold' (install is already in the Scaffold Command).

Remove teaching comments that explain Vue's documented API behavior (e.g. 'inject() returns T | undefined without one', 'watchEffect — auto-tracks dependencies') — keep only project-convention guidance Claude cannot infer.

DimensionReasoningScore

Conciseness

The scaffold command, project structure, conventions, and config examples are tight and non-padded, but several sections re-teach standard Vue knowledge Claude already has: a full 'Watchers' example explaining watch vs watchEffect ('auto-tracks dependencies'), a 'Teleport (Portal)' example, and teaching comments like 'inject() returns T | undefined without one'. The frontmatter description is also duplicated verbatim as a blockquote and 'npm install' appears in both the scaffold commands and 'First Steps'. This fits anchor 3 (mostly efficient, some unnecessary explanation) rather than anchor 2, since the padding is localized rather than pervasive.

3 / 5

Actionability

Everything is executable and copy-paste ready: the exact `npm create vue@latest` command with selection guidance, complete vite.config.ts with auto-import plugins, a working router with lazy loading and a navigation guard, a full Setup Store, typed components, and a page component tying it together. Common cases (auth guard, API fetching, forms/tooling pointers in Integration Notes) are all covered with specific commands.

5 / 5

Workflow Clarity

The scaffold sequence and 'First Steps After Scaffold' list are clearly ordered with verification checkpoints ('Verify the app loads at http://localhost:5173', 'Run npm run type-check to confirm TypeScript is clean'). However, there are no error-recovery feedback loops (what to do if the type check or dev server fails), so it matches anchor 4 rather than anchor 5. This is a scaffold skill, not a destructive/batch operation, so no workflow cap applies.

4 / 5

Progressive Disclosure

No bundle files exist — everything lives in one ~480-line SKILL.md. Sections are clearly headed and navigation is fine, but roughly 300 lines of 'Essential Patterns' (watchers, teleport, provide/inject, generic composables) and the integration notes are content that clearly belongs in a references/ file, matching anchor 3 ('content that should be separate is inline'). It does not reach anchor 4 because the split into progressive levels was not made at all.

3 / 5

Total

15

/

20

Passed

Description

61%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 concrete and technically specific with strong natural keywords for the Vue ecosystem, but it omits any 'Use when...' trigger guidance, capping completeness, and covers only a single action (scaffolding). Adding a when-clause and a few synonyms would move it to the top tier.

Suggestions

Add an explicit trigger clause, e.g. 'Use when starting a new Vue project, adding Vue Router/Pinia to an existing app, or when the user mentions Vue, Vue.js, Pinia, Vite, or .vue files.'

Include common synonyms ('Vue.js', 'frontend project setup') so users phrasing the request differently still hit the skill.

Optionally mention follow-on capabilities it covers (e.g. testing setup with Vitest, TanStack Query integration) to broaden the specificity beyond the single 'Scaffold' action.

DimensionReasoningScore

Specificity

The description names one concrete action ('Scaffold a Vue 3.5+ project') with a specific tech stack (Pinia, Vue Router 4, TypeScript, Vite, unplugin), but does not list several distinct actions like the anchor-4 example ('extracts, fills, converts'). It states what scaffolding produces rather than a breadth of capabilities.

3 / 5

Completeness

The 'what' is clear and concrete (scaffold a Vue project with the listed stack), but there is no 'Use when...' clause or equivalent trigger guidance, which per the rubric caps completeness at 3. It does not reach anchor 4, which requires both what and when present.

3 / 5

Trigger Term Quality

Natural terms a user would say are well covered — 'Vue 3.5+', 'Composition API', 'Pinia', 'Vite', 'TypeScript' — but common variations like 'Vue.js', 'frontend setup', or '.vue files' are missing, matching 'good keyword coverage; a few natural terms missing' rather than the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

Naming Vue, Pinia, and Vite gives it a clear niche distinct from other framework starter skills, but without an explicit trigger clause it could still overlap with a generic 'frontend project starter' skill when the user says 'set up a project' without naming Vue. Mostly distinct with minor overlap risk — anchor 4, not 5, since anchor 5's example includes explicit distinct triggers.

4 / 5

Total

14

/

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

achreftlili/deep-dev-skills

Path

frontend/vuejs-project-starter/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.