← ClaudeAtlas

hyperscript-guidelineslisted

_hyperscript (0.9.93) scripting guidelines for event handlers, element references, element and global state, async fetch, DOM manipulation, htmx integration, and debugging. Use when writing or reviewing inline _hyperscript behavior.
NomadicDaddy/aidd · ★ 1 · Code & Development · score 60
Install: claude install-skill NomadicDaddy/aidd
# _hyperscript Guidelines > **Version**: Target _hyperscript **0.9.93**. > **CDN**: `<script src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.93"></script>` (unpkg format `https://unpkg.com/hyperscript.org@0.9.93` also works) > **npm**: `npm install hyperscript.org@0.9.93` (package name is `hyperscript.org`) > > _The `0.9.90` release added experimental reactivity, core templating, DOM morphing (`morph`), an > experimental component framework, and new commands and expressions. It carries **breaking > changes** to module structure and some syntax. Pin your version and test before upgrading from > 0.9.14 to the 0.9.9x line. The patterns in this guide use the stable core syntax._ ## Core Principles 1. Write readable, English-like syntax 2. Keep scripts close to the elements they affect 3. Use event-driven patterns 4. Follow hypermedia-friendly scripting practices 5. Maintain proper scoping 6. Leverage built-in features over custom JavaScript ## Basic Structure ### Script Placement ```html <!-- Inline script: Place the _ attribute directly on the element --> <button _="on click add .active">Click Me</button> <!-- External script: Use a script tag with type="text/hyperscript" --> <script type="text/hyperscript"> def myFunction() log "Hello, world!" end </script> ``` ### Event Handlers ```html <!-- Basic event handling: 'on event command' --> <div _="on click log 'clicked'"></div> <!-- Multiple events in one script block --> <div _=" on click log 'clicked' o