chore: snapshot main sync

data/skills/booskills/boo-critiquing-frontend/SKILL.md

@@ -0,0 +1,92 @@
+---
+name: boo-critiquing-frontend
+description: >
+  Critiques frontend UI/UX implementation and design quality: visual
+  hierarchy, spacing, typography, interaction states, accessibility, component
+  structure. Use for "review my UI," "does this look right," screenshot
+  critiques, component quality checks. Do NOT use for backend code review; use
+  boo-reviewing-code. Do NOT use for building new UI; use boo-building-ui.
+metadata:
+  version: "1.0"
+---
+
+# Critiquing Frontend
+
+## Size
+
+Classify small/medium/large from the number of components, screens, or flows to critique. Default: small (single component or screen). At medium+, dispatch `user-experience-designer`. Accept `$size` override.
+
+## Process
+
+1. Read `references/design-guidance.md` for the canonical design rules (color, typography, layout, motion, interaction, absolute bans, AI slop test).
+2. Run `ls frontend/src/components/ui/` and only reference primitives that exist. If the directory does not exist or is empty, stop and report.
+3. Apply the design guidance from references/ against each component or screen.
+4. If size is medium or larger, dispatch `user-experience-designer` for a full UX audit.
+5. Group findings by severity and produce the report.
+
+## What NOT to do
+
+- Do not use this skill for backend code review. Use boo-reviewing-code.
+- Do not use this skill to build new UI. It critiques existing interfaces; building is boo-building-ui's job.
+
+## Gotchas
+
+- **BooLab primitive rule**: run `ls frontend/src/components/ui/` and only reference primitives that exist. If missing, stop and report.
+- **Anti-cream / serif default-aesthetic**: for dashboards and tools, avoid recommending cream backgrounds or serif type as a default aesthetic. The warm-neutral AI default (cream/sand/beige body bg) is a tell; recommend neutral or brand-aligned palettes instead.
+- **Evidence rule**: every critique cites a specific component file:line and names the UX principle violated.
+<!-- standing-rules:pi:start -->
+- **Subagent visibility**: when the Paseo MCP tools (`mcp__paseo__*`) are available, spawn each agent persona as an attached Paseo subagent with `create_agent` (`detached: false`, `notifyOnFinish: true`; for an opencode provider also pass `settings.modeId: "build"` and `settings.features.auto_accept: true`) so every persona appears in the operator's Paseo agent track. Resolve each persona's provider/model from the active preset's `agents` map in `~/.paseo/orchestration-preferences.json`; supervise on the finish notification (never poll) and read each result with `get_agent_activity`.
+- **Subagent fallback**: when the Paseo MCP tools are not available, use the platform's native subagent dispatch. On a platform with no subagent dispatch at all (for example Pi), read each `agents/<name>.md` persona and apply its lens in sequential passes.
+- **Subagent concurrency**: honor the active preset's `concurrency` value in `~/.paseo/orchestration-preferences.json`. When it is `1` (local heavy-weight presets, around 27b/35b or larger on a single llama-swap server), dispatch subagents STRICTLY ONE AT A TIME: launch one, wait for its finish notification and read its result, then launch the next. This overrides any parallel fan-out. Absent or higher `concurrency` means parallel fan-out is fine.
+<!-- standing-rules:pi:end -->
+<!-- standing-rules:core:start -->
+- **No commit**: never commit, push, or stage changes; never `git add -A`. Prove any edits with `git diff --stat`.
+- **No em dashes**: never use em dashes (U+2014) in output or files you write.
+<!-- standing-rules:core:end -->
+
+## Output format
+
+```
+# Frontend Critique: <target>
+
+## Severity Summary
+
+| Severity     | Count |
+|--------------|-------|
+| Broken       | N     |
+| Inconsistent | N     |
+| Polish       | N     |
+
+## Findings
+
+### Broken
+
+**B1: <title>**
+- **Location:** `component/file.tsx:line`
+- **Principle violated:** <UX principle, WCAG criterion, or design rule>
+- **Issue:** <description>
+- **Suggested fix:** <concrete change>
+
+### Inconsistent
+
+**I1: <title>**
+- **Location:** `component/file.tsx:line`
+- **Issue:** <description>
+- **Suggested fix:** <concrete change>
+
+### Polish
+
+**P1: <title>**
+- **Location:** `component/file.tsx:line`
+- **Issue:** <description>
+- **Suggested fix:** <concrete change>
+
+## Claims I did not verify
+- <anything assumed or not checked>
+```
+
+## Failure modes
+
+- **No frontend code to critique**: the repo has no frontend source. Report and stop.
+- **UI primitives directory missing**: run `ls frontend/src/components/ui/` fails. Report the actual path and stop.
+- **Design guidance cannot be loaded**: references/design-guidance.md is missing. Report and stop.

