constella 0.1.0

package/skills/stacks/frontend/alpine/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: alpine
+description: Lightweight framework for composing JavaScript behavior directly in markup via x- attributes; consult for sprinkles of interactivity.
+domain: stack
+category: frontend
+tags: [alpinejs, declarative, markup, lightweight, reactivity]
+official_sources:
+  - https://alpinejs.dev/start-here
+  - https://github.com/alpinejs/alpine
+verified: 2026-06-16
+---
+
+# Alpine.js
+
+## Overview
+Alpine.js is a rugged, minimal framework for composing JavaScript behavior directly in your HTML using `x-` attributes. It offers reactive data, event handling, and DOM bindings without a build step, making it ideal for adding interactivity to mostly server-rendered pages. Read this when you want lightweight, declarative client behavior without a SPA framework.
+
+## Official sources
+- Docs: https://alpinejs.dev/start-here
+- Repo: https://github.com/alpinejs/alpine
+- Install / download: https://alpinejs.dev/essentials/installation
+
+## Install / setup
+Add via CDN (copied verbatim from alpinejs.dev/essentials/installation):
+
+```html
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+```
+
+Or install via npm and initialize in your bundle:
+
+```bash
+npm install alpinejs
+```
+
+```javascript
+import Alpine from 'alpinejs'
+
+window.Alpine = Alpine
+Alpine.start()
+```
+
+## Core concepts
+- **`x-data`** — declares a reactive component scope with state; required to activate Alpine on an element.
+- **Directives** — `x-bind` (`:`), `x-on` (`@`), `x-model`, `x-show`, `x-if`, `x-for` wire state to the DOM.
+- **`x-init`** — runs setup logic when a component initializes.
+- **Reactivity** — Alpine tracks state in `x-data` and updates bindings when it changes.
+- **Magics & globals** — `$el`, `$refs`, `$dispatch`, `$store` provide element refs, events, and shared state.
+- **No build step** — works directly from a script tag for progressive enhancement.
+
+## Best practices
+- Keep component state inside `x-data`; for shared state use `Alpine.store` / `$store`.
+- Register plugins/extensions between importing Alpine and calling `Alpine.start()`.
+- Call `Alpine.start()` only once per page to avoid multiple instances.
+- Pin a specific version (e.g. `@3.13.3`) in production instead of the floating `@3.x.x` tag.
+
+## Common pitfalls
+- Omitting the `defer` attribute on the CDN script → Alpine must defer so the DOM is ready; the docs require it.
+- Forgetting `x-data` on a container → directives inside won't activate.
+- Putting heavy logic inline in attributes → move it into methods within `x-data` for readability and reuse.
+
+## Examples
+```html
+<div x-data="{ count: 0 }">
+  <button @click="count++">Clicked <span x-text="count"></span> times</button>
+</div>
+```
+
+## Further reading
+- https://alpinejs.dev/start-here — guided introduction
+- https://alpinejs.dev/essentials/installation — installation options
+
+## Related skills
+- ../htmx — hypermedia requests; pairs well with Alpine sprinkles
+- ../lit — web components for heavier client logic

