Follow-up from "Combine frontend style guides - docs"

The following discussions from !20969 (merged) should be addressed:

@marcia started a discussion: (+2 comments)

@tristan.read Danger failed bc of the commit msg... So annoying... 🙄 Could you pls take a look?

- [HTML](style/html.md): guidelines for writing HTML code consistent with the rest of the codebase.

- [Vue](style/vue.md): Guidelines and conventions for Vue code may be found here.

[`// scss-lint:disable RuleName`](https://github.com/sds/scss-lint#disabling-linters-via-source):

You can run eslint locally by running `yarn eslint`.

Use relative paths if the module you are importing is less than two levels up:

Strive to write many small pure functions and minimize where mutations occur:

- `{variant}` is either `primary`, `secondary`, `success`, `warning`, `error`.

- `{shade}` is one of the shades listed in [colors](https://design.gitlab.com/product-foundations/colors/).

- `{size}` is a number from 1-6 from our [Type scale](https://design.gitlab.com/product-foundations/typography/).

lower case letters to differentiate between letters and numbers, e.g., `#E3E3E3`

1. Always use double quotes `"` inside templates and single quotes `'` for all other JS:

1. Props should be declared as an object:

1. Required key should always be provided when declaring a prop:

   Note that there are some scenarios where we need to check for the existence of the property.

   On those, a default key should not be provided:

1. `data` method should always be a function:

1. Shorthand `@` is preferable over `v-on`:

1. Shorthand `:` is preferable over `v-bind`:

1. Shorthand `#` is preferable over `v-slot`:

1. Prefer a component's kebab-cased name over other styles when using it in a template:

1. When the elements being iterated don't have a unique id, you can use the array index as the `:key` attribute:

1. Tooltips: Do not rely on `has-tooltip` class name for Vue components:

1. Tooltips: When using a tooltip, include the tooltip directive, `./app/assets/javascripts/vue_shared/directives/tooltip.js`.

The following yarn scripts are available to do global formatting.

To select Prettier as a formatter, add the following properties to your User or Workspace Settings.

To automatically format your files with Prettier, add the following properties to your User or Workspace Settings.

@marcia started a discussion:

We need to get rid of all these links in headings, they're completely off of the guidelines. 😬

Edited Sep 29, 2025 by 🤖 GitLab Bot 🤖