constella 0.1.0

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

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

@@ -0,0 +1,64 @@
+---
+name: unocss
+description: Instant on-demand atomic CSS engine with no core utilities, fully customizable via presets and rules; consult when building atomic CSS fast and small.
+domain: stack
+category: styling
+tags: [unocss, atomic-css, presets, vite, utility]
+official_sources:
+  - https://unocss.dev/
+  - https://github.com/unocss/unocss
+verified: 2026-06-16
+---
+
+# UnoCSS
+
+## Overview
+UnoCSS is an instant, on-demand atomic CSS engine. Unlike opinionated frameworks, its core ships no utilities; you define behavior through presets and rules, and it generates only the CSS your code uses. It is built for speed and a tiny footprint. Read this when you want a customizable atomic-CSS workflow or to bring your own design-system presets.
+
+## Official sources
+- Docs: https://unocss.dev/
+- Repo: https://github.com/unocss/unocss
+- Install / download: https://unocss.dev/integrations/vite
+
+## Install / setup
+```bash
+npm install -D unocss
+```
+The Vite plugin ships in the main `unocss` package and is imported from `unocss/vite` (per the Vite integration docs).
+
+## Core concepts
+- **On-demand atomic CSS**: utilities are generated only when used in your source, keeping output minimal.
+- **Rules**: define utilities as static entries (`m-1`) or dynamic RegExp matchers that accept arbitrary values.
+- **Presets**: bundled collections of rules, variants, and shortcuts that can be shared across projects or teams.
+- **Shortcuts**: combine multiple utilities into a single reusable class name.
+- **Variants**: transform or conditionally apply utilities (states, breakpoints, custom logic).
+- **Unopinionated core**: no built-in utilities by default — behavior comes entirely from your configured presets/rules.
+
+## Best practices
+- Compose your styling from presets (official or your own) rather than re-implementing common utilities by hand.
+- Use shortcuts to name and reuse recurring utility combinations instead of repeating long class strings.
+- Encapsulate a design system as a custom preset so it is shareable and versionable across projects.
+- Define dynamic rules with RegExp matchers to support arbitrary values without exploding your config.
+
+## Common pitfalls
+- Expecting utilities out of the box → the core is intentionally empty; add a preset (or define rules) or nothing is generated.
+- Building class names dynamically the engine can't scan → unused or unseen classes won't be generated; keep classes statically discoverable.
+
+## Examples
+```ts
+// uno.config.ts
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  presets: [presetUno()],
+  shortcuts: { btn: 'px-4 py-1 rounded inline-block' },
+});
+```
+
+## Further reading
+- https://unocss.dev/guide/ — concepts and configuration
+- https://unocss.dev/presets/ — official presets
+
+## Related skills
+- ../tailwind — utility-first framework that inspired UnoCSS
+- ../css-modules — alternative scoping-based styling approach

package/skills/stacks/styling/vanilla-extract/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: vanilla-extract
+description: Zero-runtime stylesheets authored in TypeScript that compile to static CSS with locally-scoped, type-safe styles; consult for type-safe CSS in builds.
+domain: stack
+category: styling
+tags: [vanilla-extract, css-in-js, typescript, zero-runtime, scoped]
+official_sources:
+  - https://vanilla-extract.style/documentation/getting-started/
+  - https://github.com/vanilla-extract-css/vanilla-extract
+verified: 2026-06-16
+---
+
+# vanilla-extract
+
+## Overview
+vanilla-extract lets you write styles in TypeScript (or JavaScript) using `.css.ts` files, generating static CSS at build time with zero runtime cost. Class names are locally scoped (like CSS Modules) and the whole API is type-safe. Read this when you want CSS-in-TS authoring without shipping a styling runtime.
+
+## Official sources
+- Docs: https://vanilla-extract.style/documentation/getting-started/
+- Repo: https://github.com/vanilla-extract-css/vanilla-extract
+- Install / download: https://vanilla-extract.style/documentation/getting-started/
+
+## Install / setup
+```bash
+npm install @vanilla-extract/css
+```
+Then add a bundler integration (Vite, esbuild, webpack, Next.js, Parcel, Rollup, or Gatsby) per the getting-started guide.
+
+## Core concepts
+- **Styles as `.css.ts` files**: author styles in TypeScript; the bundler extracts them into static CSS during build.
+- **Locally-scoped class names**: the `style` function returns a unique class name, isolating styles per file like CSS Modules.
+- **Zero runtime**: no styling library is shipped to the browser; output is plain CSS.
+- **Scoped CSS variables**: `createVar`/theme APIs produce scoped custom properties for theming.
+- **Type safety**: styles are typed via CSSType, so invalid properties and values are caught at compile time.
+- **Bundler integration required**: a build plugin transforms `.css.ts` files into emitted CSS.
+
+## Best practices
+- Reference the value returned by `style` as your class name rather than hardcoding generated names.
+- Use the theming/CSS-variable APIs (`createTheme`, `createVar`) to centralize design tokens type-safely.
+- Keep style definitions in `.css.ts` files so the bundler can statically extract them at build time.
+- Lean on the type checker to validate property names and values instead of relying on runtime checks.
+
+## Common pitfalls
+- Skipping the bundler integration → `.css.ts` files won't be transformed into CSS; install the matching plugin for your build tool.
+- Expecting runtime dynamic styling like traditional CSS-in-JS → styles are extracted at build time, so prefer variables/variants for dynamic values.
+
+## Examples
+```ts
+// styles.css.ts
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: 10,
+  display: 'flex',
+});
+```
+
+## Further reading
+- https://vanilla-extract.style/documentation/getting-started/ — setup and bundler guides
+- https://vanilla-extract.style/documentation/styling/ — styling API reference
+
+## Related skills
+- ../css-modules — the locally-scoped CSS model vanilla-extract builds on
+- ../styled-components — runtime CSS-in-JS alternative

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