package/skills/stacks/frontend/angular/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: angular
+description: Full-featured TypeScript frontend platform with CLI, DI, and reactive primitives; consult for components, signals, and Angular CLI apps.
+domain: stack
+category: frontend
+tags: [angular, typescript, cli, signals, dependency-injection, spa]
+official_sources:
+  - https://angular.dev/
+  - https://github.com/angular/angular
+verified: 2026-06-16
+---
+
+# Angular
+
+## Overview
+Angular is a full-featured, opinionated TypeScript framework and platform for building web applications, with a first-class CLI, dependency injection, routing, forms, and HTTP client included. Modern Angular uses standalone components and signals for reactivity. Read this when scaffolding with the Angular CLI, structuring components/services, or working with DI and signals.
+
+## Official sources
+- Docs: https://angular.dev/
+- Repo: https://github.com/angular/angular
+- Install / download: https://angular.dev/installation
+
+## Install / setup
+Install the CLI globally and create a project (copied verbatim from angular.dev/installation):
+
+```bash
+npm install -g @angular/cli
+```
+
+```bash
+ng new <project-name>
+```
+
+## Core concepts
+- **Components** — classes with a template and styles, declared standalone in modern Angular.
+- **Templates** — HTML with Angular syntax: bindings (`[prop]`, `(event)`), control flow (`@if`, `@for`), and interpolation.
+- **Signals** — reactive primitives (`signal`, `computed`, `effect`) for fine-grained state.
+- **Dependency injection** — services are provided and injected via the DI system (`inject()` / constructor injection).
+- **Angular CLI** — `ng generate`, `ng serve`, `ng build` scaffold, run, and bundle apps.
+- **Routing** — the Router maps URL paths to components.
+- **RxJS** — Observables power async streams (HTTP, events) throughout the framework.
+
+## Best practices
+- Prefer standalone components and the new control-flow syntax (`@if`, `@for`) for new code.
+- Use signals for component state and `computed` for derived values.
+- Use the CLI (`ng generate`) to scaffold consistent components, services, and routes.
+- Provide services at the appropriate injector scope (root vs. component) to control lifetimes.
+- Keep templates declarative; move logic into the component class or services.
+
+## Common pitfalls
+- Forgetting to unsubscribe from long-lived Observables → use `async` pipe or `takeUntilDestroyed` to avoid leaks.
+- Doing heavy work in templates → precompute with `computed`/signals or pure pipes.
+- Mixing NgModules and standalone patterns inconsistently → follow the standalone-first guidance for new projects.
+
+## Examples
+```typescript
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-counter',
+  standalone: true,
+  template: `<button (click)="count.set(count() + 1)">Clicked {{ count() }} times</button>`,
+})
+export class CounterComponent {
+  count = signal(0);
+}
+```
+
+## Further reading
+- https://angular.dev/overview — platform overview and guides
+- https://angular.dev/tools/cli — Angular CLI reference
+
+## Related skills
+- ../react — component UI library
+- ../vue — progressive reactive framework

package/skills/stacks/frontend/backbone/SKILL.md

