New Branding, Design System, and Landing Pages

.agents/index.md

@@ -2,6 +2,33 @@
 
 TanStack.com marketing site built with TanStack Start.
 
+## Core principles for every task
+
+Before writing code, walk this ladder. Stop at the first answer that works.
+
+1. **Does this need to exist?** → no: skip it (YAGNI)
+2. **Already in this codebase?** → reuse it, don't rewrite
+3. **Stdlib does it?** → use it
+4. **Native platform feature?** → use it
+5. **Installed dependency?** → use it
+6. **One line?** → one line
+7. **Only then:** the minimum that works
+
+Inspired by https://github.com/DietrichGebert/ponytail
+
+### Abstraction & repetition
+
+- **KISS** — keep it simple, stupid. Boring code beats clever code.
+- **WET > DRY** — write everything twice (or more) before abstracting. Three similar usages with diverging needs is the cue to extract; two is not.
+- Premature DRY couples unrelated code through a shared abstraction that ends up fighting both callers. Duplication is cheaper than the wrong abstraction.
+
+### What this means in practice
+
+- Don't add error handling, fallbacks, or validation for cases that can't happen.
+- Don't introduce helpers, wrappers, or config knobs "for later."
+- Don't refactor surrounding code while fixing a bug.
+- When tempted to abstract: count the call sites and check they actually want the same behavior. If not, leave the duplication.
+
 ## Essentials
 
 - Package manager: `pnpm`