@@ -0,0 +1,89 @@
+---
+name: vuetify
+description: Vuetify is a Vue component framework implementing Material Design with 80+ prebuilt components, a responsive grid, and a theming system; consult when scaffolding a Vue+Vuetify app, registering it with createVuetify, using v-* components like v-btn/v-data-table, configuring themes, or enabling tree-shaking via vite-plugin-vuetify.
+domain: stack
+category: styling
+tags: [vuetify, vue, material-design, components, frontend, sass, typescript]
+official_sources:
+  - https://vuetifyjs.com/en/getting-started/installation/
+  - https://github.com/vuetifyjs/vuetify
+  - https://www.npmjs.com/package/create-vuetify
+verified: 2026-06-17
+---
+
+# Vuetify
+
+## Overview
+Vuetify is an open-source Vue 3 component framework that implements Google's Material Design spec. It provides 80+ ready-made `v-*` components, a 12-column responsive grid, a configurable theme/color system, and SASS variables for customization. Read this when scaffolding a new Vue + Vuetify project, registering the plugin with `createVuetify`, composing UIs from Vuetify components, theming, or setting up auto-import/tree-shaking with the Vite plugin.
+
+## Official sources
+- Docs: https://vuetifyjs.com/en/getting-started/installation/
+- Repo: https://github.com/vuetifyjs/vuetify
+- Install: https://www.npmjs.com/package/create-vuetify
+
+## Install / setup
+```bash
+npm create vuetify@latest
+```
+Scaffolding command from the official installation guide (https://vuetifyjs.com/en/getting-started/installation/). To add to an existing app: `npm i vuetify`.
+
+## Core concepts
+- **createVuetify plugin** — instantiate with `createVuetify({ components, directives })` and register via `app.use(vuetify)`.
+- **Components** — 80+ `v-*` components (`v-btn`, `v-card`, `v-text-field`, `v-data-table`, `v-app-bar`) following Material Design.
+- **v-app / layout** — `<v-app>` is the required root; layout components (`v-app-bar`, `v-navigation-drawer`, `v-main`) compose the shell.
+- **Grid system** — `v-container` > `v-row` > `v-col` with breakpoint props (`cols`, `sm`, `md`, `lg`, `xl`).
+- **Theming** — light/dark themes and named color palettes configured in `createVuetify({ theme: {...} })`.
+- **Display/breakpoints** — `useDisplay()` composable and responsive props react to xs–xxl breakpoints.
+- **Directives** — opt-in directives (`v-ripple`, `v-intersect`) registered alongside components.
+- **Tree-shaking** — `vite-plugin-vuetify` auto-imports only used components and SASS for smaller bundles.
+
+## Best practices
+- Use `npm create vuetify@latest` to scaffold; it wires Vite, the plugin, and tree-shaking for you (https://vuetifyjs.com/en/getting-started/installation/).
+- Enable automatic component import + on-demand styles with `vite-plugin-vuetify` rather than importing everything (https://vuetifyjs.com/en/features/treeshaking/).
+- Define themes and brand colors centrally in `createVuetify({ theme })`, not per-component overrides (https://vuetifyjs.com/en/features/theme/).
+- Wrap the app in a single `<v-app>` and use `v-main` for routed content so layout components position correctly (https://vuetifyjs.com/en/features/application-layout/).
+
+## Common pitfalls
+- Components render unstyled / overlays mis-position → app not wrapped in `<v-app>`, or `vuetify/styles` not imported.
+- Bundle is huge → globally registering all components; switch to `vite-plugin-vuetify` auto-import.
+- Theme colors not applying → set them in `createVuetify({ theme })` config, not ad-hoc CSS, and reference via `color="primary"`.
+
+## Examples
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: { defaultTheme: 'dark' },
+})
+
+createApp(App).use(vuetify).mount('#app')
+```
+```vue
+<!-- App.vue -->
+<template>
+  <v-app>
+    <v-main>
+      <v-container>
+        <v-btn color="primary">Click me</v-btn>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+```
+
+## Further reading
+- https://vuetifyjs.com/en/components/all/ — full component API reference
+- https://vuetifyjs.com/en/features/theme/ — theme and color configuration
+- https://vuetifyjs.com/en/features/treeshaking/ — auto-import and bundle optimization
+
+## Related skills
+- ../bootstrap — non-Vue component framework alternative
+- ../tailwind — utility-first CSS often paired with Vue

package/skills/stacks/testing/cypress/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: cypress
+description: Cypress is a JavaScript end-to-end and component testing tool that runs in a real browser with a time-travel debugger, automatic waiting, and network stubbing; consult when writing E2E or component tests, using cy commands and fixtures, intercepting network requests, or configuring cypress.config.
+domain: stack
+category: testing
+tags: [cypress, e2e, javascript, browser-testing, component-testing, automation, web]
+official_sources:
+  - https://docs.cypress.io/app/get-started/why-cypress
+  - https://github.com/cypress-io/cypress
+  - https://www.npmjs.com/package/cypress
+verified: 2026-06-17
+---
+
+# Cypress
+
+## Overview
+Cypress is an open-source, JavaScript-based testing tool that runs end-to-end, component, and integration tests directly inside the browser alongside your app. It executes in the same run loop as the page, giving automatic waiting, time-travel snapshots, and direct DOM/network control. Read this when writing E2E or component tests, stubbing network calls, debugging flaky selectors, or configuring the Cypress runner.
+
+## Official sources
+- Docs: https://docs.cypress.io/app/get-started/why-cypress
+- Repo: https://github.com/cypress-io/cypress
+- Install: https://www.npmjs.com/package/cypress
+
+## Install / setup
+```bash
+npm install cypress --save-dev
+```
+Source: https://docs.cypress.io/app/get-started/install-cypress (open the runner with `npx cypress open`; requires Node.js 20.x, 22.x, or >=24.x).
+
+## Core concepts
+- **`cy` commands** — chained, retriable async actions like `cy.visit()`, `cy.get()`, `cy.click()`.
+- **Automatic retry/waiting** — queries retry until assertions pass, removing most manual waits.
+- **Selectors** — prefer `data-*` attributes via `cy.get('[data-cy=...]')` for stable targeting.
+- **Fixtures** — load static JSON test data with `cy.fixture()`.
+- **Network control** — `cy.intercept()` stubs, spies on, and asserts HTTP requests/responses.
+- **Component testing** — mount framework components in isolation (React, Vue, Angular, Svelte).
+- **Time-travel** — the runner snapshots each command for step-by-step DOM inspection.
+- **Config** — `cypress.config.js` defines `baseUrl`, specs, viewport, and env per testing type.
+
+## Best practices
+- Target elements with dedicated `data-*` attributes, not CSS/text (https://docs.cypress.io/app/core-concepts/best-practices).
+- Do not assign command return values to vars; chain or use aliases (https://docs.cypress.io/app/core-concepts/variables-and-aliases).
+- Set state via API/`cy.request` or tasks rather than UI for speed (https://docs.cypress.io/app/core-concepts/best-practices).
+- Avoid arbitrary `cy.wait(ms)`; wait on aliased routes instead (https://docs.cypress.io/api/commands/wait).
+
+## Common pitfalls
+- Mixing async/await with `cy` chains → use Cypress's command queue and `.then()`, not promises.
+- Tests depend on prior test state → make each spec independent and reset between tests.
+- Flaky `cy.wait(5000)` sleeps → `cy.intercept` a route, alias it, and `cy.wait('@alias')`.
+
+## Examples
+```js
+describe('home page', () => {
+  it('loads and shows the heading', () => {
+    cy.visit('/');
+    cy.get('[data-cy=heading]').should('contain', 'Welcome');
+  });
+});
+```
+
+## Further reading
+- https://docs.cypress.io/api/table-of-contents — full command and assertion API
+- https://docs.cypress.io/app/core-concepts/best-practices — official best-practices guide
+
+## Related skills
+- ../playwright — alternative cross-browser E2E framework with multi-context support
+- ../selenium — WebDriver-based browser automation across languages
+- ../puppeteer — lower-level Chrome/Firefox automation library