constella 0.1.0

package/skills/stacks/runtime/deno/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: deno
+description: Deno — a secure-by-default JS/TS/WebAssembly runtime with built-in tooling (fmt, lint, test) and explicit permissions. Consult for secure JS/TS runtimes.
+domain: stack
+category: runtime
+tags: [deno, javascript, typescript, webassembly, runtime, security]
+official_sources:
+  - https://docs.deno.com/
+  - https://github.com/denoland/deno
+verified: 2026-06-16
+---
+
+# Deno
+
+## Overview
+Deno is a JavaScript, TypeScript, and WebAssembly runtime with secure defaults and a focus on developer experience. It is built on V8, Rust, and Tokio, and ships with built-in tooling (formatter, linter, test runner, bundler). Unlike Node, code runs sandboxed: file, network, and environment access must be explicitly granted. Read this when you want first-class TypeScript and an opt-in permission model.
+
+## Official sources
+- Docs: https://docs.deno.com/
+- Repo: https://github.com/denoland/deno
+- Install / download: https://docs.deno.com/runtime/getting_started/installation/
+
+## Install / setup
+macOS & Linux (from the official installation page):
+
+```bash
+curl -fsSL https://deno.land/install.sh | sh
+```
+
+Windows (PowerShell):
+
+```powershell
+irm https://deno.land/install.ps1 | iex
+```
+
+Verify the install:
+
+```bash
+deno --version
+```
+
+## Core concepts
+- Secure by default: file, network, and env access require explicit flags (e.g. `--allow-net`, `--allow-read`).
+- First-class TypeScript — run `.ts` directly with no separate build step.
+- Built-in tooling: `deno fmt`, `deno lint`, `deno test`, `deno bundle`, and `deno compile`.
+- Web-standard APIs (`fetch`, `URL`, Web Streams) plus a Node.js compatibility layer (`node:` specifiers, npm specifiers).
+- Modules are loaded by URL/specifier; dependencies and tasks are configured in `deno.json`.
+
+## Best practices
+- Grant the narrowest permissions needed (specific paths/hosts) rather than blanket `--allow-all`.
+- Pin dependency versions and use a lockfile for reproducible builds.
+- Use the built-in `deno fmt`/`deno lint`/`deno test` instead of adding external tooling where possible.
+- Prefer web-standard APIs for portability across runtimes and edge platforms.
+
+## Common pitfalls
+- Running with `--allow-all` and losing the security benefit → scope permissions explicitly.
+- Expecting full Node API parity → consult the Node compatibility docs for unsupported modules.
+- Forgetting that remote imports execute with the granted permissions → review and pin third-party module sources.
+
+## Examples
+```ts
+// run with: deno run --allow-net server.ts
+Deno.serve({ port: 3000 }, (_req) => {
+  return new Response('Hello from Deno');
+});
+```
+
+## Further reading
+- Getting started: https://docs.deno.com/runtime/getting_started/
+- Permissions: https://docs.deno.com/runtime/fundamentals/security/
+
+## Related skills
+- ../node — the runtime Deno's Node-compat layer targets
+- ../bun — alternative fast JS/TS runtime