.agents/skills/design-motion-principles/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: design-motion-principles
+description: "Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit animations, or any motion design work in React, Framer Motion, CSS, or HTML. Provides per-designer perspectives with context-aware weighting."
+---
+
+# Design Motion Principles
+
+You are a senior design engineer specializing in motion and interaction design. This skill operates in two modes:
+
+- **Create** — Build interactive components with purposeful motion → `workflows/create.md`
+- **Audit** — Review existing motion design and report findings → `workflows/audit.md`
+
+**Scope**: Web and app UI motion — HTML/CSS, React, Framer Motion / Motion, iOS/Android transitions, design system animations. The frequency framework still applies to other motion work (game engines, Lottie, Rive, video), but designer-specific techniques may not translate.
+
+---
+
+## STEP 0: Detect Mode (DO THIS FIRST)
+
+| Signal in the request                                                            | Mode         |
+| -------------------------------------------------------------------------------- | ------------ |
+| "build", "create", "add animation", "animate this", "implement", "make it feel…" | **Create**   |
+| "audit", "review", "evaluate", "check", "feedback on", "is this motion good"     | **Audit**    |
+| Ambiguous (e.g. "look at this modal animation")                                  | Ask the user |
+
+For ambiguous requests, if `AskUserQuestion` is available, present:
+
+- **Create** — Build or improve the component's motion
+- **Audit** — Review existing motion and report findings
+
+Otherwise ask in plain text: "Should I build/improve the motion (Create mode), or review existing motion and report findings (Audit mode)?"
+
+**Once the mode is known, read the matching workflow file and follow it exactly.**
+
+---
+
+## The Three Designers
+
+- **Emil Kowalski** (Linear, ex-Vercel) — Restraint, speed, purposeful motion. Best for productivity tools.
+- **Jakub Krehel** (jakub.kr) — Subtle production polish, professional refinement. Best for shipped consumer apps.
+- **Jhey Tompkins** (@jh3yy) — Playful experimentation, CSS innovation. Best for creative sites, kids apps, portfolios.
+
+> These three lenses distill each designer's _publicly published_ work — courses, articles, talks, and open-source projects. The weighting framework and the "lens" framing are this skill's interpretation of their principles, named in tribute; they are not authored or endorsed by the designers themselves.
+
+Each designer answers a different question:
+
+- **Emil** — _"Should this animate at all?"_
+- **Jakub** — _"Is this subtle and polished enough for production?"_
+- **Jhey** — _"What could this become?"_
+
+**Critical insight**: These perspectives are context-dependent, not universal rules. A kids' app should prioritize Jakub + Jhey (polish + delight), not Emil's productivity-focused speed rules. Both modes weight the designers by project context before doing anything.
+
+---
+
+## Context-to-Perspective Mapping
+
+| Project Type                        | Primary | Secondary | Selective                          |
+| ----------------------------------- | ------- | --------- | ---------------------------------- |
+| Productivity tool (Linear, Raycast) | Emil    | Jakub     | Jhey (onboarding only)             |
+| Kids app / Educational              | Jakub   | Jhey      | Emil (high-freq game interactions) |
+| Creative portfolio                  | Jakub   | Jhey      | Emil (high-freq interactions)      |
+| Marketing/landing page              | Jakub   | Jhey      | Emil (forms, nav)                  |
+| SaaS dashboard                      | Emil    | Jakub     | Jhey (empty states)                |
+| Mobile app                          | Jakub   | Emil      | Jhey (delighters)                  |
+| E-commerce                          | Jakub   | Emil      | Jhey (product showcase)            |
+
+---
+
+## Core Principles (Both Modes)
+
+### The Frequency Gate
+
+Before adding or approving any animation, ask how often the user triggers it:
+
+| Frequency           | Recommendation                        |
+| ------------------- | ------------------------------------- |
+| Rare (monthly)      | Delightful, expressive motion welcome |
+| Occasional (daily)  | Subtle, fast motion                   |
+| Frequent (100s/day) | No animation or instant transition    |
+| Keyboard-initiated  | Never animate                         |
+
+### Duration Guidelines (Context-Dependent)
+
+| Context                      | Guideline                  |
+| ---------------------------- | -------------------------- |
+| Productivity UI (Emil)       | Under 300ms — 180ms ideal  |
+| Production polish (Jakub)    | 200-500ms for smoothness   |
+| Creative/kids/playful (Jhey) | Whatever serves the effect |
+
+**Do not universally flag or cap durations.** Check the context weighting first.
+
+### The Golden Rule
+
+> "The best animation is that which goes unnoticed."
+
+If users comment "nice animation!" on every interaction, it's probably too prominent for production. (Exception: kids apps and playful contexts where delight IS the goal.)
+
+### Accessibility is NOT Optional
+
+Every animation — generated in Create mode or reviewed in Audit mode — must handle `prefers-reduced-motion`. No exceptions. See `references/accessibility.md`.
+
+---
+
+## Reference Index
+
+| File                                               | Contents                                                                                    | Load When                                                           |
+| -------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| [Motion Cookbook](references/motion-cookbook.md)   | All motion recipes — enter/exit, easing, springs, clip-path, @property, FLIP, scroll-driven | Create mode (always); Audit mode for implementation recommendations |
+| [Creation Gotchas](references/creation-gotchas.md) | Claude's failure modes when writing motion                                                  | Create mode (always)                                                |
+| [Audit Checklist](references/audit-checklist.md)   | Systematic audit checklist                                                                  | Audit mode (always)                                                 |
+| [Anti-Checklist](references/anti-checklist.md)     | Quality gate — AI-slop motion categories + anti-patterns to flag                            | Audit mode (always)                                                 |
+| [Emil Kowalski](references/emil-kowalski.md)       | Restraint philosophy, frequency rule, decision frameworks                                   | Either mode, if Emil is weighted                                    |
+| [Jakub Krehel](references/jakub-krehel.md)         | Production polish philosophy and decision frameworks                                        | Either mode, if Jakub is weighted                                   |
+| [Jhey Tompkins](references/jhey-tompkins.md)       | Playful experimentation philosophy and frameworks                                           | Either mode, if Jhey is weighted                                    |
+| [Accessibility](references/accessibility.md)       | prefers-reduced-motion, vestibular safety                                                   | Both modes (mandatory)                                              |
+| [Performance](references/performance.md)           | GPU optimization, will-change, layout thrash                                                | Either mode, for complex animations                                 |
+| [Output Format](references/output-format.md)       | Audit report template — HTML mode (default) + terminal mode (flag)                          | Audit mode only                                                     |
+| [Demo Shell](references/demo-shell.html)           | Visual container template for per-finding demo cards in the HTML report                     | Audit mode, HTML output                                             |
+
+## Workflow Index
+
+| Workflow                      | Purpose                                                      |
+| ----------------------------- | ------------------------------------------------------------ |
+| [Create](workflows/create.md) | Build interactive components with purposeful motion          |
+| [Audit](workflows/audit.md)   | Review existing motion design, produce a per-designer report |

.agents/skills/design-motion-principles/references/accessibility.md

@@ -0,0 +1,52 @@
+# Accessibility
+
+**This is not optional.** Motion can cause discomfort, nausea, or distraction for many users.
+
+---
+
+## Respect User Preferences
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+**What this does**: Effectively disables animations while preserving final states (so layouts don't break).
+
+---
+
+## Functional vs. Decorative Motion
+
+| Type           | Purpose                                                     | Reduced Motion Behavior                                    |
+| -------------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
+| **Functional** | Indicates state changes, spatial relationships, orientation | May need alternative (instant state change, no transition) |
+| **Decorative** | Pure delight, visual interest                               | Can be fully removed                                       |
+
+**The test**: Does removing this animation break the user's ability to understand what happened? If yes, it's functional.
+
+---
+
+## Motion Sensitivity Considerations
+
+- Avoid large-scale motion (full-screen transitions, parallax)
+- Avoid continuous or looping animations that can't be paused
+- Provide pause controls for any ambient animation
+- Be especially careful with vestibular triggers: zooming, spinning, parallax
+
+---
+
+## Implementation Checklist
+
+- [ ] Tested with `prefers-reduced-motion: reduce` enabled
+- [ ] No vestibular triggers (excessive zoom, spin, parallax)
+- [ ] Looping animations can be paused
+- [ ] Functional animations have non-motion alternatives
+- [ ] Users can complete all tasks with animations disabled