code-style

name	code-style
description	Code style rules for all languages: variable naming, brace style, HTML data attributes, CSS nesting. Auto-invoke when editing code files, writing new functions, or naming variables.
user-invocable	true

Code Style

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) do ThingZ();

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>

Variable Naming

Use semantic, human-readable names. The name should say what the thing IS, not save keystrokes.

Don't	Do
ctx	context
c, cb	callback
obj	object or something more specific
val	value
tmp	temporary or something more specific
res	result or response
el	element

Exceptions: Loop variables (i, j) and lambda params where meaning is obvious from context ((item) => item.id) are fine.

Function Naming

Functions are verbs. Past-participle nouns (mountedPopup) lie about lifecycle, wrong for a factory that mounts lazily. Use createComponentPopup.

Conventions: createX/buildX (factory), getX (sync read), loadX/fetchX (async), isX/hasX (predicate), toX (transform), attachX/detachX (lifecycle), onX/handleX (event).

One word, not two: toggle already means open-if-closed/close-if-open. Don't write toggleOrShow. Same for closeAndReset, getOrCreate.

Plural follows the work: if a function grows to handle N where it handled 1, rename. detachPopup that now detaches info + context popups is detachPopups.

TypeScript

type over interface

Use type for object shapes. Never use interface unless extending a third-party interface.

// BAD
interface Milestone {
  date: string
  label: string
}

// GOOD
type Milestone = {
  date: string
  label: string
}

Private members in classes

Private class members (fields and methods) should be prefixed with #, never private. # is enforced at runtime; private is compile-time only.

CSS Nesting

Always nest CSS with &. Never write flat selectors as separate rules.

/* BAD — flat selectors */
.parent .child { ... }
.parent:hover { ... }

/* GOOD — nested with & */
.parent {
  & .child { ... }
  &:hover { ... }
  &[data-active="true"] { ... }
}

This applies to all CSS, component styles, global stylesheets, everywhere. For the full nesting workflow (specificity analysis, block ordering, stylelint compliance), use frontend:css-nesting.

Related Skills

• frontend:editing: File editing discipline, comment preservation, refactoring safety.
• svelte-5:code-style-svelte: Svelte-specific style rules (component docs, reactivity patterns).
• frontend:css-nesting: Full CSS nesting workflow with specificity analysis and stylelint compliance.