@auto-engineer/react-gen 1.134.0

package/skills/emil-design-engineering/marketing.md

@@ -0,0 +1,160 @@
+# Marketing Pages
+
+Guidelines specific to marketing sites, landing pages, blogs, docs, and changelogs.
+
+## Animations on Marketing Pages
+
+Marketing pages can use more elaborate animations than product UI, but still with restraint.
+
+### What to Avoid
+
+**No scroll animations:** Don't add scroll animations like fade-ups, fade-ins, translate-Y on scroll.
+
+**No disconnected motion:** Don't add animations or interactions that feel disconnected from user movement:
+- Scroll hijacking
+- Parallax that doesn't map 1:1 to scroll
+- Auto-advancing carousels
+
+### Intro Animations
+
+Disable intro animations if they've been seen during the current session:
+
+```jsx
+useEffect(() => {
+  const hasSeenIntro = sessionStorage.getItem('hasSeenIntro');
+  if (hasSeenIntro) {
+    setSkipIntro(true);
+  } else {
+    sessionStorage.setItem('hasSeenIntro', 'true');
+  }
+}, []);
+```
+
+Use `sessionStorage` (not `localStorage`) so animations play again on new sessions.
+
+## Performance
+
+### Font Preloading
+
+Preload fonts to prevent layout shift:
+
+```jsx
+import { preload } from 'react-dom';
+
+// In your app initialization
+preload('/fonts/inter-var.woff2', { as: 'font', type: 'font/woff2' });
+```
+
+### Image Preloading
+
+Preload above-the-fold images:
+
+```html
+<link rel="preload" as="image" href="/hero-image.webp" />
+```
+
+### Static Generation
+
+Generate blog, changelog, docs, and all other frequently updated data at build time with revalidation. Do not fetch at request time:
+
+```jsx
+// Next.js example
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map((post) => ({ slug: post.slug }));
+}
+
+export const revalidate = 3600; // Revalidate every hour
+```
+
+## Header Navigation
+
+Ensure header submenu content on marketing pages is visible even when it shows on hover only. This maintains proper HTML structure for accessibility and SEO:
+
+```html
+<!-- Content exists in DOM, just visually hidden -->
+<nav>
+  <button aria-expanded="false">Products</button>
+  <div class="submenu" aria-hidden="true">
+    <!-- Full content here, not dynamically loaded -->
+  </div>
+</nav>
+```
+
+## Call-to-Action Buttons
+
+Ensure buttons have different CTAs based on whether a user is logged in:
+
+| State | CTA |
+| --- | --- |
+| Logged out | "Get Started" or "Sign Up" |
+| Logged in | "Go to Dashboard" or "Open App" |
+
+```jsx
+<Button href={isLoggedIn ? '/dashboard' : '/signup'}>
+  {isLoggedIn ? 'Go to Dashboard' : 'Get Started'}
+</Button>
+```
+
+## Documentation Sites
+
+### Code Snippets
+
+Provide a copy-to-clipboard button on all docs code snippets:
+
+```jsx
+<CodeBlock
+  code={snippet}
+  copyButton={true}
+/>
+```
+
+### Markdown Export
+
+Ensure all docs pages are copyable as markdown files:
+- Have a "Copy as Markdown" button
+- Support `.md` extension in URLs (e.g., `/docs/getting-started.md` returns markdown)
+
+### Visual Examples
+
+Ensure docs pages have many visual examples. Code alone isn't enough—show what the code produces.
+
+## Blog & Changelog
+
+### RSS Feed
+
+Ensure RSS feed exists for blog and changelog:
+
+```
+/blog/rss.xml
+/changelog/rss.xml
+```
+
+### Text Wrapping
+
+Use `text-wrap: balance` on headings:
+
+```css
+article h1, article h2 {
+  text-wrap: balance;
+}
+```
+
+## Illustrations
+
+Illustrations built in code should have:
+- Proper `aria-label` attribute for accessibility
+- Disabled text selection
+- Disabled pointer events (if decorative)
+
+```jsx
+<div
+  role="img"
+  aria-label="Illustration showing data flow"
+  className="illustration"
+  style={{
+    userSelect: 'none',
+    pointerEvents: 'none',
+  }}
+/>
+```

package/skills/emil-design-engineering/performance.md

