constellai 0.3.0

package/skills/stacks/dataviz/chart-js/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: chart-js
+description: Chart.js is a popular open-source HTML5 Canvas charting library for the browser with built-in chart types (line, bar, pie, doughnut, radar, scatter, bubble, polar area). Consult when you need responsive, animated, framework-agnostic charts quickly without writing low-level SVG, or when integrating charts with React/Vue/Angular via official wrappers.
+domain: stack
+category: dataviz
+tags: [chart-js, chartjs, dataviz, javascript, canvas, charts, visualization]
+official_sources:
+  - https://www.chartjs.org/docs/latest/
+  - https://github.com/chartjs/Chart.js
+  - https://www.npmjs.com/package/chart.js
+verified: 2026-06-17
+---
+
+# Chart.js
+
+## Overview
+Chart.js is a simple, flexible open-source JavaScript charting library that renders to an HTML5 `<canvas>`. It ships eight core chart types plus animations, tooltips, and responsive resizing out of the box, with a plugin and scale system for extension. Read this when you need clean, interactive charts fast and don't require the fully custom control of a low-level library like D3.
+
+## Official sources
+- Docs: https://www.chartjs.org/docs/latest/
+- Repo: https://github.com/chartjs/Chart.js
+- Install: https://www.npmjs.com/package/chart.js
+
+## Install / setup
+```bash
+npm install chart.js
+```
+Command from the official installation guide (https://www.chartjs.org/docs/latest/getting-started/installation.html); CDN builds are available on jsDelivr (`https://cdn.jsdelivr.net/npm/chart.js`) and CDNJS.
+
+## Core concepts
+- **Chart instance** — `new Chart(ctx, config)` mounts a chart onto a canvas 2D context.
+- **Config object** — `{ type, data, options }` declaratively describes the chart.
+- **Datasets** — each `data.datasets[]` entry holds values, labels, colors, and per-dataset options.
+- **Scales** — cartesian (`x`/`y`) and radial axes configured under `options.scales`.
+- **Tree-shaking** — register only the controllers/elements you use, or import `chart.js/auto` for everything.
+- **Plugins** — lifecycle hooks (`beforeDraw`, `afterEvent`) extend rendering; many community plugins exist.
+- **Responsive** — charts resize to their container by default (`responsive: true`).
+- **Animations** — transitions are configurable per property under `options.animation`.
+
+## Best practices
+- Import from `chart.js/auto` for prototypes, but register components explicitly in production to tree-shake (https://www.chartjs.org/docs/latest/getting-started/integration.html).
+- Give the canvas a sized wrapper element and avoid hard-coding width/height for responsiveness (https://www.chartjs.org/docs/latest/configuration/responsive.html).
+- Call `chart.update()` after mutating `chart.data`, and `chart.destroy()` before recreating to avoid leaks (https://www.chartjs.org/docs/latest/developers/api.html).
+- Use official framework wrappers (react-chartjs-2, vue-chartjs) instead of manually bridging lifecycles.
+
+## Common pitfalls
+- "category is not a registered scale" error → you tree-shook too aggressively; register the needed scales/controllers or use `chart.js/auto`.
+- Chart grows infinitely tall in a flex/grid parent → set `maintainAspectRatio: false` and size the wrapper.
+- Re-rendering over an existing canvas → destroy the previous instance first (`chart.destroy()`).
+
+## Examples
+```js
+import { Chart } from "chart.js/auto";
+
+const ctx = document.getElementById("myChart").getContext("2d");
+new Chart(ctx, {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr"],
+    datasets: [{ label: "Sales", data: [12, 19, 7, 15], backgroundColor: "steelblue" }]
+  },
+  options: { responsive: true, scales: { y: { beginAtZero: true } } }
+});
+```
+
+## Further reading
+- https://www.chartjs.org/docs/latest/charts/line.html — per-chart-type configuration reference.
+- https://www.chartjs.org/docs/latest/samples/ — official runnable samples.
+
+## Related skills
+- ../d3 — drop down to D3 when you need fully custom, non-standard charts.
+- ../plotly — alternative when you need scientific/3D/statistical chart types.

package/skills/stacks/dataviz/d3/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: d3
+description: D3.js (Data-Driven Documents) is a low-level JavaScript library for binding data to the DOM/SVG/Canvas and building bespoke, fully custom interactive data visualizations. Consult when you need hand-crafted charts, scales, axes, transitions, geo/map projections, force layouts, or custom SVG dataviz that off-the-shelf chart libraries can't express.
+domain: stack
+category: dataviz
+tags: [d3, d3js, dataviz, javascript, svg, charts, visualization]
+official_sources:
+  - https://d3js.org/getting-started
+  - https://github.com/d3/d3
+  - https://www.npmjs.com/package/d3
+verified: 2026-06-17
+---
+
+# D3.js
+
+## Overview
+D3.js (Data-Driven Documents) is a low-level JavaScript library for manipulating documents based on data. It gives you scales, selections, axes, shapes, transitions, layouts, and geo projections so you can build any visualization you can imagine—but you draw the marks yourself (SVG/Canvas). Read this when you need fully custom, interactive, or animated charts beyond what high-level libraries like Chart.js or Plotly offer.
+
+## Official sources
+- Docs: https://d3js.org/getting-started
+- Repo: https://github.com/d3/d3
+- Install: https://www.npmjs.com/package/d3
+
+## Install / setup
+```bash
+npm install d3
+```
+Command from the official getting-started guide (https://d3js.org/getting-started); for browser-only use, import the ESM bundle from `https://cdn.jsdelivr.net/npm/d3@7/+esm`.
+
+## Core concepts
+- **Selections** — `d3.select`/`selectAll` wrap DOM nodes for declarative manipulation and the enter/update/exit data-join pattern.
+- **Data join** — `selection.data(arr).join("rect")` binds data to elements, creating, updating, and removing nodes to match.
+- **Scales** — `d3.scaleLinear`, `scaleBand`, `scaleTime`, `scaleOrdinal` map data domains to visual ranges (pixels, colors).
+- **Axes** — `d3.axisBottom(scale)` renders ticks/labels from a scale into an SVG group.
+- **Shape generators** — `d3.line`, `d3.arc`, `d3.area`, `d3.pie` produce SVG path strings from data.
+- **Transitions** — `selection.transition().duration(...)` interpolates attributes/styles for animation.
+- **Modules** — D3 is a collection of independent packages (d3-array, d3-scale, d3-geo…) importable individually.
+- **Geo** — `d3-geo` projections + GeoJSON drive maps and choropleths.
+
+## Best practices
+- Cherry-pick submodules (`import {scaleLinear} from "d3-scale"`) to shrink bundle size (https://d3js.org/getting-started).
+- Use the enter/update/exit (or `.join()`) pattern for dynamic data rather than re-rendering everything (https://d3js.org/d3-selection/joining).
+- Prefer Canvas over SVG when rendering thousands of marks for performance (https://d3js.org/d3-selection).
+- Keep D3 for data/layout math and let a framework own the DOM when integrating with React/Vue.
+
+## Common pitfalls
+- Forgetting the data key function makes `.data()` rebind by index, breaking object constancy → pass a key: `.data(arr, d => d.id)`.
+- Mutating the DOM with both React and D3 causes conflicts → let D3 compute attrs, render via the framework, or isolate D3 in a ref.
+- Misreading scale direction for SVG `y` (origin top-left) → invert the range: `scaleLinear([0, max], [height, 0])`.
+
+## Examples
+```js
+import * as d3 from "d3";
+
+const data = [4, 8, 15, 16, 23, 42];
+const w = 420, h = 120;
+const x = d3.scaleBand().domain(data.map((_, i) => i)).range([0, w]).padding(0.1);
+const y = d3.scaleLinear().domain([0, d3.max(data)]).range([h, 0]);
+
+const svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
+svg.selectAll("rect")
+  .data(data)
+  .join("rect")
+    .attr("x", (_, i) => x(i))
+    .attr("y", d => y(d))
+    .attr("width", x.bandwidth())
+    .attr("height", d => h - y(d))
+    .attr("fill", "steelblue");
+```
+
+## Further reading
+- https://d3js.org/ — module-by-module API reference and live examples.
+- https://observablehq.com/@d3/gallery — official gallery of D3 visualizations.
+
+## Related skills
+- ../chart-js — higher-level canvas charting when you don't need custom marks.
+- ../plotly — declarative interactive charts built on top of d3/WebGL.

package/skills/stacks/dataviz/grafana/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: grafana
+description: Grafana is an open-source observability and analytics platform for querying, visualizing, alerting on, and exploring metrics, logs, and traces from many data sources (Prometheus, Loki, InfluxDB, SQL, and more). Consult when you need to build operational dashboards, set up alerting, wire up data sources, or provision dashboards-as-code for monitoring and observability.
+domain: stack
+category: dataviz
+tags: [grafana, dataviz, observability, dashboards, monitoring, prometheus, alerting]
+official_sources:
+  - https://grafana.com/docs/grafana/latest/
+  - https://github.com/grafana/grafana
+  - https://grafana.com/docs/grafana/latest/setup-grafana/installation/
+verified: 2026-06-17
+---
+
+# Grafana
+
+## Overview
+Grafana is an open-source platform for monitoring and observability: it connects to dozens of data sources and lets you compose interactive dashboards, run ad-hoc queries (Explore), and define alerting—all without storing data itself. It is the de-facto visualization layer for Prometheus, Loki, and time-series stacks. Read this when you need operational dashboards, alert rules, data-source configuration, or dashboards provisioned as code.
+
+## Official sources
+- Docs: https://grafana.com/docs/grafana/latest/
+- Repo: https://github.com/grafana/grafana
+- Install: https://grafana.com/docs/grafana/latest/setup-grafana/installation/
+
+## Install / setup
+```bash
+docker run -d -p 3000:3000 --name grafana grafana/grafana-oss
+```
+Quick-start Docker command from the official install docs (https://grafana.com/docs/grafana/latest/setup-grafana/installation/docker/); browse to http://localhost:3000 and sign in with admin / admin. APT/RPM/Windows installers are documented under the install page.
+
+## Core concepts
+- **Data source** — a connection to a backend (Prometheus, Loki, InfluxDB, MySQL, etc.); Grafana queries it live, it stores nothing.
+- **Dashboard** — a collection of panels arranged on a grid, JSON-modeled and shareable.
+- **Panel** — one visualization (time series, gauge, table, stat, bar gauge…) backed by one or more queries.
+- **Query & transformations** — per-panel queries plus client-side transforms (joins, calculations, reshaping).
+- **Variables** — template variables make dashboards reusable/parameterized (e.g. `$instance`).
+- **Alerting** — unified alert rules evaluate queries and route notifications via contact points.
+- **Provisioning** — data sources and dashboards defined as YAML/JSON files for GitOps.
+- **Explore** — ad-hoc query/log/trace exploration outside dashboards.
+
+## Best practices
+- Provision data sources and dashboards as code (files under `provisioning/`) instead of clicking in the UI (https://grafana.com/docs/grafana/latest/administration/provisioning/).
+- Use template variables and repeating panels/rows to keep dashboards DRY (https://grafana.com/docs/grafana/latest/dashboards/variables/).
+- Move off the bundled SQLite to PostgreSQL/MySQL for production HA (https://grafana.com/docs/grafana/latest/setup-grafana/installation/).
+- Change the default admin password and configure proper auth/proxy before exposing (https://grafana.com/docs/grafana/latest/setup-grafana/configure-security/).
+
+## Common pitfalls
+- Editing dashboards in the UI when they're provisioned from files → changes are read-only/overwritten; edit the source files instead.
+- Relying on SQLite for production → it doesn't scale; migrate the Grafana database to Postgres/MySQL.
+- Dashboard "No data" → mismatched data-source UID or query time range; verify the data source and `$__range`/time picker.
+
+## Examples
+```yaml
+# provisioning/datasources/prometheus.yaml — provision a data source as code
+apiVersion: 1
+datasources:
+  - name: Prometheus
+    type: prometheus
+    access: proxy
+    url: http://prometheus:9090
+    isDefault: true
+```
+
+## Further reading
+- https://grafana.com/docs/grafana/latest/fundamentals/getting-started/ — build your first dashboard.
+- https://grafana.com/docs/grafana/latest/alerting/ — unified alerting reference.
+
+## Related skills
+- ../plotly — code-driven interactive charts when you control the rendering app.
+- ../d3 — fully custom one-off visualizations outside a dashboard tool.

package/skills/stacks/dataviz/plotly/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: plotly
+description: Plotly is an open-source interactive graphing library available for Python (plotly.py), JavaScript (plotly.js), and R, producing web-based charts including statistical, scientific, financial, 3D, and geographic plots. Consult when you need interactive, publication-quality charts in notebooks or web apps, Plotly Express one-liners, or the Dash framework for analytical web dashboards.
+domain: stack
+category: dataviz
+tags: [plotly, plotly-express, dataviz, python, javascript, charts, dash]
+official_sources:
+  - https://plotly.com/python/
+  - https://github.com/plotly/plotly.py
+  - https://plotly.com/python/getting-started/
+verified: 2026-06-17
+---
+
+# Plotly
+
+## Overview
+Plotly is an open-source interactive charting library with high-level APIs for Python, R, and JavaScript, all built on the plotly.js rendering engine (D3 + WebGL). It produces interactive HTML charts—zoom, pan, hover—across statistical, scientific, 3D, and map chart types, and embeds in Jupyter, standalone HTML, or Dash web apps. Read this when you need interactive, exploratory, or publication-quality charts, especially in Python notebooks.
+
+## Official sources
+- Docs: https://plotly.com/python/
+- Repo: https://github.com/plotly/plotly.py
+- Install: https://plotly.com/python/getting-started/
+
+## Install / setup
+```bash
+pip install plotly
+```
+Command from the official Python getting-started guide (https://plotly.com/python/getting-started/); use `pip install "plotly[express]"` for Plotly Express extras, `conda install -c conda-forge plotly`, or for the browser `npm install plotly.js-dist` (https://plotly.com/javascript/getting-started/).
+
+## Core concepts
+- **Figure** — the top-level object (`plotly.graph_objects.Figure`), serializable to JSON, containing `data` traces and a `layout`.
+- **Traces** — typed data series (scatter, bar, heatmap, surface, choropleth…) added to a figure.
+- **Plotly Express (px)** — high-level wrapper that builds whole figures from a dataframe in one call.
+- **Graph Objects (go)** — low-level, explicit figure construction for full control.
+- **Layout** — axes, titles, legends, annotations, and styling under `figure.layout`.
+- **Renderers** — where a figure displays (notebook, browser, static image via Kaleido).
+- **Dash** — Plotly's companion framework for building interactive analytic web apps in pure Python.
+- **plotly.js** — the underlying JS engine; the Python/R libraries emit configs it renders.
+
+## Best practices
+- Reach for Plotly Express first; drop to Graph Objects only when px can't express the chart (https://plotly.com/python/plotly-express/).
+- Use `fig.update_layout()` / `fig.update_traces()` to style rather than rebuilding figures (https://plotly.com/python/creating-and-updating-figures/).
+- Install Kaleido for static PNG/SVG/PDF export (`pip install kaleido`) (https://plotly.com/python/static-image-export/).
+- For large scatter data, use WebGL trace types (`scattergl`) for performance (https://plotly.com/python/webgl-vs-svg/).
+
+## Common pitfalls
+- Figures don't render in a plain script → call `fig.show()` and ensure a renderer; in some contexts write HTML with `fig.write_html()`.
+- `fig.write_image()` fails → Kaleido isn't installed; `pip install kaleido`.
+- Mixing px and go incorrectly → px returns a full `Figure`; add go traces with `fig.add_trace()` rather than reconstructing.
+
+## Examples
+```python
+import plotly.express as px
+
+df = px.data.iris()
+fig = px.scatter(
+    df, x="sepal_width", y="sepal_length",
+    color="species", size="petal_length",
+    title="Iris sepal dimensions",
+)
+fig.update_layout(legend_title_text="Species")
+fig.show()
+```
+
+## Further reading
+- https://plotly.com/python/reference/ — full figure/trace attribute reference.
+- https://dash.plotly.com/ — Dash framework for analytical web apps.
+
+## Related skills
+- ../d3 — the low-level layer beneath plotly.js for fully custom visualizations.
+- ../chart-js — lighter canvas charts when you don't need scientific/3D types.

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