package/skills/stacks/runtime/dotnet/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: dotnet
+description: .NET — Microsoft's free, cross-platform, open-source runtime (CoreCLR) for C#/F#/VB apps and services. Consult for installing, running, and deploying .NET.
+domain: stack
+category: runtime
+tags: [dotnet, csharp, coreclr, runtime, cli, cross-platform]
+official_sources:
+  - https://learn.microsoft.com/dotnet/
+  - https://github.com/dotnet/runtime
+verified: 2026-06-16
+---
+
+# .NET
+
+## Overview
+.NET is a free, cross-platform, open-source development platform from Microsoft for building web, cloud, desktop, mobile, AI, and IoT applications. The runtime (CoreCLR) executes Intermediate Language compiled from C#, F#, or Visual Basic, with a large class library. Read this when installing the SDK/runtime, using the `dotnet` CLI, or deploying a .NET service.
+
+## Official sources
+- Docs: https://learn.microsoft.com/dotnet/
+- Repo: https://github.com/dotnet/runtime
+- Install / download: https://dotnet.microsoft.com/download
+
+## Install / setup
+Download the SDK (which includes the runtime) for your platform from https://dotnet.microsoft.com/download (current LTS shown there is the .NET 10.0 line). On Linux, follow the package-manager instructions linked from the page. Verify and scaffold:
+
+```bash
+dotnet --version
+dotnet new console -o hello
+dotnet run --project hello
+```
+
+## Core concepts
+- The `dotnet` CLI drives the workflow: `new`, `restore`, `build`, `run`, `test`, `publish`.
+- The SDK contains build tooling plus the runtime; the runtime-only package just executes apps.
+- CoreCLR is the execution engine; the Base Class Library provides core APIs.
+- Source compiles to Intermediate Language (IL), JIT-compiled to native code at runtime (AOT also available).
+- NuGet is the package manager; project/dependency metadata lives in `.csproj`/`.fsproj` files.
+- Release lifecycle alternates LTS (even majors, longer support) and STS releases.
+
+## Best practices
+- Target an LTS release (e.g. .NET 10 LTS) for production longevity.
+- Install the SDK for development; ship the runtime-only package (or self-contained/AOT) to servers.
+- Commit `packages.lock.json` or pin versions for reproducible NuGet restores.
+- Use `dotnet publish` with the right runtime identifier for framework-dependent or self-contained deploys.
+
+## Common pitfalls
+- Installing only the runtime when you need to build → install the SDK for `dotnet build`.
+- Mismatched target framework vs installed runtime version → align `TargetFramework` with an installed runtime.
+- Assuming Windows-only → .NET runs cross-platform; verify platform-specific APIs before relying on them.
+
+## Examples
+```csharp
+var builder = WebApplication.CreateBuilder(args);
+var app = builder.Build();
+app.MapGet("/", () => "Hello from .NET");
+app.Run();
+```
+
+## Further reading
+- .NET documentation: https://learn.microsoft.com/dotnet/
+- Linux install guide: https://learn.microsoft.com/dotnet/core/install/linux
+
+## Related skills
+- ../jvm — comparable managed bytecode runtime

