frontend-standardslisted
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