aberdeen

Category: Tools & Productivity | Uploader: vanviegen | Downloads: 0 | Version: v1.0（Latest）

Expert guidance for building reactive UIs with the Aberdeen library. Covers element creation, reactive state management, efficient list rendering, CSS integration, routing, transitions, and optimistic updates.

Changelog: Source: GitHub https://github.com/vanviegen/aberdeen

Directory Structure

Current level: Root

📁 .devcontainer/
- 📄 devcontainer.json 1002 B
📁 .github/
- 📁 workflows/
  - 📄 deploy.yml 944 B
📁 .vscode/
- 📄 extensions.json 58 B
- 📄 settings.json 35 B
📁 docs/
- 📄 favicon.png 45.9 KB
- 📄 live-code.js 17.2 KB
- 📄 Tutorial.md 32.5 KB
📁 examples/
- 📁 await/
  - 📄 index.html 300 B
  - 📄 main.js 1.4 KB
  - 📄 style.css 1.6 KB
- 📁 input/
  - 📄 index.html 160 B
  - 📄 input.css 780 B
  - 📄 input.js 3.0 KB
- 📁 js-framework-benchmark/
  - 📄 build-dummy-data.js 1.0 KB
  - 📄 idiomatic.js 2.9 KB
  - 📄 index.html 305 B
  - 📄 main.js 4.6 KB
  - 📄 style.css 88 B
- 📁 list/
  - 📄 index.html 117 B
  - 📄 list.js 2.4 KB
- 📁 route/
  - 📄 index.html 176 B
  - 📄 page-home.js 755 B
  - 📄 page-list.js 1.4 KB
  - 📄 page-settings.js 190 B
  - 📄 route.js 2.8 KB
  - 📄 style.css 1.4 KB
- 📁 svg/
  - 📄 index.html 413 B
  - 📄 svg.js 903 B
- 📁 tictactoe/
  - 📄 index.html 298 B
  - 📄 main.js 3.3 KB
  - 📄 style.css 1.8 KB
📁 src/
- 📁 helpers/
  - 📄 reverseSortedSet.ts 6.2 KB
- 📄 aberdeen.ts 115.0 KB
- 📄 dispatcher.ts 4.8 KB
- 📄 prediction.ts 5.1 KB
- 📄 route.ts 13.9 KB
- 📄 transitions.ts 2.0 KB
📁 tests/
- 📄 $.test.ts 4.0 KB
- 📄 array.test.ts 8.9 KB
- 📄 binding.test.ts 3.3 KB
- 📄 clean.test.ts 628 B
- 📄 copy.test.ts 4.0 KB
- 📄 create.test.ts 3.0 KB
- 📄 cssShortcuts.test.ts 3.9 KB
- 📄 darkMode.test.ts 1.4 KB
- 📄 destroy.test.ts 5.6 KB
- 📄 dispatcher.test.ts 2.4 KB
- 📄 dom.test.ts 6.5 KB
- 📄 errors.test.ts 4.4 KB
- 📄 fakedom.ts 15.5 KB
- 📄 helpers.ts 2.6 KB
- 📄 insertCss.test.ts 4.1 KB
- 📄 map.proxy.test.ts 19.3 KB
- 📄 map.test.ts 9.8 KB
- 📄 onEach.test.ts 9.6 KB
- 📄 prediction.test.ts 4.0 KB
- 📄 props.test.ts 2.0 KB
- 📄 proxy.test.ts 6.9 KB
- 📄 route.test.ts 13.3 KB
- 📄 scope.test.ts 6.3 KB
- 📄 setup.ts 485 B
- 📄 sort.test.ts 2.2 KB
- 📄 sortedSet.test.ts 2.8 KB
- 📄 svg.test.ts 4.2 KB
📄 .gitignore 107 B
📄 biome.json 646 B
📄 bun.lock 8.0 KB
📄 bunfig.toml 152 B
📄 CHANGELOG.md 11.8 KB
📄 html-to-aberdeen 13.3 KB
📄 LICENSE.txt 753 B
📄 package.json 2.3 KB
📄 README.md 8.0 KB
📄 SKILL.md 1.7 KB
📄 tsconfig.json 5.1 KB
📄 typedoc.json 1.0 KB

SKILL.md

---
name: aberdeen
description: Expert guidance for building reactive UIs with the Aberdeen library. Covers element creation, reactive state management, efficient list rendering, CSS integration, routing, transitions, and optimistic updates.
---

Aberdeen is a reactive UI library using fine-grained reactivity via JavaScript Proxies. No virtual DOM, no build step required.

# Guidance for AI Assistants

1. **Use string syntax by default** - `A('div.box#Hello')` is more concise than object syntax
2. **Never concatenate user data** - Use `A('input value=', data)` not `A('input value=${data}')`
3. **Pass observables directly** - Use `text=', ref(obj, 'key')` to avoid parent scope subscriptions
4. **Use `onEach` for lists** - Never iterate proxy arrays with `for`/`map` in render functions
5. **Class instances are great** - Better than plain objects for typed, structured state
6. **CSS shortcuts** - Use $3, $4 for spacing (1rem, 2rem), $primary for colors
7. **Minimal scopes** - Smaller reactive scopes = fewer DOM updates

# Obtaining info

The complete tutorial follows below. For detailed API reference open these files within the skill directory:

- **[aberdeen](aberdeen.md)** - Core: `$`, `proxy`, `onEach`, `ref`, `derive`, `map`, `multiMap`, `partition`, `count`, `isEmpty`, `peek`, `dump`, `clean`, `insertCss`, `insertGlobalCss`, `mount`, `runQueue`, `darkMode`
- **[route](route.md)** - Routing: `current`, `go`, `push`, `back`, `up`, `persistScroll`
- **[dispatcher](dispatcher.md)** - Path matching: `Dispatcher`, `MATCH_REST`, `MATCH_FAILED`
- **[transitions](transitions.md)** - Animations: `grow`, `shrink`
- **[prediction](prediction.md)** - Optimistic UI: `applyPrediction`, `applyCanon`

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

aberdeen

Directory Structure

SKILL.md

Report

Notice