@andersseen/skills 0.0.1

package/skills/andersseen-icon/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: andersseen-icon
+description:
+  'Register and render SVG icons with @andersseen/icon. Load when using
+  registerIcons / registerAllIcons / getIcon / COMPONENT_ICONS, wiring the
+  and-icon element, or resolving "icon not showing" issues. COMPONENT_ICONS must
+  be registered whenever @andersseen/web-components is used. Trigger phrases:
+  icon, svg, registerIcons, and-icon, icon registry, icon not rendering.'
+---
+
+# @andersseen/icon — SVG icon registry
+
+Framework-agnostic SVG string registry: tree-shakable icon constants + runtime
+registration functions. Used internally by `and-icon` in
+`@andersseen/web-components`, and consumable standalone to render SVGs in any
+framework.
+
+## Install
+
+```bash
+npm i @andersseen/icon
+```
+
+## Core API
+
+```ts
+import {
+  registerIcons,
+  registerAllIcons,
+  getIcon,
+  hasIcon,
+  getRegisteredIconNames,
+  getRegisteredIconCount,
+} from '@andersseen/icon';
+```
+
+Verified behavior:
+
+- The registry is global (`window`/`globalThis`) under `__AND_ICONS_REGISTRY__`.
+- `registerIcons` merges entries into that global Map.
+- `getIcon(name)` returns an SVG string or `undefined` if not registered.
+
+## Setup options
+
+### Option A — register all icons (prototyping / small apps)
+
+```ts
+import { registerAllIcons } from '@andersseen/icon';
+registerAllIcons();
+```
+
+### Option B — tree-shakable selective registration (production recommended)
+
+```ts
+import {
+  registerIcons,
+  HOME,
+  CLOSE,
+  SEARCH,
+  COMPONENT_ICONS,
+} from '@andersseen/icon';
+
+// Icons required by and-* components — ALWAYS register when using web-components
+registerIcons(COMPONENT_ICONS);
+
+// Additional icons your app needs
+registerIcons({ home: HOME, close: CLOSE, search: SEARCH });
+```
+
+### COMPONENT_ICONS
+
+A pre-built record containing every icon that `@andersseen/web-components` uses
+internally (chevron, close, check, spinner, …). Always include it when using the
+web-components package.
+
+## Using registered icons
+
+```ts
+const svg = getIcon('home'); // SVG string or undefined
+
+if (!hasIcon('home')) {
+  console.warn('Icon "home" is not registered');
+}
+
+console.log(getRegisteredIconNames());
+console.log(getRegisteredIconCount());
+
+// Render inline in a framework
+// Angular:   <span [innerHTML]="getIcon('home')"></span>
+// Pure HTML: element.innerHTML = getIcon('home') ?? '';
+```
+
+## With and-icon (web component)
+
+After registration, use the icon by name via the `name` prop:
+
+```html
+<and-icon name="home" size="20"></and-icon>
+<and-icon name="sparkles" size="16" color="hsl(var(--primary))"></and-icon>
+<and-icon name="arrow-right" size="24" stroke-width="1.5"></and-icon>
+```
+
+## Naming convention
+
+Exported constants use `SCREAMING_SNAKE_CASE`; registration keys (and `name`
+prop values) use `kebab-case`.
+
+```ts
+import { ARROW_RIGHT, CHECK_CIRCLE, LOADING_SPINNER } from '@andersseen/icon';
+registerIcons({
+  'arrow-right': ARROW_RIGHT,
+  'check-circle': CHECK_CIRCLE,
+  'loading-spinner': LOADING_SPINNER,
+});
+```
+
+## Rules
+
+- Always register icons before rendering `and-icon` or calling `getIcon`.
+- In production prefer selective registration; avoid `registerAllIcons` outside
+  demos/prototypes.
+- Keep `and-icon name` exactly aligned with registry keys.
+- Do not inline random SVG literals when the registry can be used.
+- Register `COMPONENT_ICONS` whenever `@andersseen/web-components` is used.

