CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/vue-best-practices

Vue 3 patterns — Composition API, composables, reactivity, component design,

97

1.33x
Quality

93%

Does it follow best practices?

Impact

99%

1.33x

Average score across 8 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-3/

{
  "context": "Tests whether the agent uses Pinia with the Setup Store pattern for cross-component state, places store files correctly, uses computed for derived values, uses watch for side effects, and distinguishes between Pinia shared state and local component ref() state.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Pinia for shared state",
      "description": "Cross-component state (e.g. the authenticated user, session token, or user preferences that multiple components need) is managed in a Pinia store rather than in a single component or passed via props",
      "max_score": 10
    },
    {
      "name": "Setup Store pattern",
      "description": "The store is defined using the Setup Store pattern: `defineStore('name', () => { ... return { ... } })` with a function body, not the Options Store object syntax `defineStore('name', { state: () => ({...}), getters: {}, actions: {} })`",
      "max_score": 15
    },
    {
      "name": "stores/ folder placement",
      "description": "Store files are placed in a `stores/` directory (e.g. `stores/auth.ts`, `stores/user.ts`)",
      "max_score": 8
    },
    {
      "name": "computed for derived values",
      "description": "Values derived from store state (e.g. display name, role label, permissions list) are declared with `computed()` inside the setup function rather than calculated inline or as plain functions",
      "max_score": 12
    },
    {
      "name": "watch for side effects",
      "description": "Reactive side effects triggered by state changes (e.g. redirecting on logout, persisting to localStorage, showing a notification) use `watch()` rather than being embedded in action functions or lifecycle hooks",
      "max_score": 12
    },
    {
      "name": "Local ref() for component state",
      "description": "State used only within a single component (e.g. a form field value, a toggle open/closed) is declared with local `ref()` inside that component's `<script setup>`, not added to a Pinia store",
      "max_score": 10
    },
    {
      "name": "Script setup on components",
      "description": "All .vue component files use `<script setup lang=\"ts\">`",
      "max_score": 8
    },
    {
      "name": "defineProps generic typing",
      "description": "Any component props are typed using `defineProps<T>()` with a TypeScript interface or inline type",
      "max_score": 8
    },
    {
      "name": "Store returns all used members",
      "description": "The setup store's return object explicitly lists all state refs, computed values, and action functions that are used by components",
      "max_score": 9
    },
    {
      "name": "No reactive object replacement",
      "description": "Reactive objects inside the store are never reassigned directly; mutations use property assignment or `Object.assign()`",
      "max_score": 8
    }
  ]
}

evals

tile.json