constella 0.1.0

package/skills/stacks/meta/remix/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: remix
+description: React meta-framework built on web fundamentals (nested routes, loaders/actions); note v2's successor is React Router v7. Consult for Remix apps.
+domain: stack
+category: meta
+tags: [react, ssr, web-standards, loaders, react-router]
+official_sources:
+  - https://remix.run/docs
+  - https://github.com/remix-run/remix
+verified: 2026-06-16
+---
+
+# Remix
+
+## Overview
+Remix is a React framework, by the remix-run team, focused on web standards (the Fetch API, forms, HTTP caching) and progressive enhancement, using nested routes with server `loader`/`action` functions for data flow. Read this when working on a Remix codebase or deciding between Remix and its successor. Important: the official v2 docs state that "the latest version of Remix is now React Router v7"; the `remix-run/remix` repo currently hosts Remix 3 (in beta as of mid-2026). Confirm which line a project targets before relying on version-specific details.
+
+## Official sources
+- Docs (v2): https://remix.run/docs
+- Repo: https://github.com/remix-run/remix
+- Install / quickstart (v2): https://remix.run/docs/en/main/start/quickstart
+
+## Install / setup
+```bash
+npx create-remix@latest
+```
+
+## Core concepts
+- **Nested routes.** The route hierarchy maps to nested UI; parent routes render layout around child route outlets, and each route can own its own data and error boundary.
+- **Loaders.** A route's `loader` runs on the server to provide data for that route on GET requests; the component reads it via `useLoaderData`.
+- **Actions.** A route's `action` runs on the server to handle mutations (typically form POSTs), pairing with HTML `<Form>` for progressive enhancement.
+- **Web standards first.** Remix builds on the Fetch `Request`/`Response`, forms, and HTTP semantics rather than bespoke abstractions.
+- **Server rendering + progressive enhancement.** Pages render on the server and work before/without client JS, then enhance once hydrated.
+
+## Best practices
+- **Decide your framework line first.** Per the official docs, new projects should generally adopt React Router v7 (Remix v2's successor); use the v2 docs only when maintaining an existing v2 app.
+- Co-locate **`loader`/`action`/component** in the route module so data and UI for a route live together.
+- Use Remix's **`<Form>`** and actions for mutations to get progressive enhancement and proper revalidation rather than manual client fetch wiring.
+- Lean on **web-standard `Request`/`Response`** objects in loaders/actions instead of framework-specific request shims.
+
+## Common pitfalls
+- Starting a brand-new project on Remix v2 without realizing it has moved to React Router v7 → check the official banner/docs and choose the current line deliberately.
+- Putting data-loading logic in client effects → move it to the route `loader` so it runs on the server with SSR and revalidation.
+- Confusing `remix-run/remix` (now Remix 3 beta) with the v2/React Router v7 lineage → verify the exact package and version a repo depends on.
+
+## Examples
+```tsx
+// app/routes/_index.tsx
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader() {
+  return { message: "Hello from the server" };
+}
+
+export default function Index() {
+  const { message } = useLoaderData<typeof loader>();
+  return <h1>{message}</h1>;
+}
+```
+
+## Further reading
+- React Router v7 (Remix's successor): https://reactrouter.com/
+- Remix 3 (beta) repo README: https://github.com/remix-run/remix
+
+## Related skills
+- ../nextjs — alternative React meta-framework
+- ../vite — Remix v2 uses Vite for its dev/build pipeline

package/skills/stacks/meta/sveltekit/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: sveltekit
+description: Svelte meta-framework — file routing, SSR/SSG/SPA, load functions, form actions, deploy adapters; consult when building or debugging a SvelteKit app.
+domain: stack
+category: meta
+tags: [svelte, ssr, file-routing, adapters, vite]
+official_sources:
+  - https://svelte.dev/docs/kit
+  - https://github.com/sveltejs/kit
+verified: 2026-06-16
+---
+
+# SvelteKit
+
+## Overview
+SvelteKit is the official application framework for Svelte (maintained by sveltejs), with the tagline "Web development, streamlined." It provides file-system routing, server-side rendering, data-loading and form-action conventions, and deployment adapters, built on top of Vite. Read this when scaffolding a SvelteKit app or reasoning about routing, load functions, or deployment targets.
+
+## Official sources
+- Docs: https://svelte.dev/docs/kit
+- Repo: https://github.com/sveltejs/kit
+- Install / create a project: https://svelte.dev/docs/kit/creating-a-project
+
+## Install / setup
+```bash
+npx sv create my-app
+```
+
+## Core concepts
+- **File-system routing.** Routes live under `src/routes`; `+page.svelte`, `+layout.svelte`, `+page.server.ts`, and `+server.ts` files define pages, layouts, server logic, and endpoints by convention.
+- **Load functions.** `load` functions (in `+page.js`/`+page.server.js` and layout equivalents) fetch data for a route; server `load` runs only on the server.
+- **Form actions.** Server `actions` handle form submissions with progressive enhancement.
+- **Rendering modes.** Routes can be server-rendered, prerendered (SSG), or run as an SPA, configurable per route.
+- **Adapters.** Deployment adapters target platforms such as Node, static hosting, Cloudflare, Netlify, and Vercel.
+- **Built on Vite.** The dev server and build pipeline use Vite, giving fast HMR and the Vite plugin ecosystem.
+
+## Best practices
+- Use the official **`sv create`** scaffolder to start a project, then `npm run dev` — this is the path the docs recommend.
+- Put server-only/data-fetching logic in **`load` functions** (server variants for secrets/DB access) rather than in components.
+- Use **form actions** with `<form>` for mutations to get progressive enhancement instead of hand-written client fetches.
+- Choose the **adapter** that matches your deployment target so the build output fits the platform.
+
+## Common pitfalls
+- Importing server-only code (secrets, DB clients) into universal modules → keep it in `*.server.*` files / server `load` so it never ships to the client.
+- Expecting browser APIs to exist during SSR → guard with the `browser` check from `$app/environment` or run them in lifecycle hooks.
+- Forgetting to install/configure an adapter for your host → add the matching deployment adapter before building for production.
+
+## Examples
+```svelte
+<!-- src/routes/+page.svelte -->
+<script>
+  export let data;
+</script>
+
+<h1>{data.message}</h1>
+```
+```js
+// src/routes/+page.server.js
+export function load() {
+  return { message: 'Hello from the server' };
+}
+```
+
+## Further reading
+- Introduction: https://svelte.dev/docs/kit/introduction
+- Adapters: https://svelte.dev/docs/kit/adapters
+
+## Related skills
+- ../nuxt — Vue meta-framework with a comparable model
+- ../astro — content-focused framework that also supports Svelte islands
+- ../vite — the build tool SvelteKit is built on

package/skills/stacks/meta/vite/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: vite
+description: Fast frontend build tool and dev server — native-ESM dev with instant HMR, optimized production builds; consult when scaffolding or configuring SPAs.
+domain: stack
+category: meta
+tags: [build-tool, dev-server, esm, hmr, bundler]
+official_sources:
+  - https://vite.dev/guide/
+  - https://github.com/vitejs/vite
+verified: 2026-06-16
+---
+
+# Vite
+
+## Overview
+Vite (by vitejs) is "next generation frontend tooling" — a build tool with two parts: a dev server that serves source over native ES modules with extremely fast Hot Module Replacement, and a production build command that bundles optimized static assets. It is framework-agnostic (templates for vanilla, React, Vue, Svelte, and more) and is the build layer under many meta-frameworks. Read this when scaffolding a single-page app or configuring builds, plugins, or the dev server.
+
+## Official sources
+- Docs / guide: https://vite.dev/guide/
+- Repo: https://github.com/vitejs/vite
+- Install / scaffolding: https://vite.dev/guide/#scaffolding-your-first-vite-project
+
+## Install / setup
+```bash
+npm create vite@latest
+```
+
+## Core concepts
+- **Native-ESM dev server.** In development Vite serves source files as native ES modules, so it does not bundle the whole app up front, enabling fast startup.
+- **Hot Module Replacement (HMR).** Edits update modules in place quickly without a full reload.
+- **Production build.** `vite build` produces optimized, bundled static assets (Vite uses Rolldown to bundle for production).
+- **Framework-agnostic templates.** Scaffolding offers templates for vanilla, React, Vue, Svelte, Solid, and others.
+- **Plugin API + JS API.** A typed Plugin API and programmatic JavaScript API let you extend and embed Vite.
+- **Dependency pre-bundling.** Vite pre-bundles dependencies to convert them to ESM and speed up dev page loads.
+
+## Best practices
+- Scaffold with **`npm create vite@latest`** and pick a template, as the official guide shows.
+- Run a supported **Node.js version (20.19+ or 22.12+)** per the docs; upgrade if a template warns it needs higher.
+- Use the **`public/`** folder for assets served as-is and `import` other assets so Vite can hash/optimize them.
+- Extend behavior through the **Plugin API** rather than patching the build manually.
+
+## Common pitfalls
+- Running on an unsupported Node.js version → install Node 20.19+/22.12+ (some templates require higher) as the docs state.
+- Expecting the dev server's unbundled behavior to mirror the production bundle exactly → test the output of `vite build` / `vite preview` before deploying.
+- Referencing static assets by a guessed path instead of importing them or placing them in `public/` → use imports or `public/` so paths resolve after build.
+
+## Examples
+```bash
+# Scaffold, then run the dev server
+npm create vite@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+## Further reading
+- Features: https://vite.dev/guide/features
+- Plugin API: https://vite.dev/guide/api-plugin
+
+## Related skills
+- ../sveltekit — meta-framework built on Vite
+- ../nextjs — React meta-framework (uses its own bundler, Turbopack)
+- ../astro — content framework built on Vite tooling

package/skills/stacks/mobile/android/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: android
+description: Native Android app development with Kotlin, Jetpack Compose, and Android Studio/Gradle; consult when building native Android apps, working with activities, the lifecycle, Jetpack libraries, Gradle builds, or publishing to Google Play.
+domain: stack
+category: mobile
+tags: [android, kotlin, jetpack-compose, android-studio, gradle, mobile]
+official_sources:
+  - https://developer.android.com/develop
+  - https://github.com/android
+  - https://developer.android.com/studio
+verified: 2026-06-17
+---
+
+# Android (native)
+
+## Overview
+Native Android development builds apps that run directly on the Android OS, written primarily in Kotlin (or Java) using the Android SDK, Jetpack libraries, and Jetpack Compose for UI, built with Gradle in Android Studio. Read this when creating a native Android app, working with activities and the lifecycle, adopting Compose, configuring Gradle, or preparing a release for Google Play.
+
+## Official sources
+- Docs: https://developer.android.com/develop
+- Repo: https://github.com/android
+- Install: https://developer.android.com/studio
+
+## Install / setup
+```bash
+# Install Android Studio from developer.android.com/studio, then create a project:
+# File > New > New Project > "Empty Activity" (Compose), or via Gradle wrapper:
+./gradlew assembleDebug
+```
+Android Studio is the official IDE and SDK manager (https://developer.android.com/studio); new projects are created through its New Project wizard and built with the Gradle wrapper.
+
+## Core concepts
+- **Activity & lifecycle** — an `Activity` is an entry point/screen with `onCreate`/`onStart`/`onResume`/`onPause`/etc. callbacks.
+- **Jetpack Compose** — modern declarative UI toolkit using `@Composable` functions and state; the recommended way to build UI.
+- **Jetpack libraries** — AndroidX components: ViewModel, Lifecycle, Room, Navigation, WorkManager, DataStore.
+- **Gradle build system** — `build.gradle(.kts)` defines dependencies, SDK levels, and product flavors.
+- **Manifest** — `AndroidManifest.xml` declares components, permissions, and `minSdk`/`targetSdk`.
+- **Intents** — messages to start activities/services or pass data between components.
+- **Resources & R class** — strings, layouts, drawables in `res/`, referenced via generated `R`.
+
+## Best practices
+- Use Kotlin and Jetpack Compose for new UI (https://developer.android.com/courses/android-basics-compose/course).
+- Follow recommended app architecture: UI layer + ViewModel + data layer with unidirectional data flow (https://developer.android.com/topic/architecture).
+- Keep work off the main thread with coroutines/Flow (https://developer.android.com/kotlin/coroutines).
+- Target the latest stable `targetSdk` and test on multiple API levels (https://developer.android.com/google/play/requirements/target-sdk).
+
+## Common pitfalls
+- Blocking the main thread with network/disk work → causes ANRs; use coroutines or WorkManager.
+- Leaking `Context`/`Activity` across config changes → hold state in `ViewModel`, not the Activity.
+- Hardcoding strings/dimensions → use `res/values` resources for localization and theming.
+
+## Examples
+```kotlin
+class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MaterialTheme { Greeting("Android") }
+        }
+    }
+}
+
+@Composable
+fun Greeting(name: String) {
+    Text(text = "Hello, $name!")
+}
+```
+
+## Further reading
+- https://developer.android.com/jetpack/compose — Jetpack Compose UI
+- https://developer.android.com/topic/architecture — recommended app architecture
+- https://kotlinlang.org/docs/android-overview.html — Kotlin for Android
+
+## Related skills
+- ../flutter — cross-platform toolkit that compiles to native Android
+- ../react-native — cross-platform mobile framework targeting Android
+- ../nativescript — native Android APIs from JavaScript

package/skills/stacks/mobile/flutter/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: flutter
+description: Flutter is Google's UI toolkit for building natively compiled iOS, Android, web, and desktop apps from a single Dart codebase; consult when scaffolding with flutter create, building widget trees, managing state, or debugging hot reload, pub packages, and platform builds.
+domain: stack
+category: mobile
+tags: [flutter, dart, mobile, ios, android, cross-platform, widgets]
+official_sources:
+  - https://docs.flutter.dev/
+  - https://github.com/flutter/flutter
+  - https://docs.flutter.dev/install
+verified: 2026-06-17
+---
+
+# Flutter
+
+## Overview
+Flutter is an open-source UI framework from Google for building natively compiled applications for mobile, web, and desktop from a single Dart codebase. It renders its own widgets via the Impeller/Skia engine rather than wrapping native controls, giving consistent UI across platforms. Read this when creating a Flutter app, composing widget trees, choosing a state-management approach, or debugging hot reload and `pub` dependencies.
+
+## Official sources
+- Docs: https://docs.flutter.dev/
+- Repo: https://github.com/flutter/flutter
+- Install: https://docs.flutter.dev/install
+
+## Install / setup
+```bash
+flutter create my_app
+cd my_app
+flutter run
+```
+From the official "Create a new Flutter app" reference at https://docs.flutter.dev/reference/create-new-app (install the SDK first per https://docs.flutter.dev/install).
+
+## Core concepts
+- **Everything is a widget** — UI is a tree of immutable widgets (layout, styling, and structure are all widgets).
+- **Stateless vs Stateful** — `StatelessWidget` for static UI; `StatefulWidget` + `State` for mutable, re-rendering UI.
+- **Hot reload** — inject changed source into the running Dart VM without losing app state.
+- **BuildContext & build()** — `build()` describes UI from current config/state; `setState()` triggers rebuilds.
+- **pubspec.yaml** — declares dependencies and assets; resolved with `flutter pub get`.
+- **Material & Cupertino** — first-party widget libraries for Android-style and iOS-style design.
+- **Dart** — typed, AOT-compiled language; sound null safety is standard.
+
+## Best practices
+- Prefer composition over deep inheritance; build small, reusable widgets (https://docs.flutter.dev/perf/best-practices).
+- Use `const` constructors to let Flutter skip rebuilds of unchanged subtrees (https://docs.flutter.dev/perf/best-practices).
+- Pick a state-management approach deliberately (Provider/Riverpod/Bloc) (https://docs.flutter.dev/data-and-backend/state-mgmt/options).
+- Run `flutter analyze` and `flutter test` in CI; follow Effective Dart (https://dart.dev/effective-dart).
+
+## Common pitfalls
+- Doing expensive work in `build()` → it can run every frame; cache results or hoist out of `build`.
+- Calling `setState()` after dispose or off the widget's `State` → guard with `mounted` checks.
+- Forgetting `flutter pub get` after editing `pubspec.yaml` → run it (IDEs often do this automatically).
+
+## Examples
+```dart
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+  @override
+  Widget build(BuildContext context) => const MaterialApp(
+        home: Scaffold(
+          body: Center(child: Text('Hello from Flutter')),
+        ),
+      );
+}
+```
+
+## Further reading
+- https://docs.flutter.dev/ui/widgets — widget catalog
+- https://dart.dev/guides — the Dart language
+- https://pub.dev/ — package registry for Flutter and Dart
+
+## Related skills
+- ../react-native — alternative cross-platform mobile framework (JS/React)
+- ../android — underlying native Android platform Flutter targets
+- ../ionic — web-tech cross-platform mobile alternative

package/skills/stacks/mobile/ionic/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: ionic
+description: Ionic is an open-source UI toolkit for building cross-platform mobile, desktop, and web apps from one web codebase (Angular, React, or Vue) running natively via Capacitor; consult when scaffolding with ionic start, using Ionic UI components, or wiring native device features.
+domain: stack
+category: mobile
+tags: [ionic, capacitor, angular, react, vue, mobile, web]
+official_sources:
+  - https://ionicframework.com/docs
+  - https://github.com/ionic-team/ionic-framework
+  - https://ionicframework.com/docs/intro/cli
+verified: 2026-06-17
+---
+
+# Ionic
+
+## Overview
+Ionic is an open-source UI toolkit for building cross-platform apps for mobile, desktop, and web from a single web-technology codebase, integrating with Angular, React, or Vue. UI is composed of framework-agnostic web components; native packaging and device APIs come from Capacitor. Read this when scaffolding an Ionic app, using its component library, theming, or bridging to native features.
+
+## Official sources
+- Docs: https://ionicframework.com/docs
+- Repo: https://github.com/ionic-team/ionic-framework
+- Install: https://ionicframework.com/docs/intro/cli
+
+## Install / setup
+```bash
+npm install -g @ionic/cli
+ionic start myApp tabs --type=angular --capacitor
+cd myApp
+ionic serve
+```
+Install command from https://ionicframework.com/docs/intro/cli; `ionic start` usage from https://ionicframework.com/docs/cli/commands/start (swap `--type=react` or `--type=vue` as needed).
+
+## Core concepts
+- **Web components** — `<ion-button>`, `<ion-list>`, etc., are framework-agnostic components usable from Angular/React/Vue.
+- **Capacitor** — the native runtime that packages the web app as iOS/Android and exposes device plugins (Camera, Filesystem, etc.).
+- **Adaptive (mode) styling** — components adapt to `ios` or `md` (Material) mode for platform-appropriate look and feel.
+- **Routing & navigation** — uses the host framework's router (Angular Router, React Router, Vue Router) plus `ion-router-outlet`.
+- **CSS variables / theming** — customize via CSS custom properties and the global theme.
+- **ionic CLI** — `start`, `serve`, `build`, `generate`, and `capacitor` subcommands.
+
+## Best practices
+- Use Capacitor (default for new apps) over legacy Cordova for native builds (https://ionicframework.com/docs/developing/starting).
+- Choose the framework integration matching your team (Angular/React/Vue) at `ionic start` time (https://ionicframework.com/docs/cli/commands/start).
+- Theme with CSS variables rather than overriding component internals (https://ionicframework.com/docs/theming/basics).
+- Lazy-load routes/pages to keep startup fast on devices (https://ionicframework.com/docs/angular/navigation).
+
+## Common pitfalls
+- Forgetting `npx cap sync` after installing native plugins → native projects miss the changes.
+- Heavy DOM/animation work on low-end devices → it's still a WebView; profile and virtualize long lists with your framework's virtual-scroll solution (Angular CDK, react-window, vue-virtual-scroller).
+- Mixing Cordova and Capacitor plugin assumptions → prefer Capacitor-native plugins.
+
+## Examples
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Home</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button expand="block">Tap me</ion-button>
+</ion-content>
+```
+
+## Further reading
+- https://ionicframework.com/docs/components — UI component reference
+- https://capacitorjs.com/docs — Capacitor native runtime and plugins
+- https://ionicframework.com/docs/theming/basics — theming with CSS variables
+
+## Related skills
+- ../react-native — alternative cross-platform mobile framework
+- ../nativescript — JS-to-native UI without a WebView
+- ../flutter — native-rendered cross-platform UI toolkit

