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

Use string syntax by default -
```
$('div.box#Hello')
```
is more concise than object syntax

Never concatenate user data - Use

$('input value=', data)

not

$('input value=${data}')

Pass observables directly - Use
```
text=', ref(obj, 'key')
```
to avoid parent scope subscriptions
Use
onEach
for lists - Never iterate proxy arrays with
```
for
```
/
```
map
```
in render functions
Class instances are great - Better than plain objects for typed, structured state
CSS shortcuts - Use $3, $4 for spacing (1rem, 2rem), $primary for colors
Minimal scopes - Smaller reactive scopes = fewer DOM updates

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

aberdeen - Core:

proxy

onEach

ref

derive

map

multiMap

partition

count

isEmpty

peek

dump

clean

insertCss

insertGlobalCss

mount

runQueue

darkMode

route - Routing:
```
current
```
,
```
go
```
,
```
push
```
,
```
back
```
,
```
up
```
,
```
persistScroll
```
dispatcher - Path matching:
```
Dispatcher
```
,
```
MATCH_REST
```
,
```
MATCH_FAILED
```
transitions - Animations:
```
grow
```
,
```
shrink
```
prediction - Optimistic UI:
```
applyPrediction
```
,
```
applyCanon
```

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

Use string syntax by default -
```
$('div.box#Hello')
```
is more concise than object syntax

Never concatenate user data - Use

$('input value=', data)

not

$('input value=${data}')

Pass observables directly - Use
```
text=', ref(obj, 'key')
```
to avoid parent scope subscriptions
Use
onEach
for lists - Never iterate proxy arrays with
```
for
```
/
```
map
```
in render functions
Class instances are great - Better than plain objects for typed, structured state
CSS shortcuts - Use $3, $4 for spacing (1rem, 2rem), $primary for colors
Minimal scopes - Smaller reactive scopes = fewer DOM updates

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

aberdeen - Core:

proxy

onEach

ref

derive

map

multiMap

partition

count

isEmpty

peek

dump

clean

insertCss

insertGlobalCss

mount

runQueue

darkMode

route - Routing:
```
current
```
,
```
go
```
,
```
push
```
,
```
back
```
,
```
up
```
,
```
persistScroll
```
dispatcher - Path matching:
```
Dispatcher
```
,
```
MATCH_REST
```
,
```
MATCH_FAILED
```
transitions - Animations:
```
grow
```
,
```
shrink
```
prediction - Optimistic UI:
```
applyPrediction
```
,
```
applyCanon
```