From frontend
Enforces code style rules for all languages: semantic variable naming, brace style for ifs, key-value HTML data attributes, CSS nesting with &. Auto-invokes when editing code, writing functions, or naming variables.
npx claudepluginhub fubits1/svelte-skills --plugin frontendThis skill uses the workspace's default tool permissions.
Single-line `if` without braces is OK only when the entire statement fits on one line:
Suggests manual /compact at logical task boundaries in long Claude Code sessions and multi-phase tasks to avoid arbitrary auto-compaction losses.
Share bugs, ideas, or general feedback.
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, needs braces
if (x) doThing();
// Correct
if (x) {
doThing();
}
Always use key-value syntax. Never use bare/boolean data attributes.
<!-- BAD -->
<div data-active></div>
<!-- GOOD -->
<div data-active="true"></div>
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.
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.
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.