constellai 0.3.0

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

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

@@ -0,0 +1,77 @@
+---
+name: react
+description: Component-based JavaScript library for building web and native UIs; consult for components, hooks, state, and rendering model.
+domain: stack
+category: frontend
+tags: [react, components, hooks, jsx, ui, spa]
+official_sources:
+  - https://react.dev/
+  - https://github.com/facebook/react
+verified: 2026-06-16
+---
+
+# React
+
+## Overview
+React is a JavaScript library for building user interfaces out of small, composable, stateful components. It uses a declarative model: you describe what the UI should look like for a given state, and React reconciles the DOM (or native views) to match. Read this when building component trees, managing local/shared state, or choosing how to bootstrap a React app.
+
+## Official sources
+- Docs: https://react.dev/
+- Repo: https://github.com/facebook/react
+- Install / download: https://react.dev/learn/creating-a-react-app
+
+## Install / setup
+React's docs recommend starting a new app with a framework. The most common scaffolds (copied verbatim from react.dev):
+
+```bash
+npx create-next-app@latest
+```
+
+```bash
+npx create-react-router@latest
+```
+
+Note: Create React App is deprecated; see react.dev/learn/creating-a-react-app for current recommendations.
+
+## Core concepts
+- **Components** — functions that return JSX describing UI; compose them to build whole interfaces.
+- **JSX** — HTML-like syntax that compiles to `React.createElement` calls; expressions go in `{}`.
+- **Props** — read-only inputs passed from parent to child; never mutate them.
+- **State & hooks** — `useState`, `useEffect`, `useContext`, `useReducer` etc. add memory and side effects to function components.
+- **Rendering & reconciliation** — React re-renders components when state/props change and diffs the result to apply minimal DOM updates.
+- **Keys** — stable identities for list items so React can track elements across renders.
+- **Purity** — components should render as pure functions of their props and state.
+
+## Best practices
+- Keep components pure: render based only on props and state, perform side effects in effects/event handlers (react.dev "Keeping Components Pure").
+- Lift shared state up to the closest common ancestor rather than duplicating it.
+- Give list items stable, unique `key` props (not array index when the list can reorder).
+- Prefer composition over inheritance; pass JSX via `children` and props.
+- Use the official React DevTools and the Rules of Hooks (call hooks at the top level, only from React functions).
+
+## Common pitfalls
+- Mutating state directly (`state.x = 1`) → create new objects/arrays and call the setter so React detects the change.
+- Calling hooks conditionally or inside loops → always call hooks unconditionally at the top of the component.
+- Overusing `useEffect` for derived data → compute values during render instead; effects are for synchronizing with external systems.
+
+## Examples
+```jsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount((c) => c + 1)}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+## Further reading
+- https://react.dev/learn — official Quick Start and full Learn guide
+- https://react.dev/reference/react — API reference for hooks and components
+
+## Related skills
+- ../vue — alternative reactive UI framework
+- ../preact — tiny React-compatible alternative

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

@@ -0,0 +1,75 @@
+---
+name: solidjs
+description: Fine-grained reactive UI library with JSX and no virtual DOM; consult for signals, derived state, and Solid/SolidStart apps.
+domain: stack
+category: frontend
+tags: [solidjs, signals, reactivity, jsx, ui]
+official_sources:
+  - https://docs.solidjs.com/
+  - https://github.com/solidjs/solid
+verified: 2026-06-16
+---
+
+# SolidJS
+
+## Overview
+SolidJS is a declarative JavaScript UI library that uses JSX but compiles to fine-grained reactivity instead of a virtual DOM: only the exact DOM nodes affected by a state change are updated. Components run once to set up reactive graphs, which makes updates fast and predictable. Read this when working with signals, derived state, or scaffolding a Solid/SolidStart app.
+
+## Official sources
+- Docs: https://docs.solidjs.com/
+- Repo: https://github.com/solidjs/solid
+- Install / download: https://docs.solidjs.com/quick-start
+
+## Install / setup
+Solid's official scaffolder is `create-solid` (see docs.solidjs.com/quick-start). The repo README also documents starting from a template (copied verbatim from github.com/solidjs/solid):
+
+```bash
+npx degit solidjs/templates/js my-app
+cd my-app
+npm i
+npm run dev
+```
+
+For TypeScript, use `solidjs/templates/ts` in place of `solidjs/templates/js`.
+
+## Core concepts
+- **Signals** — `createSignal` returns a getter/setter pair; reading a signal in a tracked scope subscribes to it.
+- **Fine-grained reactivity** — components run once; only reactive reads re-run when their signals change (no re-render of the whole component).
+- **Derived state** — `createMemo` caches computed values; plain functions can also derive values.
+- **Effects** — `createEffect` runs side effects when its tracked dependencies change.
+- **JSX** — Solid compiles JSX to real DOM nodes and reactive bindings.
+- **Control flow** — `<Show>`, `<For>`, `<Switch>` components handle conditional and list rendering reactively.
+- **Stores** — `createStore` for nested reactive objects.
+
+## Best practices
+- Call signal getters inside the JSX/effect where you want reactivity, not destructured once outside tracking scope.
+- Use `<For>` instead of `Array.map` for keyed, efficient list rendering.
+- Use `createMemo` for expensive derived values to avoid recomputation.
+- Keep component bodies setup-only; put repeated logic in effects/memos, since the body runs just once.
+
+## Common pitfalls
+- Reading a signal outside a tracked scope → you get a static snapshot; read it where reactivity is needed.
+- Treating components like React (expecting re-renders) → Solid does not re-run component bodies on update.
+- Spreading/destructuring props early → access props lazily to preserve reactivity (or use `splitProps`).
+
+## Examples
+```jsx
+import { createSignal } from 'solid-js';
+
+function Counter() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <button onClick={() => setCount(count() + 1)}>
+      Clicked {count()} times
+    </button>
+  );
+}
+```
+
+## Further reading
+- https://docs.solidjs.com/guides — guides and concepts
+- https://docs.solidjs.com/solid-start — SolidStart full-stack framework
+
+## Related skills
+- ../svelte — compiler-first reactive framework
+- ../react — JSX-based component library

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

@@ -0,0 +1,70 @@
+---
+name: svelte
+description: Compiler-first UI framework that converts components to efficient JS with no runtime virtual DOM; consult for Svelte/SvelteKit apps.
+domain: stack
+category: frontend
+tags: [svelte, sveltekit, compiler, reactivity, ui]
+official_sources:
+  - https://svelte.dev/docs
+  - https://github.com/sveltejs/svelte
+verified: 2026-06-16
+---
+
+# Svelte
+
+## Overview
+Svelte is a UI framework that shifts work to a compile step: instead of shipping a runtime that diffs a virtual DOM, it compiles components into small, imperative JavaScript that surgically updates the DOM. SvelteKit is the official application framework built on top of it (routing, SSR, data loading). Read this when building Svelte components or a SvelteKit app.
+
+## Official sources
+- Docs: https://svelte.dev/docs
+- Repo: https://github.com/sveltejs/svelte
+- Install / download: https://svelte.dev/docs/svelte/getting-started
+
+## Install / setup
+The docs recommend SvelteKit; create a project with the `sv` CLI (copied verbatim from svelte.dev/docs/svelte/getting-started):
+
+```bash
+npx sv create myapp
+cd myapp
+npm install
+npm run dev
+```
+
+## Core concepts
+- **Compiler** — Svelte compiles `.svelte` components at build time; there is no runtime virtual DOM.
+- **Components** — `.svelte` files combine `<script>`, markup, and `<style>` (scoped by default).
+- **Runes (Svelte 5)** — `$state`, `$derived`, `$effect`, and `$props` declare reactive state and derived values.
+- **Props** — declared with `$props()` (Svelte 5); passed as attributes from parent.
+- **Bindings** — `bind:value` and event handlers (`onclick`) wire UI to state.
+- **Stores** — shared reactive state across components.
+- **SvelteKit** — filesystem routing, server/client load functions, and SSR/SSG.
+
+## Best practices
+- Use runes (`$state`, `$derived`) for reactivity in Svelte 5 rather than the older reactive-label syntax.
+- Keep styles in the component; Svelte scopes them automatically.
+- Use SvelteKit for routing, SSR, and data loading rather than wiring it by hand.
+- Derive values with `$derived` instead of manually keeping copies in sync.
+
+## Common pitfalls
+- Mixing Svelte 4 reactive statements (`$:`) with Svelte 5 runes → follow one model per the version you target.
+- Expecting a virtual DOM diffing API → Svelte updates are compiled; think in terms of reactive declarations, not re-renders.
+- Forgetting that component CSS is scoped → use `:global(...)` when you intentionally need global styles.
+
+## Examples
+```svelte
+<script>
+  let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+  Clicked {count} times
+</button>
+```
+
+## Further reading
+- https://svelte.dev/docs/svelte/overview — Svelte language docs
+- https://svelte.dev/docs/kit — SvelteKit application framework
+
+## Related skills
+- ../vue — reactive SFC-based framework
+- ../solidjs — fine-grained reactive library

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

@@ -0,0 +1,69 @@
+---
+name: vue
+description: Progressive, incrementally adoptable JavaScript framework for building web UIs; consult for SFCs, reactivity, and composition API.
+domain: stack
+category: frontend
+tags: [vue, reactivity, sfc, composition-api, ui, spa]
+official_sources:
+  - https://vuejs.org/guide/
+  - https://github.com/vuejs/core
+verified: 2026-06-16
+---
+
+# Vue
+
+## Overview
+Vue is a progressive JavaScript framework for building user interfaces, designed to be incrementally adoptable from a sprinkle of interactivity to full single-page apps. It centers on declarative, reactive rendering and Single-File Components (`.vue`) that co-locate template, script, and styles. Read this when building Vue components, using the Composition API, or scaffolding a Vue project.
+
+## Official sources
+- Docs: https://vuejs.org/guide/
+- Repo: https://github.com/vuejs/core
+- Install / download: https://vuejs.org/guide/quick-start.html
+
+## Install / setup
+Scaffold a new project with the official `create-vue` tool (copied verbatim from vuejs.org/guide/quick-start.html):
+
+```bash
+npm create vue@latest
+```
+
+## Core concepts
+- **Reactivity** — `ref()` and `reactive()` create reactive state; the DOM updates automatically when it changes.
+- **Single-File Components (SFC)** — `.vue` files bundle `<template>`, `<script setup>`, and `<style>` together.
+- **Composition API** — `<script setup>` with `ref`, `computed`, `watch`, and lifecycle hooks for organizing logic by concern.
+- **Options API** — alternative object-based component style (`data`, `methods`, `computed`).
+- **Template directives** — `v-if`, `v-for`, `v-bind` (`:`), `v-on` (`@`), `v-model` for two-way binding.
+- **Computed & watchers** — `computed()` for derived cached values; `watch`/`watchEffect` for side effects.
+- **Components & props/emits** — pass data down via props, communicate up via emitted events.
+
+## Best practices
+- Prefer the Composition API with `<script setup>` for new projects (recommended in the docs for SFCs).
+- Use `computed` for derived state instead of recomputing in templates or watchers.
+- Always provide a unique `:key` when using `v-for`.
+- Use Pinia (the official state store) for cross-component shared state.
+- Pin the Vue version and use the official Vue DevTools for debugging.
+
+## Common pitfalls
+- Destructuring a `reactive()` object loses reactivity → keep the object intact or use `toRefs`.
+- Mutating props inside a child → emit an event or use `v-model` so the parent owns the state.
+- Using `v-if` and `v-for` on the same element → split them; `v-if` has higher precedence and the behavior is discouraged.
+
+## Examples
+```vue
+<script setup>
+import { ref } from 'vue';
+const count = ref(0);
+</script>
+
+<template>
+  <button @click="count++">Clicked {{ count }} times</button>
+</template>
+```
+
+## Further reading
+- https://vuejs.org/guide/introduction.html — full introduction and concepts
+- https://vuejs.org/guide/quick-start.html — quick start and tooling
+
+## Related skills
+- ../react — alternative component UI library
+- ../svelte — compiler-first reactive framework

package/skills/stacks/infra/ansible/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: ansible
+description: Ansible is Red Hat's agentless IT automation tool that configures systems and orchestrates deployments via YAML playbooks over SSH; consult when writing playbooks, roles, inventories, tasks, handlers, or using modules and collections to provision, configure, or deploy across many hosts.
+domain: stack
+category: infra
+tags: [ansible, automation, configuration-management, devops, infrastructure, yaml, playbook]
+official_sources:
+  - https://docs.ansible.com/
+  - https://github.com/ansible/ansible
+  - https://docs.ansible.com/projects/ansible/latest/installation_guide/intro_installation.html
+verified: 2026-06-17
+---
+
+# Ansible
+
+## Overview
+Ansible is an open-source, agentless IT automation engine for configuration management, application deployment, and orchestration. It connects to managed nodes over SSH (or WinRM) and applies idempotent tasks described declaratively in YAML playbooks, requiring no software installed on the targets. Read this when authoring playbooks/roles, defining inventories, or automating multi-host configuration.
+
+## Official sources
+- Docs: https://docs.ansible.com/
+- Repo: https://github.com/ansible/ansible
+- Install: https://docs.ansible.com/projects/ansible/latest/installation_guide/intro_installation.html
+
+## Install / setup
+```bash
+python3 -m pip install --user ansible
+```
+Source: https://docs.ansible.com/projects/ansible/latest/installation_guide/intro_installation.html
+
+## Core concepts
+- **Control node** — machine where Ansible runs; managed nodes need only SSH and Python.
+- **Inventory** — list of managed hosts, grouped, in INI or YAML (`-i inventory`).
+- **Playbook** — ordered YAML file mapping plays (host groups) to tasks.
+- **Task** — a single call to a module (e.g. `ansible.builtin.copy`); strives for idempotency.
+- **Module** — reusable unit of work executed on a host; ships in collections.
+- **Role** — packaged, reusable structure of tasks, handlers, vars, and templates.
+- **Handler** — task triggered by `notify`, run once at the end (e.g. restart a service).
+- **Collection** — distributable bundle of modules, roles, and plugins (via Ansible Galaxy).
+
+## Best practices
+- Write idempotent tasks so repeated runs converge without side effects (https://docs.ansible.com/ansible/latest/playbook_guide/playbooks_intro.html).
+- Organize reusable automation into roles with a standard directory layout (https://docs.ansible.com/ansible/latest/playbook_guide/playbooks_reuse_roles.html).
+- Encrypt secrets at rest with Ansible Vault instead of plaintext vars (https://docs.ansible.com/ansible/latest/vault_guide/index.html).
+- Reference modules by fully qualified collection name, e.g. `ansible.builtin.copy` (https://docs.ansible.com/ansible/latest/collections/index.html).
+- Install Galaxy dependencies via `requirements.yml` for reproducibility (https://docs.ansible.com/ansible/latest/galaxy/user_guide.html).
+
+## Common pitfalls
+- Using `command`/`shell` for things a module handles → breaks idempotency; prefer the dedicated module.
+- Hardcoding passwords/keys in playbooks → store them in Ansible Vault.
+- Host unreachable due to SSH/key issues → verify with `ansible all -m ping -i inventory`.
+
+## Examples
+```yaml
+- name: Ensure nginx is installed and running
+  hosts: web
+  become: true
+  tasks:
+    - name: Install nginx
+      ansible.builtin.package:
+        name: nginx
+        state: present
+    - name: Start nginx
+      ansible.builtin.service:
+        name: nginx
+        state: started
+        enabled: true
+```
+
+## Further reading
+- https://docs.ansible.com/ansible/latest/playbook_guide/index.html — playbook authoring guide
+- https://galaxy.ansible.com/ — Ansible Galaxy collections/roles hub
+- https://docs.ansible.com/ansible/latest/collections/ansible/builtin/index.html — builtin module index
+
+## Related skills
+- ../terraform — provision infrastructure that Ansible then configures
+- ../vagrant — spin up local VMs to test playbooks against