@@ -0,0 +1,82 @@
+---
+name: backbone
+description: Backbone.js — a minimalist JavaScript MVC-ish library that gives web apps structure via Models, Collections, Views, Events, and a hash/pushState Router over a RESTful JSON API. Consult when working in a legacy or lightweight Backbone codebase, wiring model change events to view re-renders, syncing models/collections to a REST backend, defining client-side routes, or integrating with Underscore/jQuery and patterns like Marionette.
+domain: stack
+category: frontend
+tags: [backbone, backbonejs, mvc, underscore, jquery, frontend, javascript]
+official_sources:
+  - https://backbonejs.org/
+  - https://github.com/jashkenas/backbone
+  - https://www.npmjs.com/package/backbone
+verified: 2026-06-17
+---
+
+# Backbone.js
+
+## Overview
+Backbone.js is a small, unopinionated library that adds structure to JavaScript-heavy web apps with key-value-bound Models, ordered Collections, event-driven Views, and a Router, all connecting to an existing API over a RESTful JSON interface. Its only hard dependency is Underscore.js; jQuery (or Zepto) is used for DOM and Ajax. Read this when maintaining or extending a Backbone codebase, debugging model/view event wiring, or syncing data with a REST backend.
+
+## Official sources
+- Docs: https://backbonejs.org/
+- Repo: https://github.com/jashkenas/backbone
+- Install: https://www.npmjs.com/package/backbone
+
+## Install / setup
+```bash
+npm install backbone underscore jquery
+```
+Backbone's only hard dependency is Underscore.js (>= 1.8.3); jQuery (>= 1.11.0) is needed for `Backbone.View` DOM work and `Backbone.sync` (https://backbonejs.org/#Getting-started). You can also drop in `backbone-min.js` via a script tag from backbonejs.org.
+
+## Core concepts
+- **Model** — key-value data with validation, defaults, and `change` events via `get`/`set`.
+- **Collection** — ordered set of models with Underscore enumerable methods and `add`/`remove`/`reset` events.
+- **View** — binds a DOM `el` to model/collection data, declares an `events` hash, and `render`s.
+- **Events** — mixin (`on`/`off`/`trigger`, `listenTo`) usable on any object; foundation of all reactivity.
+- **Router** — maps URL fragments to handlers using hashchange or History `pushState`.
+- **Backbone.sync** — default persistence layer mapping CRUD to RESTful JSON (override for custom backends).
+- **Backbone.history** — singleton started with `Backbone.history.start()` to begin route monitoring.
+- **extend** — class-style inheritance helper (`Backbone.Model.extend({...})`) for all components.
+
+## Best practices
+- Use `listenTo`/`stopListening` instead of `on` so views unbind cleanly and avoid leaks (https://backbonejs.org/#Events-listenTo).
+- Keep view-managed DOM scoped to `this.$el` / the `events` hash rather than global selectors (https://backbonejs.org/#View-delegateEvents).
+- Define `model` on Collections and `url`/`urlRoot` so `fetch`/`save` hit the right REST endpoint (https://backbonejs.org/#Collection-url).
+- Implement `validate` and listen for `invalid` to reject bad `set`/`save` calls (https://backbonejs.org/#Model-validate).
+
+## Common pitfalls
+- Re-binding handlers with `on` on re-render leaks listeners → use `listenTo` and call `remove()`/`stopListening` on teardown.
+- Routes never fire because `Backbone.history.start()` was not called → start history after routers are constructed.
+- Expecting reactive templates → Backbone does not auto-render; call `render()` from a `change` listener yourself.
+
+## Examples
+```javascript
+var Todo = Backbone.Model.extend({ defaults: { done: false } });
+
+var TodoView = Backbone.View.extend({
+  tagName: 'li',
+  events: { 'click .toggle': 'toggle' },
+  initialize: function () {
+    this.listenTo(this.model, 'change', this.render);
+  },
+  toggle: function () {
+    this.model.set('done', !this.model.get('done'));
+  },
+  render: function () {
+    this.$el.text(this.model.get('title'));
+    return this;
+  }
+});
+
+var view = new TodoView({ model: new Todo({ title: 'Learn Backbone' }) });
+$('#list').append(view.render().el);
+```
+
+## Further reading
+- https://backbonejs.org/#FAQ — official FAQ and design rationale
+- https://backbonejs.org/examples/todos/ — the canonical TodoMVC-style example
+- https://marionettejs.com/ — Marionette, a higher-level framework built on Backbone
+
+## Related skills
+- ../jquery — DOM/Ajax layer Backbone relies on for views and sync
+- ../react — modern component framework that superseded Backbone-era MVC
+- ../ember — opinionated SPA framework contrast to Backbone's minimalism

package/skills/stacks/frontend/ember/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: ember
+description: Ember.js — an opinionated, batteries-included JavaScript framework for ambitious web applications, built around Ember CLI, the Glimmer rendering engine, routing, components, and services. Consult when scaffolding or working in an Ember app, using ember-cli (ember new/serve/generate), writing Glimmer components or templates (.hbs), defining routes/models/controllers/services, wiring Ember Data, or upgrading via the conventional file layout and addon ecosystem.
+domain: stack
+category: frontend
+tags: [ember, emberjs, ember-cli, glimmer, ember-data, frontend, javascript]
+official_sources:
+  - https://guides.emberjs.com/release/
+  - https://github.com/emberjs/ember.js
+  - https://cli.emberjs.com/release/
+verified: 2026-06-17
+---
+
+# Ember.js
+
+## Overview
+Ember.js is a productive, opinionated frontend framework for building scalable single-page applications, with strong conventions, a powerful router, and a first-class CLI/build pipeline. It bundles routing, components (Glimmer), services, and an optional data layer (Ember Data) so teams share one idiomatic structure. Read this when scaffolding an Ember app, generating routes/components/services, writing Handlebars templates, or upgrading an existing Ember codebase.
+
+## Official sources
+- Docs: https://guides.emberjs.com/release/
+- Repo: https://github.com/emberjs/ember.js
+- Install: https://cli.emberjs.com/release/basic-use/
+
+## Install / setup
+```bash
+npm install -g ember-cli
+ember new my-app --lang en --strict
+cd my-app
+npm start   # dev server at http://localhost:4200 (runs vite dev)
+```
+Commands from the Ember CLI Basic Use guide and the Quick Start (https://cli.emberjs.com/release/basic-use/, https://guides.emberjs.com/release/getting-started/quick-start/).
+
+## Core concepts
+- **Router & Routes** — `app/router.js` maps URLs to route handlers that load models and render templates.
+- **Components (Glimmer)** — reusable UI; `.gjs`/`.gts` or paired `.hbs` + backing class; the modern default rendering layer.
+- **Templates** — Handlebars `.hbs` with helpers, modifiers, and `{{outlet}}` for nested routing.
+- **Services** — long-lived singletons (auth, state, API) injected with `@service`.
+- **Ember Data** — store, models, adapters, and serializers for talking to a JSON/REST API.
+- **Ember CLI** — scaffolding/build tool; `ember generate`, `ember serve`, `ember build`, Embroider + Vite build pipeline (Broccoli is the legacy/classic build).
+- **Addons** — npm packages following Ember conventions to extend apps (`ember install <addon>`).
+- **Octane edition** — Glimmer components, native classes, decorators (`@tracked`, `@action`), and template tags as the current idiom.
+
+## Best practices
+- Prefer Glimmer components, `@tracked` state, and `@action` over legacy Classic components (https://guides.emberjs.com/release/upgrading/current-edition/).
+- Use `ember generate <blueprint>` to keep files in the conventional layout and tests in sync (https://cli.emberjs.com/release/basic-use/cli-commands/).
+- Put shared, stateful logic in services and inject with `@service` (https://guides.emberjs.com/release/services/).
+- Keep route model hooks for data loading; keep components presentational (https://guides.emberjs.com/release/routing/specifying-a-routes-model/).
+- Adopt Embroider for modern bundling and tree-shaking on new apps (https://github.com/embroider-build/embroider).
+
+## Common pitfalls
+- Mutating tracked state in render → derive with getters or update inside `@action` handlers, not during rendering.
+- Forgetting `{{outlet}}` in a parent template → nested routes render nothing; add the outlet.
+- Skipping `ember generate` and hand-creating files → broken resolver lookups; use blueprints so naming/paths match.
+
+## Examples
+```javascript
+// app/components/counter.js
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class CounterComponent extends Component {
+  @tracked count = 0;
+
+  @action increment() {
+    this.count += 1;
+  }
+}
+```
+```handlebars
+{{! app/components/counter.hbs }}
+<button type="button" {{on "click" this.increment}}>
+  Clicked {{this.count}} times
+</button>
+```
+
+## Further reading
+- https://guides.emberjs.com/release/tutorial/part-1/ — Super Rentals official tutorial
+- https://api.emberjs.com/ember/release/ — full API reference
+- https://github.com/embroider-build/embroider — next-gen build system
+
+## Related skills
+- ../react — component-based SPA alternative with a different rendering model
+- ../vue — progressive framework comparison for SFC/component design
+- ../angular — another opinionated, batteries-included SPA framework

package/skills/stacks/frontend/htmx/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: htmx
+description: HTML-over-the-wire hypermedia library that adds AJAX, SSE, and swaps via attributes; consult for server-rendered interactivity without SPA JS.
+domain: stack
+category: frontend
+tags: [htmx, hypermedia, ajax, html-over-the-wire, server-rendered]
+official_sources:
+  - https://htmx.org/docs/
+  - https://github.com/bigskysoftware/htmx
+verified: 2026-06-16
+---
+
+# htmx
+
+## Overview
+htmx is a small dependency-free library that extends HTML with attributes for AJAX, CSS transitions, WebSockets, and Server-Sent Events, letting any element issue requests and swap the returned HTML into the page. It follows the hypermedia (HTML-over-the-wire) approach: the server returns HTML fragments rather than JSON, keeping interactivity logic on the server. Read this when adding dynamic behavior to server-rendered apps without a SPA framework.
+
+## Official sources
+- Docs: https://htmx.org/docs/
+- Repo: https://github.com/bigskysoftware/htmx
+- Install / download: https://htmx.org/docs/#installing
+
+## Install / setup
+Load via CDN (copied verbatim from htmx.org/docs/#installing):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
+```
+
+Or install via npm and import in your bundle:
+
+```bash
+npm install htmx.org@2.0.10
+```
+
+```javascript
+import 'htmx.org';
+```
+
+## Core concepts
+- **Hypermedia exchange** — the server responds with HTML fragments that htmx swaps into the DOM.
+- **`hx-get` / `hx-post` (and other verbs)** — issue AJAX requests from any element.
+- **Triggers (`hx-trigger`)** — choose which events fire a request (click, change, load, intervals, etc.).
+- **Targets (`hx-target`) and swaps (`hx-swap`)** — control which element is updated and how (`innerHTML`, `outerHTML`, `beforeend`, …).
+- **`hx-boost`** — progressively enhances normal links/forms into AJAX requests.
+- **Extensions & events** — SSE/WebSocket extensions and a lifecycle event model for hooks.
+
+## Best practices
+- Have the server return small HTML partials targeted at the element being swapped.
+- Use `hx-target` and `hx-swap` explicitly so updates land where you intend.
+- Prefer progressive enhancement (`hx-boost`) so pages still work without JS.
+- Pin a specific htmx version (and use the integrity hash / self-host) in production.
+
+## Common pitfalls
+- Returning JSON and expecting it to render → htmx swaps HTML; return HTML fragments.
+- Forgetting to re-initialize event handlers for swapped content → rely on htmx attributes or `htmx.process()` rather than one-time JS bindings.
+- Over-broad swap targets clobbering page state → scope `hx-target` to the smallest fragment that needs updating.
+
+## Examples
+```html
+<button hx-post="/clicked" hx-target="#result" hx-swap="innerHTML">
+  Click me
+</button>
+<div id="result"></div>
+```
+
+## Further reading
+- https://htmx.org/docs/ — full documentation
+- https://htmx.org/examples/ — official examples (UX patterns)
+
+## Related skills
+- ../alpine — pairs well for client-side sprinkles alongside htmx
+- ../lit — web components for richer client logic

package/skills/stacks/frontend/lit/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: lit
+description: Lightweight base library for building fast, standards-based Web Components; consult for LitElement, reactive properties, and html templates.
+domain: stack
+category: frontend
+tags: [lit, web-components, custom-elements, shadow-dom, templates]
+official_sources:
+  - https://lit.dev/docs/
+  - https://github.com/lit/lit
+verified: 2026-06-16
+---
+
+# Lit
+
+## Overview
+Lit is a small library for building fast, lightweight Web Components on top of native browser standards (Custom Elements, Shadow DOM). Its `LitElement` base class adds reactive properties and efficient declarative templates via tagged template literals, with no heavy framework runtime. Read this when authoring reusable, framework-agnostic components that work in any page or framework.
+
+## Official sources
+- Docs: https://lit.dev/docs/
+- Repo: https://github.com/lit/lit
+- Install / download: https://lit.dev/docs/getting-started/
+
+## Install / setup
+Install via npm (copied verbatim from lit.dev/docs/getting-started/):
+
+```bash
+npm i lit
+```
+
+Then import the base class and helpers:
+
+```javascript
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+```
+
+## Core concepts
+- **Web Components** — Lit builds on native Custom Elements and Shadow DOM, so components are portable across frameworks.
+- **`LitElement`** — base class providing the reactive update lifecycle.
+- **Reactive properties** — `@property()`/`@state()` trigger efficient re-renders when they change.
+- **`html` templates** — tagged template literals describe markup; Lit updates only the dynamic parts.
+- **Scoped styles** — `static styles` with the `css` tag are encapsulated via Shadow DOM.
+- **Reactive update lifecycle** — `willUpdate`, `render`, `updated` hooks run around each render.
+
+## Best practices
+- Use `@property()` for public attributes/properties and `@state()` for internal reactive state.
+- Define styles with the `css` tagged literal in `static styles` so they're parsed once and shared.
+- Keep `render()` a pure function of reactive properties; perform side effects in `updated()`.
+- For npm projects use the `lit` package, not the CDN bundles, to avoid shipping redundant code.
+
+## Common pitfalls
+- Mutating objects/arrays in place without reassigning → Lit detects property changes by identity; assign a new value or call `requestUpdate()`.
+- Forgetting to register the element (`@customElement('x-y')` or `customElements.define`) → the tag won't upgrade.
+- Expecting global CSS to pierce Shadow DOM → style inside the component or use documented theming hooks (CSS custom properties / `::part`).
+
+## Examples
+```typescript
+import {LitElement, html} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+
+@customElement('my-counter')
+export class MyCounter extends LitElement {
+  @state() count = 0;
+  render() {
+    return html`<button @click=${() => this.count++}>Clicked ${this.count} times</button>`;
+  }
+}
+```
+
+## Further reading
+- https://lit.dev/docs/components/overview/ — component authoring guide
+- https://lit.dev/docs/templates/overview/ — templating reference
+
+## Related skills
+- ../alpine — declarative behavior in markup
+- ../htmx — hypermedia-driven interactivity

package/skills/stacks/frontend/preact/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: preact
+description: Tiny (~4kB) React-compatible UI library with the same modern API; consult for lightweight apps and React-to-Preact aliasing.
+domain: stack
+category: frontend
+tags: [preact, react-alternative, virtual-dom, hooks, lightweight, ui]
+official_sources:
+  - https://preactjs.com/guide/v10/getting-started/
+  - https://github.com/preactjs/preact
+verified: 2026-06-16
+---
+
+# Preact
+
+## Overview
+Preact is a fast, ~4kB alternative to React with the same modern API (components, virtual DOM, hooks). It targets bundle-size-sensitive projects and can often run existing React code via the `preact/compat` aliasing layer. Read this when you need React-like ergonomics with a tiny footprint or are migrating between React and Preact.
+
+## Official sources
+- Docs: https://preactjs.com/guide/v10/getting-started/
+- Repo: https://github.com/preactjs/preact
+- Install / download: https://preactjs.com/guide/v10/getting-started/
+
+## Install / setup
+Scaffold a project with the official `create-preact` initializer (copied verbatim from preactjs.com/guide/v10/getting-started/):
+
+```bash
+npm init preact
+```
+
+To add Preact to an existing build:
+
+```bash
+npm install preact
+```
+
+## Core concepts
+- **Components & virtual DOM** — same component model and diffing approach as React.
+- **Hooks** — `useState`, `useEffect`, etc. via `preact/hooks`.
+- **JSX / `h`** — JSX compiles to Preact's `h` (hyperscript) factory; configurable per build.
+- **`preact/compat`** — alias layer mapping `react`/`react-dom` to Preact so many React libraries work unchanged.
+- **Signals** — `@preact/signals` offers fine-grained reactive state as an alternative to hooks.
+- **Small footprint** — the runtime is intentionally tiny, reducing load and parse time.
+
+## Best practices
+- Import hooks from `preact/hooks` (not from a `react` import) unless using `preact/compat`.
+- Use `preact/compat` aliases in your bundler when consuming React-ecosystem libraries.
+- Consider `@preact/signals` for performant shared state in larger apps.
+- Pin the Preact major version and verify third-party React libs against `compat`.
+
+## Common pitfalls
+- Assuming 100% React API parity → some React internals/behaviors differ; test libraries under `compat`.
+- Mixing real `react` and Preact in one bundle without aliasing → configure the bundler alias so only one runtime loads.
+- Forgetting JSX pragma config when not using a preset → set the JSX import source / `h` pragma per the docs.
+
+## Examples
+```jsx
+import { render } from 'preact';
+import { useState } from 'preact/hooks';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
+}
+
+render(<Counter />, document.getElementById('app'));
+```
+
+## Further reading
+- https://preactjs.com/guide/v10/getting-started/ — getting started guide
+- https://preactjs.com/guide/v10/switching-to-preact/ — switching from React via compat
+
+## Related skills
+- ../react — the API Preact mirrors
+- ../solidjs — fine-grained reactive alternative

package/skills/stacks/frontend/qwik/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: qwik
+description: Resumable web framework with instant loading and O(1) hydration via lazy execution; consult for Qwik components and SSR resumability.
+domain: stack
+category: frontend
+tags: [qwik, resumability, hydration, ssr, lazy-loading, ui]
+official_sources:
+  - https://qwik.dev/docs/
+  - https://github.com/QwikDev/qwik
+verified: 2026-06-16
+---
+
+# Qwik
+
+## Overview
+Qwik is a JavaScript framework focused on instant-loading web apps through **resumability**: instead of replaying app setup on the client (hydration), it serializes server state into HTML and resumes execution on demand. This makes initial JS execution effectively O(1) regardless of app size. Read this when building Qwik components, optimizing time-to-interactive, or using QwikCity for routing/SSR.
+
+## Official sources
+- Docs: https://qwik.dev/docs/
+- Repo: https://github.com/QwikDev/qwik
+- Install / download: https://qwik.dev/docs/getting-started/
+
+## Install / setup
+Create a project with the official CLI (copied verbatim from qwik.dev/docs/getting-started/):
+
+```bash
+npm create qwik@latest
+```
+
+## Core concepts
+- **Resumability** — the app resumes from serialized server state instead of re-running setup (hydration) on the client.
+- **The `$` boundary** — `$()` and suffixed APIs (e.g. `onClick$`) mark lazy-loadable, serializable code the optimizer can split.
+- **Components** — `component$()` defines components whose handlers load only when needed.
+- **Reactive state** — `useSignal()` and `useStore()` hold reactive state across server and client.
+- **The Optimizer** — Qwik's build step splits code at `$` boundaries into fine-grained lazy chunks.
+- **QwikCity** — the meta-framework for routing, layouts, and data loading/actions.
+
+## Best practices
+- Wrap event handlers and lazy logic in `$` (e.g. `onClick$`) so the optimizer can defer them.
+- Use `useSignal`/`useStore` for state so values serialize and resume correctly.
+- Keep captured closures serializable; avoid referencing non-serializable values across `$` boundaries.
+- Use QwikCity `routeLoader$`/`routeAction$` for data instead of ad-hoc client fetching.
+
+## Common pitfalls
+- Capturing non-serializable values (DOM nodes, class instances) inside `$` closures → keep captured state serializable.
+- Treating Qwik like React (eager hydration mindset) → handlers and components are loaded lazily on interaction.
+- Forgetting the `$` suffix on handlers → the optimizer can't lazy-split, hurting the resumability benefit.
+
+## Examples
+```tsx
+import { component$, useSignal } from '@builder.io/qwik';
+
+export const Counter = component$(() => {
+  const count = useSignal(0);
+  return <button onClick$={() => count.value++}>Clicked {count.value} times</button>;
+});
+```
+
+## Further reading
+- https://qwik.dev/docs/getting-started/ — getting started
+- https://qwik.dev/docs/concepts/resumable/ — resumability concept
+
+## Related skills
+- ../react — JSX component library (eager hydration model)
+- ../solidjs — fine-grained reactive library