code-style

Code Style

REQUIRED SUB-SKILLS:

• When Svelte is involved (.svelte, .svelte.ts, .svelte.js), invoke svelte-5:code-style-svelte. If the svelte-5 plugin isn't installed, stop and ask the user to install it.
• When CSS is involved (CSS or SCSS files, <style> blocks, inline style attributes, style: directives), invoke frontend:code-style-css.

Brace Style

Single-line if without braces is OK only when the entire statement fits on one line:

// OK — fits on one line. But then we need an empty line after the statement, except there is another if, then we need an empty line after the last if.
if (x) doThing();

//OK
if (x) doThing();
if (y) doThingY();
if (z) doThingZ();

let x = 1

//NOT OK
if (x) doThing();
let x = 1

// NOT OK — body wraps to the next line, needs braces
if (x)
  doThing();

// Correct
if (x) {
  doThing();
}

HTML Data Attributes

Always use key-value syntax. Never use bare/boolean data attributes.

<!-- BAD -->
<div data-active></div>

<!-- GOOD -->
<div data-active="true"></div>

Markup and Locale

• A native <button> activates on Enter and Space, an <a href> on Enter only. Use <button> for actions and <a href> for navigation to a real URL; only a non-semantic element with a role needs its own key handler.
• Give inputs a meaningful name, the matching type (email, tel, url, number) and inputmode, and turn off spellcheck on emails, codes and usernames (spellcheck="false").
• Give every field that collects information about the user its autocomplete token (name, email, tel, street-address, one-time-code), which WCAG 1.3.5 requires. Use autocomplete="off" only on a field that must never be autofilled.
• Wrap a checkbox or radio and its text in one <label>, so the whole row is a single hit target with no dead zone.
• Keep a submit button enabled until the request starts, then show a spinner while it runs.
• Warn before the user leaves with unsaved changes: beforeunload on plain pages, beforeNavigate on SvelteKit (svelte-5:code-style-svelte).
• Never disable zoom with user-scalable=no or maximum-scale=1. Match <meta name="theme-color"> to the page background.
• During a drag, put inert on the content that isn't a drop target, not on the dragged element (text selection: frontend:code-style-css).
• Format dates, times, numbers and currency with Intl.DateTimeFormat and Intl.NumberFormat. Detect the language from Accept-Language or navigator.languages, not the IP. Mark brand names, code and identifiers with translate="no".