constellai 0.3.0

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

package/skills/stacks/styling/css-modules/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: css-modules
+description: CSS files whose class and animation names are scoped locally by default; consult when isolating component styles without naming collisions.
+domain: stack
+category: styling
+tags: [css-modules, css, scoping, components, build]
+official_sources:
+  - https://github.com/css-modules/css-modules
+verified: 2026-06-16
+---
+
+# CSS Modules
+
+## Overview
+A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. When imported into JavaScript, it exports a mapping from the local names you wrote to the unique, globally-safe names the build generated. This prevents styles in one file from leaking and affecting the rest of the project. Read this when you want component-scoped CSS without adopting a CSS-in-JS runtime.
+
+## Official sources
+- Docs: https://github.com/css-modules/css-modules
+- Repo: https://github.com/css-modules/css-modules
+
+## Core concepts
+- **Local scope by default**: every class/animation name is rewritten to a unique identifier, so names are isolated per file and cannot collide globally.
+- **JS import mapping**: importing a `.module.css` file yields an object mapping your written class names to the generated names you apply in markup.
+- **Composition**: a class can `composes:` from another class (same file or imported) to reuse and combine styles without duplicating declarations.
+- **Explicit global escape hatch**: `:global(...)` opts specific selectors out of local scoping when you genuinely need a global rule.
+- **Build-tool feature**: CSS Modules is a transformation applied by your bundler/loader, not a runtime library.
+
+## Best practices
+- Keep one module per component so local names map cleanly to that component's markup.
+- Use `composes` to share base styles instead of repeating declarations across modules.
+- Reserve `:global` for the rare cases that truly require global selectors; default to local scope.
+- Reference classes through the imported object (`styles.button`) rather than hardcoding the generated names.
+
+## Common pitfalls
+- Writing plain global selectors expecting them to be scoped → only locally-scoped class/animation names are rewritten; element and `:global` selectors stay global.
+- Hardcoding generated class names in HTML → names are build-generated and may change; always go through the imported mapping object.
+
+## Examples
+```css
+/* submit-button.module.css */
+.normal { background: white; }
+.error { composes: normal; color: red; }
+```
+```js
+import styles from "./submit-button.module.css";
+element.innerHTML = `<button class="${styles.error}">Submit</button>`;
+```
+
+## Further reading
+- https://github.com/css-modules/css-modules — local scope, composition, naming, theming docs
+
+## Related skills
+- ../vanilla-extract — locally-scoped styles authored in TypeScript
+- ../sass — preprocessor that pairs well with CSS Modules

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