@@ -0,0 +1,222 @@
+# Performance
+
+Optimization, virtualization, and performance considerations.
+
+## Animation Performance
+
+See [animations.md](animations.md) for detailed animation performance guidelines. Key rules:
+
+- Only animate `transform` and `opacity`
+- Avoid animating `height`, `width`, `padding`, `margin`
+- Avoid `blur` filters above 20px
+- Use `will-change: transform` for GPU acceleration
+- Pause looping animations when off-screen
+
+## Lists & Virtualization
+
+Virtualize large lists. Don't render hundreds of DOM nodes when only a few are visible:
+
+```jsx
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+function VirtualList({ items }) {
+  const parentRef = useRef(null);
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 50,
+  });
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div style={{ height: virtualizer.getTotalSize() }}>
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            style={{
+              position: 'absolute',
+              top: virtualItem.start,
+              height: virtualItem.size,
+            }}
+          >
+            {items[virtualItem.index]}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Transitions
+
+### Avoid `transition: all`
+
+Never use `transition: all`. It causes accidental animations and performance issues:
+
+```css
+/* Bad */
+.button {
+  transition: all 200ms ease;
+}
+
+/* Good - specify exact properties */
+.button {
+  transition: background-color 200ms ease, transform 200ms ease;
+}
+```
+
+### Theme Switching
+
+Switching themes should not trigger transitions. Disable transitions during theme changes:
+
+```js
+function setTheme(theme) {
+  // Disable transitions
+  document.documentElement.classList.add('no-transitions');
+
+  // Apply theme
+  document.documentElement.setAttribute('data-theme', theme);
+
+  // Re-enable transitions after paint
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('no-transitions');
+    });
+  });
+}
+```
+
+```css
+.no-transitions,
+.no-transitions * {
+  transition: none !important;
+}
+```
+
+## Layout Performance
+
+### Prevent Layout Shift
+
+Dynamic elements should cause no layout shift:
+
+- Use hardcoded dimensions for images and videos
+- Reserve space for async content with skeletons
+- Use `font-variant-numeric: tabular-nums` for changing numbers
+- Don't change font weight on hover
+
+### Font Loading
+
+Preload fonts to prevent layout shift:
+
+```jsx
+import { preload } from 'react-dom';
+
+preload('/fonts/inter-var.woff2', {
+  as: 'font',
+  type: 'font/woff2',
+  crossOrigin: 'anonymous',
+});
+```
+
+## React Performance
+
+### Minimize Re-renders
+
+For animations, animate outside React's render cycle when possible:
+
+```jsx
+// Bad - causes re-render on every frame
+const [position, setPosition] = useState(0);
+
+// Good - use refs for direct DOM manipulation
+const elementRef = useRef(null);
+
+useEffect(() => {
+  let frame;
+  function animate() {
+    elementRef.current.style.transform = `translateX(${position}px)`;
+    frame = requestAnimationFrame(animate);
+  }
+  frame = requestAnimationFrame(animate);
+  return () => cancelAnimationFrame(frame);
+}, []);
+```
+
+### Framer Motion Performance
+
+```jsx
+// Hardware accelerated (uses transform string)
+<motion.div animate={{ transform: "translateX(100px)" }} />
+
+// NOT hardware accelerated (more readable but slower)
+<motion.div animate={{ x: 100 }} />
+```
+
+## CSS Performance
+
+### CSS Variables
+
+Avoid animating CSS variables in deep component trees. Each variable change triggers style recalculation for all descendants.
+
+### Blur Filters
+
+`blur()` filters above 20px are expensive, especially in Safari. Keep blur values subtle or avoid them on frequently-animating elements.
+
+## Static Generation
+
+Generate static content at build time:
+
+```jsx
+// Next.js example
+export async function getStaticProps() {
+  const posts = await fetchPosts();
+  return {
+    props: { posts },
+    revalidate: 3600, // Revalidate hourly
+  };
+}
+```
+
+Don't fetch blog posts, changelog entries, or docs at request time when they can be pre-generated.
+
+## Preloading
+
+### Critical Images
+
+Preload above-the-fold images:
+
+```html
+<link rel="preload" as="image" href="/hero.webp" />
+```
+
+### Fonts
+
+```html
+<link
+  rel="preload"
+  href="/fonts/inter.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+## Off-Screen Content
+
+Pause or stop resource-intensive operations when off-screen:
+
+```js
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      startAnimation();
+    } else {
+      pauseAnimation();
+    }
+  });
+});
+
+observer.observe(element);
+```

package/skills/emil-design-engineering/touch-accessibility.md