data/skills/booskills/boo-critiquing-frontend/references/design-guidance.md

@@ -0,0 +1,77 @@
+# Design Guidance
+
+Ported from forks/impeccable/skill/SKILL.src.md. Substantive design rules preserved verbatim; provider-specific tags and placeholder syntax removed.
+
+## General rules
+
+### Color
+
+- **Verify contrast.** Body text must hit >=4.5:1 against its background; large text (>=18px or bold >=14px) needs >=3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
+- Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.
+
+### Typography
+
+- Cap body line length at 65-75ch.
+- Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
+- Hero / display heading ceiling: clamp() max <= 6rem (~96px). Above that the page is shouting, not designing.
+- Display heading letter-spacing floor: >= -0.04em. Anything tighter and letters touch; cramped, not "designed".
+- Use `text-wrap: balance` on h1-h3 for even line lengths; `text-wrap: pretty` on long prose to reduce orphans.
+
+### Layout
+
+- Vary spacing for rhythm.
+- Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
+- Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler.
+- For responsive grids without breakpoints: `repeat(auto-fit, minmax(280px, 1fr))`.
+- Build a semantic z-index scale (dropdown, sticky, modal-backdrop, modal, toast, tooltip). Never arbitrary values like 999 or 9999.
+
+### Motion
+
+- Motion should be intentional, and not be an afterthought. Consider it as part of the build.
+- Don't animate CSS layout properties unless truly needed.
+- Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
+- Use libraries for more advanced motion needs (e.g. motion, GSAP, anime.js, Lenis etc).
+- Reduced motion is not optional. Every animation needs a `@media (prefers-reduced-motion: reduce)` alternative: typically a crossfade or instant transition.
+- Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
+- Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
+- Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.
+
+### Interaction
+
+- Dropdowns rendered with `position: absolute` inside an `overflow: hidden` or `overflow: auto` container will be clipped. Use the native `<dialog>` / popover API, `position: fixed`, or a portal to escape the stacking context.
+
+## New projects only (when no prior work exists)
+
+### Color & Theme
+
+- Use OKLCH.
+- **The cream / sand / beige body bg is the saturated AI default of 2026.** The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like `--paper`, `--cream`, `--sand`, `--bone`, `--flour`, `--linen`, `--parchment`, `--wheat`, `--biscuit`, `--ivory` are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
+- Tinted neutrals: add 0.005-0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
+- When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe." Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
+- Pick a **color strategy** before picking colors. Four steps on the commitment axis:
+  - **Restrained**: tinted neutrals + one accent <=10%. Product default; brand minimalism.
+  - **Committed**: one saturated color carries 30-60% of the surface. Brand default for identity-driven pages.
+  - **Full palette**: 3-4 named roles, each used deliberately. Brand campaigns; product data viz.
+  - **Drenched**: the surface IS the color. Brand heroes, campaign pages.
+
+## Absolute bans
+
+Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.
+
+- **Side-stripe borders.** `border-left` or `border-right` greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
+- **Gradient text.** `background-clip: text` combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
+- **Glassmorphism as default.** Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
+- **The hero-metric template.** Big number, small label, supporting stats, gradient accent. SaaS cliche.
+- **Identical card grids.** Same-sized cards with icon + heading + text, repeated endlessly.
+- **Tiny uppercase tracked eyebrow above every section.** The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
+- **Numbered section markers as default scaffolding (01 / 02 / 03).** Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
+- **Text that overflows its container.** Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy.
+
+## The AI slop test
+
+If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.
+
+**Category-reflex check.** Run at two altitudes; the second one catches what the first one misses.
+
+- **First-order:** if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
+- **Second-order:** if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream, editorial-typographic", "fintech that's not navy-and-gold, terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious.