hyperscript-guidelineslisted
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