AI SummaryHeuristic scoring (no AI key configured).
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "aberdeen" skill in my project. Please run this command in my terminal: # Install skill into the correct directory mkdir -p .claude/skills/aberdeen && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/aberdeen/SKILL.md "https://raw.githubusercontent.com/vanviegen/aberdeen/master/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
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.
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
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
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster