| 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} -->