@@ -0,0 +1,60 @@
+---
+name: mui
+description: Material UI — comprehensive React component library implementing Google's Material Design with theming and Emotion styling; consult for prebuilt MUI components.
+domain: stack
+category: styling
+tags: [mui, material-ui, react, components, emotion]
+official_sources:
+  - https://mui.com/material-ui/
+  - https://github.com/mui/material-ui
+verified: 2026-06-16
+---
+
+# Material UI (MUI)
+
+## Overview
+Material UI is a comprehensive React component library that implements Google's Material Design. It provides a large set of accessible, themeable components and ships with Emotion as the default styling engine. Read this when building a React UI on a complete, batteries-included component system with a centralized theme.
+
+## Official sources
+- Docs: https://mui.com/material-ui/
+- Repo: https://github.com/mui/material-ui
+- Install / download: https://mui.com/material-ui/getting-started/installation/
+
+## Install / setup
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+```
+
+## Core concepts
+- **Component library**: a broad catalog of ready-made React components (buttons, inputs, layout, navigation, data display).
+- **Theming**: a central theme object configures palette, typography, spacing, and breakpoints across all components.
+- **`sx` prop**: apply one-off, theme-aware style overrides inline on any MUI component.
+- **Default Emotion engine**: styles are powered by Emotion (`@emotion/react`/`@emotion/styled`) by default.
+- **`styled()` utility**: create custom styled components that read from the MUI theme.
+
+## Best practices
+- Centralize design decisions in a theme and wrap the app in a theme provider so components stay consistent.
+- Use the `sx` prop for small local overrides and `styled()` for reusable custom components.
+- Reference theme tokens (palette, spacing) rather than hardcoding colors and pixel values.
+- Pick the documented styling engine setup (Emotion by default) and stay consistent across the codebase.
+
+## Common pitfalls
+- Forgetting the Emotion peer packages → the default install requires `@emotion/react` and `@emotion/styled`; omitting them breaks styling.
+- Overriding styles with high-specificity custom CSS instead of the theme/`sx` → fights the system and creates inconsistency; prefer theme tokens and `sx`.
+
+## Examples
+```jsx
+import Button from '@mui/material/Button';
+
+export default function App() {
+  return <Button variant="contained">Hello world</Button>;
+}
+```
+
+## Further reading
+- https://mui.com/material-ui/getting-started/ — getting started and usage
+- https://mui.com/material-ui/customization/theming/ — theming guide
+
+## Related skills
+- ../chakra-ui — alternative accessible React component library
+- ../shadcn-ui — copy-in component approach on Tailwind + Radix

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

@@ -0,0 +1,63 @@
+---
+name: sass
+description: CSS preprocessor adding variables, nesting, partials, mixins, and functions that compile to plain CSS; consult when authoring maintainable stylesheets.
+domain: stack
+category: styling
+tags: [sass, scss, css, preprocessor, dart-sass]
+official_sources:
+  - https://sass-lang.com/documentation/
+  - https://github.com/sass/dart-sass
+verified: 2026-06-16
+---
+
+# Sass
+
+## Overview
+Sass is a CSS preprocessor that extends CSS with variables, nesting, partials, mixins, inheritance, and functions, then compiles down to standard CSS. Dart Sass is the canonical, primary implementation of the language. Read this when you want structured, reusable stylesheets that still ship as plain CSS.
+
+## Official sources
+- Docs: https://sass-lang.com/documentation/
+- Repo: https://github.com/sass/dart-sass
+- Install / download: https://sass-lang.com/install/
+
+## Install / setup
+```bash
+npm install -g sass
+```
+The npm package is the pure-JavaScript build (slower than the native options); Homebrew (`brew install sass/sass/sass`) and Chocolatey (`choco install sass`) are also documented on the install page.
+
+## Core concepts
+- **Variables**: store reusable values (colors, fonts, sizes) and reference them throughout stylesheets.
+- **Nesting**: nest selectors to mirror HTML structure, reducing repetition (use sparingly to avoid over-specific selectors).
+- **Partials & `@use`/`@forward`**: split styles into underscore-prefixed partial files and load them as modules with namespacing.
+- **Mixins**: reusable groups of declarations invoked with `@include`, optionally parameterized.
+- **Functions & operators**: built-in and custom functions plus math operators compute values at compile time.
+- **Two syntaxes**: `.scss` (CSS-superset, most common) and the indented `.sass` syntax.
+
+## Best practices
+- Prefer the module system (`@use` / `@forward`) over the deprecated `@import` for predictable namespacing and scoping.
+- Keep nesting shallow to avoid generating overly specific, hard-to-override selectors.
+- Organize code into small partials and compose them, rather than one large stylesheet.
+- Use the native/embedded Sass binary for speed in builds where compile time matters; the npm pure-JS build is slower.
+
+## Common pitfalls
+- Relying on `@import` → it is deprecated in Dart Sass; migrate to `@use`/`@forward` for module-scoped variables and mixins.
+- Deeply nesting selectors → produces high-specificity CSS that is brittle and difficult to override.
+
+## Examples
+```scss
+$primary: #3366ff;
+
+.button {
+  background: $primary;
+  &:hover { background: darken($primary, 10%); }
+}
+```
+
+## Further reading
+- https://sass-lang.com/documentation/ — full language reference
+- https://sass-lang.com/documentation/at-rules/use/ — the module system
+
+## Related skills
+- ../css-modules — locally-scoped CSS that pairs with Sass
+- ../tailwind — utility-first alternative styling approach

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

@@ -0,0 +1,58 @@
+---
+name: shadcn-ui
+description: Accessible React components you copy into your project (built on Tailwind + Radix) via a CLI rather than installing as a dependency; consult for owned UI code.
+domain: stack
+category: styling
+tags: [shadcn-ui, react, tailwind, radix, components]
+official_sources:
+  - https://ui.shadcn.com/docs
+  - https://github.com/shadcn-ui/ui
+verified: 2026-06-16
+---
+
+# shadcn/ui
+
+## Overview
+shadcn/ui is a set of beautifully-designed, accessible React components and a code-distribution platform. Rather than installing a component package, you use a CLI to copy component source directly into your project, so you own and can freely modify the code. Components are built on Tailwind CSS and Radix primitives. Read this when you want full ownership of your UI component code.
+
+## Official sources
+- Docs: https://ui.shadcn.com/docs
+- Repo: https://github.com/shadcn-ui/ui
+- Install / download: https://ui.shadcn.com/docs/installation
+
+## Install / setup
+```bash
+pnpm dlx shadcn@latest init
+```
+The init command scaffolds configuration (npm, yarn, and bun equivalents are documented). Add individual components afterward with `shadcn@latest add <component>`.
+
+## Core concepts
+- **Copy-in, not a dependency**: the CLI writes component source into your repo; you maintain it yourself instead of upgrading a package.
+- **Tailwind + Radix foundation**: styling uses Tailwind utilities and behavior/accessibility comes from Radix primitives.
+- **CLI workflow**: `init` sets up the project, `add` brings in specific components on demand.
+- **Full ownership / open code**: because the code lives in your project, you can edit any component to fit your needs.
+- **Framework support**: works with frameworks such as Next.js, Vite, React Router, Astro, and TanStack Start.
+
+## Best practices
+- Run `init` once to establish config and conventions before adding components.
+- Add only the components you need with the `add` command rather than pulling in everything.
+- Treat copied components as your own source — review and adapt them instead of expecting external updates.
+- Keep Tailwind tokens/theme aligned so copied components match the rest of your design system.
+
+## Common pitfalls
+- Expecting automatic upstream upgrades like an npm package → components are copied into your project; you own maintenance and must re-pull manually for updates.
+- Skipping `init` and adding components first → the project lacks the required config/conventions the components rely on.
+
+## Examples
+```bash
+pnpm dlx shadcn@latest init
+pnpm dlx shadcn@latest add button
+```
+
+## Further reading
+- https://ui.shadcn.com/docs/installation — framework-specific setup
+- https://ui.shadcn.com/docs/components — component catalog
+
+## Related skills
+- ../tailwind — the utility framework shadcn/ui styles with
+- ../mui — alternative prebuilt React component library

package/skills/stacks/styling/styled-components/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: styled-components
+description: CSS-in-JS for React using tagged template literals to attach scoped styles to components; consult when styling React with co-located CSS.
+domain: stack
+category: styling
+tags: [styled-components, css-in-js, react, theming, ssr]
+official_sources:
+  - https://styled-components.com/docs
+  - https://github.com/styled-components/styled-components
+verified: 2026-06-16
+---
+
+# styled-components
+
+## Overview
+styled-components is a CSS-in-JS library for React that lets you write actual CSS in tagged template literals, producing React components with their styles attached. It removes the mapping between components and styles and scopes CSS automatically. Read this when styling React (including Server Components, client components, and SSR) with co-located styles.
+
+## Official sources
+- Docs: https://styled-components.com/docs
+- Repo: https://github.com/styled-components/styled-components
+- Install / download: https://styled-components.com/docs/basics#installation
+
+## Install / setup
+```bash
+npm install styled-components
+```
+
+## Core concepts
+- **Tagged template literals**: `styled.button\`...\`` creates a React component whose CSS lives in the template string, automatically generating unique class names.
+- **Adapting based on props**: interpolated functions receive the component's props (e.g. `$primary`) so styles can change dynamically per render.
+- **Extending styles**: `styled(Existing)\`...\`` builds a new component that inherits another's styles and overrides specific declarations.
+- **`.attrs`**: attach static or computed props/attributes to a styled component before it renders.
+- **`keyframes`**: generates scoped animation names to avoid collisions; pair with the `css` helper for code-splitting compatibility.
+
+## Best practices
+- Prefix transient props (`$primary`) so they drive styling without being forwarded to the DOM.
+- Reuse styles by extending existing styled components rather than duplicating declarations.
+- Define `keyframes` once and reference it, keeping animations scoped and collision-free.
+- Provide theme values through a theme provider so colors and spacing stay consistent across components.
+
+## Common pitfalls
+- Defining `styled(...)` components inside a render function → a new component identity each render hurts performance and can break state; define them at module scope.
+- Forwarding non-standard props to DOM elements → use transient `$` props or `.attrs` so invalid attributes don't leak into the HTML.
+
+## Examples
+```jsx
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: ${props => props.$primary ? 'palevioletred' : 'white'};
+  color: ${props => props.$primary ? 'white' : 'palevioletred'};
+  padding: 0.5em 1em;
+`;
+```
+
+## Further reading
+- https://styled-components.com/docs/basics — core usage guide
+- https://styled-components.com/docs/advanced — theming, SSR, and refs
+
+## Related skills
+- ../vanilla-extract — zero-runtime alternative authored in TypeScript
+- ../tailwind — utility-first alternative to CSS-in-JS

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

@@ -0,0 +1,59 @@
+---
+name: tailwind
+description: Utility-first CSS framework that styles UI from small composable classes in markup; consult when building or theming with Tailwind.
+domain: stack
+category: styling
+tags: [tailwind, css, utility-first, vite, design-system]
+official_sources:
+  - https://tailwindcss.com/docs
+  - https://github.com/tailwindlabs/tailwindcss
+verified: 2026-06-16
+---
+
+# Tailwind CSS
+
+## Overview
+Tailwind CSS is a utility-first CSS framework: instead of writing custom stylesheets, you compose UI from small single-purpose classes (`flex`, `pt-4`, `text-3xl`) applied directly in markup. It is designed for rapid UI development and produces only the CSS your project actually uses. Read this when scaffolding styling, theming, or migrating an app to Tailwind.
+
+## Official sources
+- Docs: https://tailwindcss.com/docs
+- Repo: https://github.com/tailwindlabs/tailwindcss
+- Install / download: https://tailwindcss.com/docs/installation
+
+## Install / setup
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+Then register the Vite plugin in `vite.config.ts` and add `@import "tailwindcss";` to your main CSS file (per the official installation guide).
+
+## Core concepts
+- **Utility-first**: build designs by combining many small classes in markup rather than authoring bespoke CSS rules.
+- **On-demand generation**: the engine scans your source files and emits only the utilities you actually use, keeping output small.
+- **Responsive & state variants**: prefixes like `md:`, `hover:`, `focus:`, and `dark:` apply utilities conditionally at breakpoints or interaction states.
+- **Theme tokens**: spacing, colors, typography, and breakpoints come from a configurable design-token scale you can extend.
+- **First-party plugin integration**: the `@tailwindcss/vite` plugin (and equivalents) wires Tailwind into your bundler's build process.
+
+## Best practices
+- Let the build scan real source files so unused utilities are purged automatically; avoid hand-maintaining a list of safe classes unless dynamic class names require it.
+- Extract repeated class clusters into components (or `@apply` in a CSS layer) rather than copying long class strings everywhere.
+- Customize via the theme/tokens so spacing and color stay consistent across the app instead of using arbitrary one-off values.
+- Use the documented responsive and state variants instead of writing custom media queries by hand.
+
+## Common pitfalls
+- Constructing class names from string concatenation at runtime → the scanner can't see them, so they get purged; use complete static class strings or a safelist.
+- Treating Tailwind as inline styles → it is design-token-constrained utilities; reaching for arbitrary values everywhere defeats the system's consistency.
+
+## Examples
+```html
+<h1 class="text-3xl font-bold underline">
+  Hello world!
+</h1>
+```
+
+## Further reading
+- https://tailwindcss.com/docs/installation — framework-specific setup guides
+- https://tailwindcss.com/docs/styling-with-utility-classes — core utility-first workflow
+
+## Related skills
+- ../shadcn-ui — component collection built on Tailwind + Radix
+- ../unocss — alternative on-demand atomic CSS engine