web

name	web
description	Web frontend engineering conventions for team. Vue.js stack. Project conventions in .claude/conventions/web.md override these defaults.
user_invocable	false

Web frontend conventions, team default.

Project override: if {repo}/.claude/conventions/web.md exists, overrides any rule here. See guides/conventions-override.md.

Defaults (team frontend stack)

Stack:

• Vue 2.6 Options API. Avoid Composition API unless repo already uses Vue 3.
• Vuex with namespaced modules: createNamespacedHelpers.
• TMS Design System: IpPageBase, IpTabs, IpFormField, IpSelect, IpDialog, IpSnackbar.
• PrimeVue 2.10 alongside TMS in some repos.
• @team-js packages: secure-components, secure-providers, secure-ui.
• Feature folders: /features/private, /features/public.

Component order:

• data, computed, watch, created/mounted, methods, components.

Styling:

• Scoped SCSS.
• BEM-like naming.
• CSS variables for theming.

UX feedback:

• Snackbar via this.$ipSnackbar.add().
• Async: .catch() before .finally(). Toast on failure.

State:

• Vuex actions for side effects, mutations for state changes.
• Getters for derived state.

Tests:

• Vitest or Jest depending on repo.
• Vue Test Utils for component tests.
• Cover happy path, error path, edge case.

Before writing code

Read at least 3 similar components in repo to confirm:

• Vue version (2 vs 3)
• API style (Options vs Composition)
• Design system in use (TMS, PrimeVue, custom)
• State management (Vuex, Pinia, none)

Never assume.

Forbidden in PR

• Composition API in Vue 2 repos
• Inline styles when SCSS exists
• Direct mutation of Vuex state outside mutations
• Components without tests
• console.log in production code

Mark gaps

<!-- TBD - verify with tech lead: {what you searched, what is missing} -->