@@ -0,0 +1,236 @@
+# Touch & Accessibility
+
+Touch devices, mobile considerations, keyboard navigation, and accessibility.
+
+## Touch Devices
+
+### Hover Effects
+
+Disable hover effects on touch devices. Touch devices trigger hover on tap, causing false positives:
+
+```css
+/* Only apply hover on devices that support it */
+@media (hover: hover) and (pointer: fine) {
+  .element:hover {
+    transform: scale(1.05);
+  }
+}
+```
+
+**Important:** Don't rely on hover effects for the UI to work properly. Hover should enhance, not enable functionality.
+
+### Touch Action
+
+Disable `touch-action` for custom components that implement pan and zoom gestures to prevent interference from native behavior:
+
+```css
+.custom-canvas {
+  touch-action: none;
+}
+```
+
+### Double-Tap Zoom
+
+Set `touch-action: manipulation` to prevent double-tap zoom on controls:
+
+```css
+button, a, input {
+  touch-action: manipulation;
+}
+```
+
+### Tap Targets
+
+Ensure minimal tap target of all buttons on touch devices is at least 44px:
+
+```css
+.icon-button {
+  /* Visual size can be smaller */
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+/* But hit area should be 44px */
+.icon-button::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+}
+```
+
+Or use padding:
+
+```css
+.small-button {
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+
+### Video Autoplay
+
+Apply `muted` and `playsinline` to `<video>` tags to autoplay on iOS without opening a fullscreen video popup:
+
+```html
+<video autoplay muted playsinline loop>
+  <source src="video.mp4" type="video/mp4" />
+</video>
+```
+
+### OS-Specific Shortcuts
+
+Replace `Cmd` with `Ctrl` based on operating system:
+
+```js
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+const modKey = isMac ? 'Cmd' : 'Ctrl';
+
+// Display: "Save (Cmd+S)" on Mac, "Save (Ctrl+S)" on Windows
+```
+
+## Keyboard Navigation
+
+### Tab Order
+
+Tabbing should work consistently across the site. Users should only be able to tab through visible elements:
+
+```css
+/* Hide from tab order when not visible */
+.hidden-panel {
+  visibility: hidden;
+}
+
+/* Or use inert attribute */
+<div inert={!isVisible}>...</div>
+```
+
+### Scroll Into View
+
+Ensure keyboard navigation scrolls elements into view if needed:
+
+```jsx
+function handleFocus(e) {
+  e.target.scrollIntoView({
+    behavior: 'smooth',
+    block: 'nearest',
+  });
+}
+```
+
+### Focus Management
+
+When opening modals or dialogs, move focus to the first interactive element or the modal itself. When closing, return focus to the trigger element.
+
+## Accessibility
+
+### ARIA Labels
+
+Always set aria labels on buttons with an icon as content:
+
+```html
+<button aria-label="Close dialog">
+  <CloseIcon />
+</button>
+
+<button aria-label="Search">
+  <SearchIcon />
+</button>
+```
+
+### Code Illustrations
+
+Illustrations built in code should have proper `aria-label` attribute:
+
+```jsx
+<div
+  role="img"
+  aria-label="Abstract geometric pattern"
+  className="decorative-illustration"
+/>
+```
+
+### Reduced Motion
+
+See [animations.md](animations.md) for `prefers-reduced-motion` implementation. Every animation needs reduced motion support.
+
+### Videos
+
+For users who prefer reduced motion, show play buttons instead of autoplaying videos:
+
+```jsx
+const prefersReducedMotion = window.matchMedia(
+  '(prefers-reduced-motion: reduce)'
+).matches;
+
+<video
+  autoPlay={!prefersReducedMotion}
+  controls={prefersReducedMotion}
+  muted
+  playsinline
+/>
+```
+
+### Time-Limited Actions
+
+Ensure any time-limited action is frozen when the user switches tabs. Use the `visibilitychange` event:
+
+```js
+let timeoutId;
+let remainingTime;
+let startTime;
+
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) {
+    // Pause the timer
+    clearTimeout(timeoutId);
+    remainingTime -= Date.now() - startTime;
+  } else {
+    // Resume the timer
+    startTime = Date.now();
+    timeoutId = setTimeout(callback, remainingTime);
+  }
+});
+```
+
+## Feedback
+
+Ensure feedback components are visible on the page. Feedback is important—don't hide it behind hover states or modals.
+
+## Tooltips
+
+### Delay and Animation
+
+Tooltips should have a delay before appearing to prevent accidental activation:
+
+```css
+.tooltip {
+  transition-delay: 200ms;
+}
+```
+
+**Sequential tooltips:** Once a tooltip is open, hovering over other tooltips should open them with no delay and no animation. Track "warm" state:
+
+```jsx
+const [isWarm, setIsWarm] = useState(false);
+
+// When any tooltip opens, set warm state
+// Clear warm state after 300ms of no tooltip being open
+```
+
+### Submenus
+
+Apply a safe-area for submenus using clippath to ensure diagonal movement works. Users should be able to move diagonally from parent menu to submenu without the submenu closing.
+
+```css
+.submenu-trigger::after {
+  content: '';
+  position: absolute;
+  /* Creates a "safe zone" for cursor movement */
+  clip-path: polygon(0 0, 100% 0, 100% 100%);
+  /* Adjust based on submenu position */
+}
+```