package/skills/andersseen-layout/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: andersseen-layout
+description:
+  'Compose layout and typography with @andersseen/layout — a pure-CSS,
+  attribute-driven system using and-layout and and-text with @breakpoint
+  responsive modifiers. Load when building responsive page shells, grids, flex
+  layouts, spacing, or type scales without a utility framework. Trigger phrases:
+  and-layout, and-text, responsive grid, flex layout, spacing scale, typography,
+  cols, gap, and-layout attributes.'
+---
+
+# @andersseen/layout — attribute-driven layout & typography
+
+Pure CSS library — **no JavaScript runtime**. Attribute-driven layout
+composition and typography, framework-agnostic and mobile-first. HTML attributes
+are the single source of truth for layout.
+
+## Install
+
+```bash
+npm i @andersseen/layout
+```
+
+## Setup
+
+```ts
+import '@andersseen/layout/dist/layout.css';
+```
+
+## Breakpoints (mobile-first, min-width)
+
+| Name | Min-width |
+| ---- | --------- |
+| sm   | 640px     |
+| md   | 768px     |
+| lg   | 1024px    |
+| xl   | 1280px    |
+| 2xl  | 1536px    |
+
+## Responsive syntax
+
+Every modifier supports responsive variants using `@breakpoint`:
+
+```html
+<div and-layout="vertical vertical@sm horizontal@md gap:sm gap@lg:xl"></div>
+<p and-text="p-sm align:center align@md:left"></p>
+```
+
+Spacing scale: `none · xxxs · xxs · xs · sm · md · lg · xl · xxl · xxxl · auto`.
+
+## `and-layout`
+
+### Display / direction
+
+```html
+<div and-layout="horizontal"><!-- flex row --></div>
+<div and-layout="vertical"><!-- flex column --></div>
+<div and-layout="grid"><!-- display:grid --></div>
+```
+
+Both `horizontal` and `vertical` are responsive: `horizontal@md`, `vertical@lg`.
+
+### Flex alignment
+
+```
+align:start | end | center | baseline | stretch
+justify:start | end | center | between | around | evenly
+wrap:nowrap | wrap | wrap-reverse
+```
+
+### Gap
+
+```
+gap:{spacing}    gap-x:{spacing}    gap-y:{spacing}
+```
+
+### Grid columns
+
+Generates `repeat(N, minmax(0, 1fr))` for N in 1–12.
+
+```html
+<div and-layout="grid cols:1 cols@sm:2 cols@lg:3 gap:lg"></div>
+```
+
+### Grid column span
+
+Values 1–12 + `full` (span all columns).
+
+```html
+<div and-layout="grid cols:12">
+  <header and-layout="span:full">...</header>
+  <main and-layout="span:8 span@lg:9">...</main>
+  <aside and-layout="span:4 span@lg:3">...</aside>
+</div>
+```
+
+### Grid start/end
+
+`col-start:1`–`col-start:13`, `col-start:auto`; `col-end:1`–`col-end:13`,
+`col-end:auto`.
+
+### Padding / margin
+
+```
+p:{s}   p-t p-b p-l p-r p-x p-y : {s}
+m:{s}   m-t m-b m-l m-r m-x m-y : {s}
+```
+
+### Spacing scale
+
+| Token | Value    |     | Token | Value  |
+| ----- | -------- | --- | ----- | ------ |
+| none  | 0        |     | md    | 1rem   |
+| xxxs  | 0.125rem |     | lg    | 1.5rem |
+| xxs   | 0.25rem  |     | xl    | 2rem   |
+| xs    | 0.5rem   |     | xxl   | 3rem   |
+| sm    | 0.75rem  |     | xxxl  | 4rem   |
+|       |          |     | auto  | auto   |
+
+## `and-text` — typography
+
+### Semantic scale
+
+`h1 · h2 · h3 · h4 · h5 · h6 · p · p-sm · p-xs · caption`
+
+| Token   | Font size | Weight | Line-height |
+| ------- | --------- | ------ | ----------- |
+| h1      | 3.75rem   | 700    | 1.1         |
+| h2      | 3rem      | 700    | 1.1         |
+| h3      | 2.25rem   | 600    | 1.2         |
+| h4      | 1.875rem  | 600    | 1.2         |
+| h5      | 1.5rem    | 500    | 1.3         |
+| h6      | 1.25rem   | 500    | 1.3         |
+| p       | 1rem      | 400    | 1.5         |
+| p-sm    | 0.875rem  | 400    | 1.5         |
+| p-xs    | 0.75rem   | 400    | 1.5         |
+| caption | 0.75rem   | 400    | — (muted)   |
+
+### Alignment · weight · color (all responsive)
+
+```
+align:left | center | right | justify
+weight:thin | light | normal | medium | semibold | bold | extrabold | black
+color:primary | secondary | accent | muted | destructive | foreground | background
+```
+
+Color tokens map to CSS variables: `var(--color-primary)`,
+`var(--color-foreground)`, …
+
+## Usage examples
+
+### Responsive page shell
+
+```html
+<body and-layout="vertical gap:none">
+  <nav and-layout="horizontal justify:between align:center p-x:lg p-y:md">
+    <a and-text="h6 weight:bold">Logo</a>
+    <div and-layout="horizontal gap:sm">
+      <a and-text="p-sm">Home</a>
+      <a and-text="p-sm">Docs</a>
+    </div>
+  </nav>
+  <main and-layout="vertical gap:xl p:lg p@md:xxl">
+    <section and-layout="vertical gap:md">
+      <h1 and-text="h1 align:center align@md:left color:foreground">
+        Hero Title
+      </h1>
+      <p and-text="p align:center align@md:left color:muted">Subtitle text</p>
+    </section>
+    <div and-layout="grid cols:1 cols@sm:2 cols@lg:3 gap:lg">
+      <article and-layout="vertical gap:sm p:md">
+        <h2 and-text="h5 color:foreground">Card Title</h2>
+        <p and-text="p-sm color:muted">Card description</p>
+      </article>
+    </div>
+  </main>
+</body>
+```
+
+### 12-column grid
+
+```html
+<section and-layout="grid cols:12 gap:md">
+  <div and-layout="span:12 span@md:8">Main content</div>
+  <div and-layout="span:12 span@md:4">Sidebar</div>
+</section>
+```
+
+## Rules
+
+- Use `and-layout` and `and-text` as the primary composition mechanism.
+- Do not mix a utility CSS framework (Tailwind, Bootstrap) with `and-layout`
+  tokens on the same element.
+- Responsive tokens use the `@breakpoint` suffix: `cols@md:2`, `align@lg:left`.
+- Color tokens map to CSS custom properties — do not override with hardcoded
+  values.
+- `caption` already applies a muted color — do not combine with
+  `color:foreground`.

