← ClaudeAtlas

frontend-standardslisted

Complete JavaScript, CSS, accessibility, event architecture, bundle pipeline, and admin UI coding standards
systempromptio/systemprompt-template · ★ 14 · AI & Automation · score 70
Install: claude install-skill systempromptio/systemprompt-template
# systemprompt.io Frontend Standards **systemprompt.io is a world-class Rust programming brand.** Every frontend file must be instantly recognizable as idiomatic modern JavaScript as Addy Osmani would write it: performance-conscious, pattern-driven, zero-abstraction-debt. Run `just publish` after changes. Verify zero console errors on every admin page. --- ## 1. Idiomatic JavaScript Prefer functional composition, destructuring, and declarative patterns over imperative control flow. ```javascript const names = items.filter(item => item.active).map(item => item.name); const value = opt ?? computeDefault(); const { id, name, enabled = true } = config; const endpoint = `/plugins/${encodeURIComponent(id)}`; ``` | Anti-Pattern | Idiomatic | |--------------|-----------| | `for (var i = 0; ...)` loop building array | `.filter().map()` chain | | `if (x !== null && x !== undefined)` | `x ?? fallback` | | `str + str + str` concatenation | Template literals `` `${a}/${b}` `` | | `function(x) { return x.id; }` | Arrow `x => x.id` | | Nested `if/else` chains | Early returns or ternary | | Manual DOM string building | Template literal with `app.escapeHtml()` | | `arr.indexOf(x) !== -1` | `arr.includes(x)` | | Callback pyramids | `async`/`await` with `try`/`catch` | --- ## 2. Limits | Metric | Limit | |--------|-------| | Source file length | 200 lines | | Function length | 40 lines | | Parameters | 4 | | Nesting depth | 3 levels | | Cyclomatic complexity | 10 per function | | Docu