Frontend Development

Patterns for building Vue 3 + Tailwind interfaces. This skill is all reference — apply every rule that touches the code you're writing.

Conventions

• Type props and emits explicitly.
• Reuse before creating: check the project's UI kit and existing stores before writing a new component or store, and prefer the kit's components (button, field, badge…) over raw HTML elements. When the project depends on sprintify-ui, run /sprintify-ui for the component catalog and props rather than guessing an API.
• Every user-facing string is a translation key, present in every locale file the project ships. Check whether a key already exists before adding one.

Never use the title attribute

title is invisible on touch devices, cannot be styled, and appears only after a browser-controlled delay. Use the kit's tooltip instead — never the attribute:

<!-- WRONG — native tooltip -->
<BaseButton :title="$t('users.edit')" icon="pencil" />