package/skills/andersseen-motion/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: andersseen-motion
+description:
+  'Add attribute-driven animations with @andersseen/motion — scroll/enter,
+  hover, and tap triggers via and-motion HTML attributes plus
+  initMotion/MotionController. Load when animating element entrances, hover/tap
+  feedback, staggered lists, or configuring duration/delay/easing. Respects
+  prefers-reduced-motion. Trigger phrases: animation, motion, and-motion,
+  fade-up, scroll animation, initMotion, entrance animation.'
+---
+
+# @andersseen/motion — attribute-driven animation engine
+
+Animate the web with HTML attributes + CSS keyframes and a lightweight JS
+controller. Triggers: `enter` (IntersectionObserver), `hover`, `tap`. Respects
+`prefers-reduced-motion` in both CSS and JS.
+
+## Install
+
+```bash
+npm i @andersseen/motion
+```
+
+## Setup
+
+```ts
+import { initMotion } from '@andersseen/motion';
+import '@andersseen/motion/style.css';
+
+// Creates a MotionController + scans the root. Returns a cleanup function.
+const cleanup = initMotion();
+
+// Optional options:
+const cleanupWithOpts = initMotion({
+  root: document.getElementById('page'),
+  threshold: 0.15,
+  rootMargin: '0px',
+  once: true,
+});
+
+// On SPA route change / component destroy:
+cleanup();
+```
+
+## Advanced: MotionController class
+
+```ts
+import { MotionController } from '@andersseen/motion';
+
+const mc = new MotionController({
+  root: document.body,
+  threshold: 0.1,
+  once: true,
+});
+mc.scan(); // re-scan root (call after dynamic content is added)
+mc.destroy(); // remove all observers and event listeners
+```
+
+Verified options: `root?` (default `document.body`), `threshold?` (default
+`0.1`), `rootMargin?` (default `'0px'`), `once?` (default `true`).
+
+## Attribute reference
+
+| Attribute             | Values                     | Notes                                                |
+| --------------------- | -------------------------- | ---------------------------------------------------- |
+| `and-motion`          | animation name (required)  | Marks the element and sets which animation runs      |
+| `and-motion-trigger`  | `enter` · `hover` · `tap`  | Default `enter`; names ending `-in` also infer enter |
+| `and-motion-duration` | CSS time (`500ms`, `1.2s`) | Sets `--and-motion-duration` on the element          |
+| `and-motion-delay`    | CSS time (`200ms`)         | Sets `--and-motion-delay` on the element             |
+| `and-motion-easing`   | CSS easing string          | Sets `--and-motion-easing` on the element            |
+| `and-motion-once`     | `true` · `false`           | Per-element override of the controller-level `once`  |
+
+Controller runtime attribute: `and-motion-state=active` is toggled internally
+while an animation is active.
+
+## CSS custom properties (global, overridable)
+
+```
+--and-motion-duration:        500ms
+--and-motion-delay:           0ms
+--and-motion-easing:          cubic-bezier(0.16, 1, 0.3, 1)   /* expo-out */
+--and-motion-easing-enter:    cubic-bezier(0.16, 1, 0.3, 1)
+--and-motion-easing-exit:     cubic-bezier(0.7, 0, 0.84, 0)
+--and-motion-easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1)
+--and-motion-easing-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1)
+--and-motion-easing-bounce:   cubic-bezier(0.175, 0.885, 0.32, 1.275)
+--and-motion-distance:        20px
+--and-motion-distance-big:    150px
+```
+
+## Animation names
+
+- **Fading** (enter by default): `fade`, `fade-up`, `fade-down`, `fade-left`,
+  `fade-right` (+ `-big` and corner variants). Explicit: `fade-in`,
+  `fade-in-up`, …; exit: `fade-out`, `fade-out-up`, …
+- **Sliding**: `slide-up/down/left/right` (+ `slide-in-*` / `slide-out-*`).
+- **Zooming**: `zoom`, `zoom-up/down/left/right` (+ `zoom-in-*` / `zoom-out-*`).
+- **Bouncing**: `bounce-up/down/left/right` (+ `bounce-in-*` / `bounce-out-*`);
+  `bounce-in`, `bounce-out` (750ms).
+- **Flipping**: `flip`, `flip-x`, `flip-y` (+ `flip-in-x/y`, `flip-out-x/y`).
+- **Rotating**: `rotate`, `rotate-down-left/right`, `rotate-up-left/right` (+
+  `rotate-in-*` / `rotate-out-*`).
+- **Light speed**: `light-speed-right/left` (+ `light-speed-in/out-*`).
+- **Back** (overshoot from off-screen): `back-down/left/right/up` (+ `back-in-*`
+  / `back-out-*`).
+- **Attention seekers** (use `trigger="hover"` or `trigger="tap"`): `pulse`,
+  `rubber-band`, `shake-x`, `shake-y`, `head-shake`, `swing`, `tada`, `wobble`,
+  `jello`, `heart-beat`, `flash`, `bounce`, `scale-up`, `scale-down`.
+- **Specials**: `hinge` (2s, origin top-left), `jack-in-the-box`, `roll`,
+  `roll-in`, `roll-out`.
+
+## Usage examples
+
+```html
+<!-- Scroll-triggered fade-up (once) -->
+<section
+  and-motion="fade-up"
+  and-motion-duration="700ms"
+  and-motion-delay="100ms"
+>
+  <h2>Section title</h2>
+</section>
+
+<!-- Hover rubber-band attention seeker -->
+<button and-motion="rubber-band" and-motion-trigger="hover">Click me</button>
+
+<!-- Tap scale with spring easing -->
+<div
+  and-motion="scale-up"
+  and-motion-trigger="tap"
+  and-motion-easing="cubic-bezier(0.34, 1.56, 0.64, 1)"
+>
+  Card
+</div>
+
+<!-- Staggered list via delay -->
+<ul>
+  <li and-motion="fade-in-up" and-motion-delay="0ms">Item 1</li>
+  <li and-motion="fade-in-up" and-motion-delay="100ms">Item 2</li>
+  <li and-motion="fade-in-up" and-motion-delay="200ms">Item 3</li>
+</ul>
+```
+
+## Angular usage
+
+```ts
+// app.config.ts or main.ts
+import { initMotion } from '@andersseen/motion';
+import '@andersseen/motion/style.css';
+
+initMotion();
+```
+
+For OnPush components with dynamic content, call `mc.scan()` after content
+renders.
+
+## Rules
+
+- Use `and-motion` attributes directly in HTML — no JS required for basic
+  animations.
+- Use motion for meaningful feedback (entrance, hover affordance, tap
+  confirmation); avoid constant looping animations that distract from content.
+- The experience must be usable without animation (reduced motion is handled
+  automatically).
+- Call `cleanup()` / `destroy()` when unmounting SPA views to avoid listener
+  leaks.