Code Style

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
if (x) doThing();

// 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.

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: fubits1
• Source: fubits1/svelte-skills
• License: MIT

Install and usage instructions live in the source repository linked above.