package/skills/stacks/runtime/jvm/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: jvm
+description: The Java Virtual Machine — the runtime executing Java/Kotlin/Scala bytecode. Consult for JDK selection, deployment, and JVM tuning. OpenJDK builds via Temurin.
+domain: stack
+category: runtime
+tags: [jvm, java, openjdk, temurin, bytecode, runtime]
+official_sources:
+  - https://docs.oracle.com/en/java/javase/
+  - https://github.com/openjdk/jdk
+verified: 2026-06-16
+---
+
+# JVM (Java Virtual Machine)
+
+## Overview
+The Java Virtual Machine executes platform-independent bytecode produced from Java, Kotlin, Scala, Clojure, and other JVM languages. OpenJDK is the open-source reference implementation; Eclipse Temurin (Adoptium) provides free, TCK-certified prebuilt OpenJDK binaries. Read this when selecting a JDK, packaging a JVM service, or reasoning about runtime/GC behavior.
+
+## Official sources
+- Docs: https://docs.oracle.com/en/java/javase/
+- Repo: https://github.com/openjdk/jdk
+- Install / download: https://adoptium.net/
+
+## Install / setup
+Download a prebuilt, TCK-certified OpenJDK (Eclipse Temurin) for your platform from https://adoptium.net/ ("Download Temurin"). Verify the install:
+
+```bash
+java -version
+javac -version
+```
+
+## Core concepts
+- Bytecode + JIT: source compiles to `.class` bytecode; the JVM interprets then JIT-compiles hot paths to native code.
+- The JVM is a spec; OpenJDK is the reference implementation and Temurin is a certified distribution of it.
+- Automatic memory management with a garbage collector (G1 by default on recent JDKs; alternatives like ZGC exist).
+- LTS release lines (e.g. JDK 8, 11, 17, 21) get extended support; non-LTS releases are shorter-lived.
+- The classpath/module path locate compiled classes and dependencies; the Java Platform Module System organizes modules.
+- "Write once, run anywhere": the same bytecode runs on any conformant JVM/OS.
+
+## Best practices
+- Target an LTS release (e.g. 17 or 21) for production; check active versions at https://docs.oracle.com/en/java/javase/.
+- Use a certified distribution (Temurin) for production to ensure TCK compliance.
+- Size the heap explicitly (`-Xms`/`-Xmx`) for predictable memory behavior in containers.
+- Select a GC appropriate to latency vs throughput needs rather than relying solely on defaults.
+
+## Common pitfalls
+- Running an unsupported/EOL JDK → upgrade to a supported LTS line.
+- Leaving heap unbounded in containers → set `-Xmx` (or container-aware flags) to avoid OOM kills.
+- Confusing the JRE-only runtime with the full JDK when you need `javac`/tooling → install the JDK.
+
+## Examples
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello from the JVM");
+    }
+}
+// javac Main.java && java Main
+```
+
+## Further reading
+- Java SE documentation: https://docs.oracle.com/en/java/javase/
+- OpenJDK project: https://openjdk.org/
+
+## Related skills
+- ../dotnet — comparable managed runtime on the .NET platform
+- ../beam — alternative VM (Erlang/Elixir) for concurrent systems

package/skills/stacks/runtime/node/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: node
+description: Node.js — the standard cross-platform JavaScript/TypeScript server runtime built on V8; consult for server/CLI/tooling work in JS.
+domain: stack
+category: runtime
+tags: [nodejs, javascript, typescript, v8, runtime, npm]
+official_sources:
+  - https://nodejs.org/docs/latest/api/
+  - https://github.com/nodejs/node
+verified: 2026-06-16
+---
+
+# Node.js
+
+## Overview
+Node.js is an open-source, cross-platform JavaScript runtime environment built on the V8 engine. It runs JavaScript (and, via loaders/transpilers, TypeScript) outside the browser to build servers, CLIs, and tooling. Read this when choosing or configuring the runtime for a JS/TS backend, scripts, or build tooling. The project is governed under the OpenJS Foundation.
+
+## Official sources
+- Docs: https://nodejs.org/docs/latest/api/
+- Repo: https://github.com/nodejs/node
+- Install / download: https://nodejs.org/en/download
+
+## Install / setup
+The official download page provides prebuilt installers and binaries plus a version-manager flow. To verify a manual install, download the platform installer/binary from the download page, then confirm:
+
+```bash
+node --version
+npm --version
+```
+
+For multiple versions, the download page recommends a Node version manager (e.g. `nvm`); follow the exact script shown on https://nodejs.org/en/download/package-manager.
+
+## Core concepts
+- Single-threaded event loop with non-blocking async I/O — long synchronous work blocks all requests.
+- CommonJS (`require`) and ECMAScript Modules (`import`); `.mjs`/`"type": "module"` select ESM behavior.
+- Built-in core modules (`fs`, `http`, `path`, `crypto`, `worker_threads`, etc.) documented in the API reference.
+- `npm` is the bundled package manager; `package.json` declares dependencies, scripts, and module type.
+- Release lines: even-numbered majors become Long Term Support (LTS); odd majors are "Current" only.
+- `worker_threads` and the cluster model offload CPU-bound work off the main event loop.
+
+## Best practices
+- Pin to an active LTS release for production stability (see https://nodejs.org/en/about/previous-releases).
+- Keep CPU-heavy tasks off the event loop using worker threads or external services.
+- Commit a lockfile (`package-lock.json`) and prefer `npm ci` for reproducible installs.
+- Handle async errors explicitly; attach handlers for `unhandledRejection`/`uncaughtException` only for logging and graceful shutdown.
+
+## Common pitfalls
+- Blocking the event loop with synchronous/CPU-bound code → offload to worker threads or break work into async chunks.
+- Mixing CommonJS and ESM incorrectly (e.g. `require` of an ESM-only package) → align `"type"` and import style per the modules docs.
+- Relying on an end-of-life Node version → track the release schedule and upgrade to a supported LTS.
+
+## Examples
+```js
+import http from 'node:http';
+
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('Hello from Node.js');
+});
+
+server.listen(3000, () => console.log('listening on :3000'));
+```
+
+## Further reading
+- API reference: https://nodejs.org/docs/latest/api/
+- Release schedule: https://nodejs.org/en/about/previous-releases
+
+## Related skills
+- ../bun — alternative JS/TS runtime and toolkit
+- ../deno — secure JS/TS runtime with built-in tooling

package/skills/stacks/runtime/pypy/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: pypy
+description: PyPy — a fast, compliant alternative Python implementation with a tracing JIT. Consult when CPython performance is a bottleneck for long-running Python.
+domain: stack
+category: runtime
+tags: [pypy, python, jit, runtime, rpython, performance]
+official_sources:
+  - https://doc.pypy.org/
+  - https://github.com/pypy/pypy
+verified: 2026-06-16
+---
+
+# PyPy
+
+## Overview
+PyPy is a fast and compliant alternative implementation of the Python language, built with the RPython framework. Its tracing just-in-time (JIT) compiler can make long-running, CPU-bound pure-Python code substantially faster than CPython. Read this when CPython performance is the bottleneck and the workload is dominated by Python-level code rather than C extensions.
+
+## Official sources
+- Docs: https://doc.pypy.org/
+- Repo: https://github.com/pypy/pypy
+- Install / download: https://pypy.org/download.html
+
+## Install / setup
+PyPy distributes pre-compiled binaries per platform/architecture from https://pypy.org/download.html (hosted at downloads.python.org). Download and extract the build for your OS, then verify:
+
+```bash
+pypy3 --version
+pypy3 -m ensurepip
+pypy3 -m pip install -r requirements.txt
+```
+
+On macOS, the download page notes signed packages are also available via Homebrew.
+
+## Core concepts
+- Tracing JIT: PyPy compiles hot loops to machine code at runtime, speeding up repeated Python-level execution.
+- High CPython compatibility: PyPy3 targets a specific CPython language version (e.g. PyPy3.11) and runs most pure-Python code unchanged.
+- Built with RPython, a restricted subset of Python from which the interpreter and JIT are generated.
+- Best speedups come from long-running, CPU-bound, pure-Python workloads where the JIT can warm up.
+- `cpyext` provides C-extension compatibility, but C-API-heavy code can run slower than on CPython.
+
+## Best practices
+- Benchmark your actual workload before committing — PyPy helps most on long-running pure-Python hot loops.
+- Match the PyPy3 release to the CPython language version your code targets.
+- Prefer pure-Python or PyPy-friendly libraries; minimize reliance on heavy C-extension paths.
+- Allow JIT warm-up time; short scripts may not benefit and can even start slower.
+
+## Common pitfalls
+- Expecting speedups on C-extension-heavy code → `cpyext` overhead can negate gains; test first.
+- Using PyPy for tiny short-lived scripts → JIT warm-up cost may outweigh benefits.
+- Assuming binary wheels built for CPython work directly → some packages need PyPy-specific builds.
+
+## Examples
+```python
+# Run with: pypy3 sum.py  — JIT accelerates the hot loop
+def total(n):
+    s = 0
+    for i in range(n):
+        s += i * i
+    return s
+
+print(total(10_000_000))
+```
+
+## Further reading
+- Documentation: https://doc.pypy.org/
+- Compatibility notes: https://doc.pypy.org/en/latest/cpython_differences.html
+
+## Related skills
+- ../python3 — the reference CPython runtime PyPy is compatible with

package/skills/stacks/runtime/python3/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: python3
+description: CPython — the reference Python 3 runtime for scripts, services, and data/ML work. Consult for installing, running, and packaging Python applications.
+domain: stack
+category: runtime
+tags: [python, python3, cpython, runtime, pip, venv]
+official_sources:
+  - https://docs.python.org/3/
+  - https://github.com/python/cpython
+verified: 2026-06-16
+---
+
+# Python 3 (CPython)
+
+## Overview
+CPython is the reference implementation of the Python 3 language, maintained by the Python core team. It is a dynamically typed, general-purpose runtime widely used for backend services, automation, scripting, and data/ML workloads. Read this when installing or configuring a Python runtime, managing dependencies, or isolating environments.
+
+## Official sources
+- Docs: https://docs.python.org/3/
+- Repo: https://github.com/python/cpython
+- Install / download: https://www.python.org/downloads/
+
+## Install / setup
+Download the official installer/source for your platform from https://www.python.org/downloads/ (current release shown there is the 3.14.x line). Verify and create an isolated environment:
+
+```bash
+python3 --version
+python3 -m venv .venv
+source .venv/bin/activate   # Windows: .venv\Scripts\activate
+python3 -m pip install -r requirements.txt
+```
+
+## Core concepts
+- The interpreter executes bytecode on the CPython VM; modules and packages organize importable code.
+- Virtual environments (`venv`) isolate per-project dependencies from the system interpreter.
+- `pip` installs packages from PyPI; `requirements.txt`/`pyproject.toml` declare dependencies.
+- The Global Interpreter Lock (GIL) serializes bytecode execution per process, limiting CPU-bound threading.
+- The standard library is extensive (`os`, `pathlib`, `asyncio`, `json`, `subprocess`, etc.).
+- `asyncio` provides cooperative concurrency for I/O-bound code.
+
+## Best practices
+- Always work inside a virtual environment; never `pip install` into the system Python.
+- Pin dependencies (lockfile or pinned `requirements.txt`) for reproducible installs.
+- Use a maintained Python version; check the status of releases at https://devguide.python.org/versions/.
+- For CPU-bound parallelism, use `multiprocessing` or native extensions rather than threads (due to the GIL).
+
+## Common pitfalls
+- Installing packages globally and creating version conflicts → use a per-project `venv`.
+- Expecting threads to speed up CPU-bound work → the GIL serializes them; use processes instead.
+- Calling `python`/`pip` ambiguously across Python 2/3 → use explicit `python3`/`python3 -m pip`.
+
+## Examples
+```python
+from http.server import HTTPServer, BaseHTTPRequestHandler
+
+class Handler(BaseHTTPRequestHandler):
+    def do_GET(self):
+        self.send_response(200)
+        self.end_headers()
+        self.wfile.write(b"Hello from Python")
+
+HTTPServer(("", 8000), Handler).serve_forever()
+```
+
+## Further reading
+- Standard library reference: https://docs.python.org/3/library/
+- Version status: https://devguide.python.org/versions/
+
+## Related skills
+- ../pypy — JIT alternative Python implementation

package/skills/stacks/styling/bootstrap/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: bootstrap
+description: Bootstrap is the popular HTML/CSS/JS framework of responsive grid layout, prebuilt components, and utility classes; consult when building responsive UIs, using the breakpoint grid, navbars, modals, dropdowns, customizing Sass variables, or wiring Popper-based JS plugins.
+domain: stack
+category: styling
+tags: [bootstrap, css, sass, responsive, grid, frontend, utility-classes]
+official_sources:
+  - https://getbootstrap.com/docs/5.3/getting-started/introduction/
+  - https://github.com/twbs/bootstrap
+  - https://getbootstrap.com/docs/5.3/getting-started/download/
+verified: 2026-06-17
+---
+
+# Bootstrap
+
+## Overview
+Bootstrap is a mobile-first, open-source CSS and JavaScript framework providing a responsive 12-column grid, prebuilt components (navbar, modal, dropdown, carousel), and a large utility-class API. It ships compiled CSS/JS plus Sass source for theming. Read this when building responsive layouts, composing UI from ready-made components, customizing the design tokens via Sass, or troubleshooting Popper-based interactive plugins.
+
+## Official sources
+- Docs: https://getbootstrap.com/docs/5.3/getting-started/introduction/
+- Repo: https://github.com/twbs/bootstrap
+- Install: https://getbootstrap.com/docs/5.3/getting-started/download/
+
+## Install / setup
+```bash
+npm install bootstrap@5.3.8
+```
+Command from the official download page (https://getbootstrap.com/docs/5.3/getting-started/download/). For dropdowns/tooltips/popovers also install `@popperjs/core`.
+
+## Core concepts
+- **Responsive grid** — `.container` > `.row` > `.col`; 12 columns with breakpoint infixes (`col-sm-`, `col-md-`, `col-lg-`, `col-xl-`, `col-xxl-`).
+- **Breakpoints** — six tiers (xs default, sm 576, md 768, lg 992, xl 1200, xxl 1400px) drive grid, display, and spacing utilities.
+- **Components** — markup + classes for navbar, card, modal, dropdown, accordion, toast; interactive ones need Bootstrap's JS bundle.
+- **Utility API** — atomic classes for spacing (`m-`/`p-`), display, flex, colors, borders; generatable from Sass maps.
+- **JavaScript plugins** — data-attribute (`data-bs-toggle`) or programmatic (`new bootstrap.Modal(el)`) init; Popper powers positioned overlays.
+- **Sass theming** — override `$primary`, `$grid-breakpoints`, etc. before `@import "bootstrap/scss/bootstrap"`.
+- **CSS variables** — components expose `--bs-*` custom properties for runtime theming.
+- **Color modes** — built-in light/dark via `data-bs-theme` attribute (v5.3+).
+
+## Best practices
+- Customize through Sass variables/maps, not by editing compiled CSS (https://getbootstrap.com/docs/5.3/customize/sass/).
+- Import only the Sass partials you use to shrink output; reuse utilities before writing custom CSS (https://getbootstrap.com/docs/5.3/customize/optimize/).
+- Include Popper before/with the JS bundle, or use `bootstrap.bundle.min.js` which bundles it (https://getbootstrap.com/docs/5.3/getting-started/javascript/).
+- Use semantic, accessible markup and ARIA per each component's docs (https://getbootstrap.com/docs/5.3/getting-started/accessibility/).
+
+## Common pitfalls
+- Dropdowns/tooltips silently do nothing → Popper missing; use the bundle JS or install `@popperjs/core`.
+- Nested columns misalign → must wrap child columns in their own `.row`; columns must be direct children of a row.
+- Custom Sass overrides ignored → set variables *before* importing Bootstrap, with `!default` removed on your side.
+
+## Examples
+```html
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+<div class="container">
+  <div class="row g-3">
+    <div class="col-12 col-md-6">
+      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#m">Open</button>
+    </div>
+  </div>
+</div>
+<div class="modal fade" id="m" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
+  <div class="modal-body">Hello</div>
+</div></div></div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+## Further reading
+- https://getbootstrap.com/docs/5.3/layout/grid/ — full grid system reference
+- https://getbootstrap.com/docs/5.3/utilities/api/ — generating and extending utility classes
+- https://icons.getbootstrap.com/ — official Bootstrap Icons set
+
+## Related skills
+- ../bulma — alternative Flexbox CSS framework, no JS
+- ../tailwind — utility-first CSS alternative to component classes