package/skills/stacks/mobile/nativescript/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: nativescript
+description: NativeScript is an open-source framework for building truly native iOS and Android apps from JavaScript/TypeScript with direct access to native APIs (no WebView), usable plain or with Angular, Vue, React, Svelte, or SolidJS; consult when scaffolding with ns create or calling native platform APIs.
+domain: stack
+category: mobile
+tags: [nativescript, typescript, javascript, mobile, ios, android, native]
+official_sources:
+  - https://docs.nativescript.org/
+  - https://github.com/NativeScript/NativeScript
+  - https://docs.nativescript.org/setup/
+verified: 2026-06-17
+---
+
+# NativeScript
+
+## Overview
+NativeScript is an open-source framework for building truly native iOS and Android apps using JavaScript or TypeScript, rendering native UI components (not a WebView) and giving direct, synchronous access to native platform APIs. It works standalone or with Angular, Vue, React, Svelte, or SolidJS flavors. Read this when scaffolding a NativeScript app, calling iOS/Android APIs directly from JS, or wiring native UI.
+
+## Official sources
+- Docs: https://docs.nativescript.org/
+- Repo: https://github.com/NativeScript/NativeScript
+- Install: https://docs.nativescript.org/setup/
+
+## Install / setup
+```bash
+npm install -g nativescript
+ns create myCoolApp --template @nativescript/template-blank
+cd myCoolApp
+ns run android   # or: ns run ios
+```
+Install command from https://docs.nativescript.org/setup/windows; `ns create` template usage from https://docs.nativescript.org/guide/creating-a-project.
+
+## Core concepts
+- **Direct native API access** — call iOS (Objective-C/Swift) and Android (Java/Kotlin) APIs straight from JS via generated bindings.
+- **Native UI elements** — XML/markup maps to real native views (`<Label>`, `<Button>`, `<ListView>`), no DOM/WebView.
+- **Flavors** — author in plain JS/TS or with Angular, Vue, React, Svelte, or SolidJS bindings.
+- **ns CLI** — `create`, `run`, `build`, `debug`, `preview`, and `plugin` subcommands.
+- **Plugins** — npm packages wrapping native SDKs; installed with `ns plugin add`.
+- **Webpack & HMR** — bundled with webpack; hot module replacement during `ns run`.
+
+## Best practices
+- Pick a flavor that matches your team and scaffold with the right template (`--ng`, `--vue`, `--react`, etc.) (https://docs.nativescript.org/guide/creating-a-project).
+- Verify your toolchain with `ns doctor` before building (https://docs.nativescript.org/setup/).
+- Prefer maintained `@nativescript/*` plugins for native features (https://docs.nativescript.org/guide/development-workflow/using-packages).
+- Use TypeScript for type-safe access to native API typings; generate them with `ns typings ios`/`ns typings android` (https://docs.nativescript.org/guide/native-code/generate-typings).
+
+## Common pitfalls
+- Missing native SDKs/emulators → run `ns doctor` and follow the per-OS setup guide.
+- Treating it like web → there is no DOM or CSS cascade; layout uses NativeScript layout containers and a CSS subset.
+- Stale build artifacts after native changes → `ns clean`, then rebuild.
+
+## Examples
+```xml
+<!-- main-page.xml -->
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <StackLayout>
+    <Label text="Hello from NativeScript" />
+    <Button text="Tap" tap="{{ onTap }}" />
+  </StackLayout>
+</Page>
+```
+
+## Further reading
+- https://docs.nativescript.org/guide/marshalling/ — marshalling and calling native APIs
+- https://market.nativescript.org/ — plugins marketplace
+- https://docs.nativescript.org/setup/ — environment setup and `ns doctor`
+
+## Related skills
+- ../react-native — also renders native UI from JavaScript
+- ../ionic — web-tech cross-platform mobile alternative (Capacitor)
+- ../android — native Android APIs surfaced by NativeScript

package/skills/stacks/mobile/react-native/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: react-native
+description: React Native cross-platform mobile framework that builds native iOS and Android apps from React/JavaScript; consult when scaffolding, navigating, styling, debugging Metro/native modules, or shipping RN apps with Expo or the community CLI.
+domain: stack
+category: mobile
+tags: [react-native, react, mobile, ios, android, expo, javascript]
+official_sources:
+  - https://reactnative.dev/docs/getting-started
+  - https://github.com/facebook/react-native
+  - https://reactnative.dev/docs/environment-setup
+verified: 2026-06-17
+---
+
+# React Native
+
+## Overview
+React Native is an open-source framework from Meta for building native iOS and Android apps using React and JavaScript/TypeScript. UI is declared with React components that render to real native views (not a WebView). Read this when starting an RN project, wiring navigation, building native modules, or troubleshooting the Metro bundler and platform builds.
+
+## Official sources
+- Docs: https://reactnative.dev/docs/getting-started
+- Repo: https://github.com/facebook/react-native
+- Install: https://reactnative.dev/docs/environment-setup
+
+## Install / setup
+```bash
+npx @react-native-community/cli@latest init AwesomeProject
+```
+From the official "without a framework" guide at https://reactnative.dev/docs/getting-started-without-a-framework. The docs recommend a framework (Expo) for new apps via `npx create-expo-app@latest`.
+
+## Core concepts
+- **Components & JSX** — UI built from `View`, `Text`, `Image`, `ScrollView`, etc., instead of HTML elements.
+- **Metro bundler** — JS bundler that serves and hot-reloads your code; started with `npx react-native start`.
+- **Native modules / New Architecture** — TurboModules and Fabric (the New Architecture, default in RN 0.76+) bridge JS to native APIs via JSI.
+- **StyleSheet & Flexbox** — styling uses JS objects and Flexbox; no CSS cascade; values are unitless density-independent pixels.
+- **Platform code** — `Platform.OS`, `.ios.js`/`.android.js` file extensions, and `Platform.select` for per-OS branches.
+- **Hermes** — default JS engine optimized for RN startup and memory.
+- **Frameworks (Expo)** — recommended toolbox providing routing, builds (EAS), and OTA updates on top of RN.
+
+## Best practices
+- Prefer a framework like Expo for new apps unless you have unusual native constraints (https://reactnative.dev/docs/getting-started).
+- Use the New Architecture and keep RN/native deps aligned via the Upgrade Helper (https://reactnative.dev/docs/upgrading).
+- Use `FlatList`/`SectionList` for long lists instead of mapping inside `ScrollView` (https://reactnative.dev/docs/optimizing-flatlist-configuration).
+- Type your app with TypeScript; the default template ships TS (https://reactnative.dev/docs/typescript).
+
+## Common pitfalls
+- Stale Metro cache after dependency changes → restart with `npx react-native start --reset-cache`.
+- Mixing incompatible native lib versions → use the Upgrade Helper and run `cd ios && pod install` after native changes.
+- Assuming CSS units/cascade → RN styles are per-component JS objects with Flexbox defaults (`flexDirection: 'column'`).
+
+## Examples
+```tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.center}>
+      <Text>Hello from React Native</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+```
+
+## Further reading
+- https://reactnative.dev/docs/components-and-apis — built-in core components and APIs
+- https://reactnavigation.org/ — React Navigation, the standard routing library
+- https://docs.expo.dev/ — Expo framework, EAS builds, and OTA updates
+
+## Related skills
+- ../ionic — another web-tech cross-platform mobile stack (Capacitor)
+- ../flutter — alternative cross-platform native UI toolkit
+- ../nativescript — native UI from JS without a WebView

package/skills/stacks/mobile/xamarin/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: xamarin
+description: .NET MAUI is Microsoft's cross-platform framework (Xamarin's successor) for building native Android, iOS, macOS, and Windows apps from one C# and XAML codebase; consult when scaffolding with dotnet new maui, writing XAML/MVVM UI, or migrating from Xamarin.Forms.
+domain: stack
+category: mobile
+tags: [maui, xamarin, dotnet, csharp, xaml, mobile, cross-platform]
+official_sources:
+  - https://learn.microsoft.com/en-us/dotnet/maui/
+  - https://github.com/dotnet/maui
+  - https://dotnet.microsoft.com/en-us/apps/maui
+verified: 2026-06-17
+---
+
+# Xamarin / .NET MAUI
+
+## Overview
+.NET MAUI (Multi-platform App UI) is Microsoft's open-source framework for building native apps for Android, iOS, macOS, and Windows from a single C#/XAML codebase. It is the evolution and successor of Xamarin.Forms (Xamarin support ended May 1, 2024). Read this when starting a MAUI app, building XAML UI with MVVM/data binding, sharing code across platforms, or migrating a Xamarin.Forms project.
+
+## Official sources
+- Docs: https://learn.microsoft.com/en-us/dotnet/maui/
+- Repo: https://github.com/dotnet/maui
+- Install: https://dotnet.microsoft.com/en-us/apps/maui
+
+## Install / setup
+```bash
+dotnet workload install maui
+dotnet new maui -n MyMauiApp
+cd MyMauiApp
+dotnet build -t:Run -f net9.0-android
+```
+CLI creation from https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app (install the `.NET MAUI` workload / Visual Studio MAUI workload per https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation).
+
+## Core concepts
+- **Single project, multi-target** — one project targets `net*-android`, `net*-ios`, `net*-maccatalyst`, `net*-windows`.
+- **XAML + code-behind** — declarative UI in XAML paired with C# code-behind/handlers.
+- **MVVM & data binding** — `BindingContext`, `INotifyPropertyChanged`, and commands separate UI from logic.
+- **Handlers** — lightweight mapping from cross-platform controls to native views (replacing Xamarin renderers).
+- **Layouts & controls** — `Grid`, `StackLayout`, `CollectionView`, `Shell` for app structure and navigation.
+- **Dependency injection** — built-in DI registered in `MauiProgram.CreateMauiApp()`.
+- **Platform code** — conditional `#if ANDROID`/`IOS` and `Platforms/` folders for native specifics.
+
+## Best practices
+- Use MVVM with the .NET MAUI Community Toolkit's source generators for clean view models (https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/).
+- Prefer `CollectionView`/`Shell` over legacy `ListView`/manual navigation (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/).
+- Register services and pages via DI in `MauiProgram` (https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/dependency-injection).
+- Migrate Xamarin.Forms apps with the official upgrade guidance (https://learn.microsoft.com/en-us/dotnet/maui/migration/).
+
+## Common pitfalls
+- Blocking the UI thread → use `async`/`await` and `MainThread.BeginInvokeOnMainThread` for UI updates.
+- Forgetting the MAUI workload → builds fail; run `dotnet workload install maui`.
+- Assuming Xamarin custom renderers carry over → port them to MAUI handlers.
+
+## Examples
+```xml
+<!-- MainPage.xaml -->
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+  <VerticalStackLayout Padding="20" Spacing="10">
+    <Label Text="Hello, .NET MAUI!" FontSize="24" />
+    <Button Text="Click" Clicked="OnClicked" />
+  </VerticalStackLayout>
+</ContentPage>
+```
+
+## Further reading
+- https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/ — fundamentals: data binding (see also app-lifecycle, shell)
+- https://learn.microsoft.com/en-us/dotnet/maui/migration/ — migrating from Xamarin.Forms
+- https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/ — .NET MAUI Community Toolkit
+
+## Related skills
+- ../flutter — alternative single-codebase native cross-platform UI
+- ../react-native — JS/React cross-platform mobile framework
+- ../android — native Android target underneath MAUI