Aberdeen
PassedAberdeen is a reactive UI library for building web interfaces in plain TypeScript/JavaScript. It provides fine-grained reactivity using ES6 Proxies, automatic DOM updates without virtual DOM, built-in routing, component-local CSS with Tailwind-like shortcuts, and transition animations. The skill helps developers understand and use Aberdeen's API for creating reactive web applications.
105stars8forks
|304 viewsSkill Content
1,715 charactersAberdeen 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
onEachfor lists - Never iterate proxy arrays withfor/mapin 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
Obtaining info
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
Download
Extract to ~/.claude/skills/aberdeen/