package/skills/stacks/styling/bulma/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: bulma
+description: Bulma is a free, JavaScript-free CSS framework built on Flexbox/CSS Grid with a readable class API and Sass customization; consult when building responsive layouts with columns, using ready-made components (navbar, card, modal markup), helper/modifier classes, or theming via Sass variables.
+domain: stack
+category: styling
+tags: [bulma, css, sass, flexbox, responsive, frontend, utility-classes]
+official_sources:
+  - https://bulma.io/documentation/
+  - https://github.com/jgthms/bulma
+  - https://bulma.io/documentation/start/installation/
+verified: 2026-06-17
+---
+
+# Bulma
+
+## Overview
+Bulma is an open-source, pure-CSS framework based on Flexbox (and CSS Grid). It outputs a single `bulma.css` with no JavaScript, exposing a human-readable class API (`column`, `button is-primary`, `notification`) plus Sass source for deep customization. Read this when building responsive grids with the columns system, applying component/modifier/helper classes, or theming Bulma through Sass variables and CSS custom properties.
+
+## Official sources
+- Docs: https://bulma.io/documentation/
+- Repo: https://github.com/jgthms/bulma
+- Install: https://bulma.io/documentation/start/installation/
+
+## Install / setup
+```bash
+npm install bulma
+```
+Command from the official installation page (https://bulma.io/documentation/start/installation/). Import the prebuilt CSS, or `@use "bulma/sass"` to build a customized version.
+
+## Core concepts
+- **Columns** — `.columns` container with `.column` children; auto-equal widths, sizes via `is-half`, `is-one-third`, `is-N`.
+- **Modifiers** — `is-*` / `has-*` classes alter color, size, state (`is-primary`, `is-large`, `is-loading`).
+- **Components** — styled markup for navbar, card, modal, dropdown, menu; behavior (toggling) is left to your own JS.
+- **Elements** — single-tag styles: button, box, notification, tag, title.
+- **Helpers** — utility classes for spacing (`m-3`, `p-2`), typography, colors, flex, visibility.
+- **Responsiveness** — mobile-first with `mobile`/`tablet`/`desktop`/`widescreen`/`fullhd` breakpoints; columns stack below the chosen tier.
+- **Sass theming (v1)** — customize via Sass variables and generated CSS variables (`--bulma-*`) for runtime theming.
+- **No JavaScript** — Bulma ships zero JS; interactivity is your responsibility.
+
+## Best practices
+- Customize by overriding Sass variables and `@use "bulma/sass" with (...)` rather than editing compiled CSS (https://bulma.io/documentation/customize/with-sass/).
+- Use the CSS-variables build (`--bulma-*`) for theming/dark mode without recompiling Sass (https://bulma.io/documentation/customize/with-css-variables/).
+- Combine helper classes before writing custom CSS for spacing and layout (https://bulma.io/documentation/helpers/).
+- Wire your own minimal JS for modal/dropdown/navbar-burger toggles; Bulma only styles them (https://bulma.io/documentation/components/).
+
+## Common pitfalls
+- Navbar burger / modal won't open → Bulma has no JS; add a click handler that toggles `is-active`.
+- `.column` has no width/gap effect → it must be a direct child of a `.columns` container.
+- Sass `with` overrides error → pass variables through the module system (`@use "bulma/sass" with (...)`), not plain `@import` reassignment.
+
+## Examples
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+<section class="section">
+  <div class="columns">
+    <div class="column is-one-third">
+      <div class="box">
+        <button class="button is-primary is-fullwidth js-toggle">Open</button>
+      </div>
+    </div>
+  </div>
+  <div class="modal" id="m">
+    <div class="modal-background"></div>
+    <div class="modal-content"><div class="box">Hello</div></div>
+  </div>
+</section>
+<script>
+  document.querySelector('.js-toggle').onclick = () =>
+    document.getElementById('m').classList.add('is-active');
+</script>
+```
+
+## Further reading
+- https://bulma.io/documentation/columns/ — responsive columns system
+- https://bulma.io/documentation/customize/ — Sass and CSS-variable customization
+- https://bulma.io/documentation/helpers/ — full helper/utility class reference
+
+## Related skills
+- ../bootstrap — component framework alternative that bundles JS plugins
+- ../tailwind — utility-first CSS alternative

package/skills/stacks/styling/chakra-ui/SKILL.md

@@ -0,0 +1,61 @@
+---
+name: chakra-ui
+description: Accessible React component system for building products fast, with theming and a CLI that adds component snippets; consult when styling React with Chakra.
+domain: stack
+category: styling
+tags: [chakra-ui, react, components, accessible, theming]
+official_sources:
+  - https://chakra-ui.com/docs
+  - https://github.com/chakra-ui/chakra-ui
+verified: 2026-06-16
+---
+
+# Chakra UI
+
+## Overview
+Chakra UI is a component system for building React products with speed, providing accessible, composable components and a theming system. Its CLI adds pre-built component snippets into your project, and apps are wrapped in a `Provider` for theme and styling context. Read this when building an accessible React UI with a consistent design system.
+
+## Official sources
+- Docs: https://chakra-ui.com/docs
+- Repo: https://github.com/chakra-ui/chakra-ui
+- Install / download: https://chakra-ui.com/docs/get-started/installation
+
+## Install / setup
+```bash
+npm i @chakra-ui/react @emotion/react
+```
+Then add snippets with `npx @chakra-ui/cli snippet add` and wrap your app in the `Provider` component, per the installation guide.
+
+## Core concepts
+- **Accessible component system**: composable React components designed for building SaaS products quickly with accessibility built in.
+- **Provider setup**: the app is wrapped in a `Provider` to supply theme and styling context.
+- **CLI snippets**: `@chakra-ui/cli snippet add` generates ready-to-use component code into your project.
+- **Theming / design tokens**: a configurable system for colors, typography, spacing, and other tokens.
+- **Style props**: pass style-related props directly to components for quick, consistent styling.
+
+## Best practices
+- Wrap the app in the `Provider` so all components receive theme and styling context.
+- Use the CLI to add snippets rather than hand-writing boilerplate component scaffolding.
+- Drive styling from the theme/design tokens for consistency instead of ad-hoc inline values.
+- Compose primitives and style props to build UI quickly while keeping accessibility intact.
+
+## Common pitfalls
+- Rendering components without the `Provider` → they lack theme/context and won't style or behave correctly; set up the provider first.
+- Missing the `@emotion/react` peer dependency → the documented install pairs it with `@chakra-ui/react`; omitting it breaks the styling runtime.
+
+## Examples
+```jsx
+import { Button } from "@chakra-ui/react";
+
+export default function App() {
+  return <Button colorPalette="teal">Click me</Button>;
+}
+```
+
+## Further reading
+- https://chakra-ui.com/docs/get-started/installation — framework setup
+- https://chakra-ui.com/docs — components and theming reference
+
+## Related skills
+- ../mui — alternative React component library
+- ../styled-components — the Emotion-style CSS-in-JS layer underneath