natureco-cli 5.18.3 → 5.20.0

package/skills/react-view-transitions/SKILL.md

@@ -0,0 +1,320 @@
+---
+name: vercel-react-view-transitions
+description: Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
+license: MIT
+metadata:
+  author: vercel
+  version: "1.0.0"
+---
+
+# React View Transitions
+
+Animate between UI states using the browser's native `document.startViewTransition`. Declare *what* with `<ViewTransition>`, trigger *when* with `startTransition` / `useDeferredValue` / `Suspense`, control *how* with CSS classes. Unsupported browsers skip animations gracefully.
+
+## When to Animate
+
+Every `<ViewTransition>` should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
+
+Implement **all** applicable patterns from this list, in this order:
+
+| Priority | Pattern | What it communicates |
+|----------|---------|---------------------|
+| 1 | **Shared element** (`name`) | "Same thing — going deeper" |
+| 2 | **Suspense reveal** | "Data loaded" |
+| 3 | **List identity** (per-item `key`) | "Same items, new arrangement" |
+| 4 | **State change** (`enter`/`exit`) | "Something appeared/disappeared" |
+| 5 | **Route change** (layout-level) | "Going to a new place" |
+
+This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.
+
+### Choosing Animation Style
+
+| Context | Animation | Why |
+|---------|-----------|-----|
+| Hierarchical navigation (list → detail) | Type-keyed `nav-forward` / `nav-back` | Communicates spatial depth |
+| Lateral navigation (tab-to-tab) | Bare `<ViewTransition>` (fade) or `default="none"` | No depth to communicate |
+| Suspense reveal | `enter`/`exit` string props | Content arriving |
+| Revalidation / background refresh | `default="none"` | Silent — no animation needed |
+
+Reserve directional slides for hierarchical navigation (list → detail) and ordered sequences (prev/next photo, carousel, paginated results). For ordered sequences, the direction communicates position: "next" slides from right, "previous" from left. Lateral/unordered navigation (tab-to-tab) should not use directional slides — it falsely implies spatial depth.
+
+---
+
+## Availability
+
+- **Next.js:** Do **not** install `react@canary` — the App Router already bundles React canary internally. `ViewTransition` works out of the box. `npm ls react` may show a stable-looking version; this is expected.
+- **Without Next.js:** Install `react@canary react-dom@canary` (`ViewTransition` is not in stable React).
+- Browser support: Chromium 111+, Firefox 144+, Safari 18.2+. Graceful degradation on unsupported browsers.
+
+---
+
+## Implementation Workflow
+
+When adding view transitions to an existing app, **follow `references/implementation.md` step by step.** Start with the audit — do not skip it. Copy the CSS recipes from `references/css-recipes.md` into the global stylesheet — do not write your own animation CSS.
+
+---
+
+## Core Concepts
+
+### The `<ViewTransition>` Component
+
+```jsx
+import { ViewTransition } from 'react';
+
+<ViewTransition>
+  <Component />
+</ViewTransition>
+```
+
+React auto-assigns a unique `view-transition-name` and calls `document.startViewTransition` behind the scenes. Never call `startViewTransition` yourself.
+
+### Animation Triggers
+
+| Trigger | When it fires |
+|---------|--------------|
+| **enter** | `<ViewTransition>` first inserted during a Transition |
+| **exit** | `<ViewTransition>` first removed during a Transition |
+| **update** | DOM mutations inside a `<ViewTransition>`. With nested VTs, mutation applies to the innermost one |
+| **share** | Named VT unmounts and another with same `name` mounts in the same Transition |
+
+Only `startTransition`, `useDeferredValue`, or `Suspense` activate VTs. Regular `setState` does not animate.
+
+### Critical Placement Rule
+
+`<ViewTransition>` only activates enter/exit if it appears **before any DOM nodes**:
+
+```jsx
+// Works
+<ViewTransition enter="auto" exit="auto">
+  <div>Content</div>
+</ViewTransition>
+
+// Broken — div wraps the VT, suppressing enter/exit
+<div>
+  <ViewTransition enter="auto" exit="auto">
+    <div>Content</div>
+  </ViewTransition>
+</div>
+```
+
+---
+
+## Styling with View Transition Classes
+
+### Props
+
+Values: `"auto"` (browser cross-fade), `"none"` (disabled), `"class-name"` (custom CSS), or `{ [type]: value }` for type-specific animations.
+
+```jsx
+<ViewTransition default="none" enter="slide-in" exit="slide-out" share="morph" />
+```
+
+If `default` is `"none"`, all triggers are off unless explicitly listed.
+
+### CSS Pseudo-Elements
+
+- `::view-transition-old(.class)` — outgoing snapshot
+- `::view-transition-new(.class)` — incoming snapshot
+- `::view-transition-group(.class)` — container
+- `::view-transition-image-pair(.class)` — old + new pair
+
+See `references/css-recipes.md` for ready-to-use animation recipes.
+
+---
+
+## Transition Types
+
+Tag transitions with `addTransitionType` so VTs can pick different animations based on context. Call it multiple times to stack types — different VTs in the tree react to different types:
+
+```jsx
+startTransition(() => {
+  addTransitionType('nav-forward');
+  addTransitionType('select-item');
+  router.push('/detail/1');
+});
+```
+
+Pass an object to map types to CSS classes. Works on `enter`, `exit`, **and** `share`:
+
+```jsx
+<ViewTransition
+  enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}
+  exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}
+  share={{ 'nav-forward': 'morph-forward', 'nav-back': 'morph-back', default: 'morph' }}
+  default="none"
+>
+  <Page />
+</ViewTransition>
+```
+
+`enter` and `exit` don't have to be symmetric. For example, fade in but slide out directionally:
+
+```jsx
+<ViewTransition
+  enter={{ 'nav-forward': 'fade-in', 'nav-back': 'fade-in', default: 'none' }}
+  exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
+  default="none"
+>
+```
+
+**TypeScript:** `ViewTransitionClassPerType` requires a `default` key in the object.
+
+For apps with multiple pages, extract the type-keyed VT into a reusable wrapper:
+
+```jsx
+export function DirectionalTransition({ children }: { children: React.ReactNode }) {
+  return (
+    <ViewTransition
+      enter={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
+      exit={{ 'nav-forward': 'nav-forward', 'nav-back': 'nav-back', default: 'none' }}
+      default="none"
+    >
+      {children}
+    </ViewTransition>
+  );
+}
+```
+
+### `router.back()` and Browser Back Button
+
+`router.back()` and the browser's back/forward buttons do **not** trigger view transitions (`popstate` is synchronous, incompatible with `startViewTransition`). Use `router.push()` with an explicit URL instead.
+
+### Types and Suspense
+
+Types are available during navigation but **not** during subsequent Suspense reveals (separate transitions, no type). Use type maps for page-level enter/exit; use simple string props for Suspense reveals.
+
+---
+
+## Shared Element Transitions
+
+Same `name` on two VTs — one unmounting, one mounting — creates a shared element morph:
+
+```jsx
+<ViewTransition name="hero-image">
+  <img src="/thumb.jpg" onClick={() => startTransition(() => onSelect())} />
+</ViewTransition>
+
+// On the other view — same name
+<ViewTransition name="hero-image">
+  <img src="/full.jpg" />
+</ViewTransition>
+```
+
+- Only one VT with a given `name` can be mounted at a time — use unique names (`photo-${id}`). Watch for reusable components: if a component with a named VT is rendered in both a modal/popover *and* a page, both mount simultaneously and break the morph. Either make the name conditional (via a prop) or move the named VT out of the shared component into the specific consumer.
+- `share` takes precedence over `enter`/`exit`. Think through each navigation path: when no matching pair forms (e.g., the target page doesn't have the same name), `enter`/`exit` fires instead. Consider whether the element needs a fallback animation for those paths.
+- Never use a fade-out exit on pages with shared morphs — use a directional slide instead.
+
+---
+
+## Common Patterns
+
+### Enter/Exit
+
+```jsx
+{show && (
+  <ViewTransition enter="fade-in" exit="fade-out"><Panel /></ViewTransition>
+)}
+```
+
+### List Reorder
+
+```jsx
+{items.map(item => (
+  <ViewTransition key={item.id}><ItemCard item={item} /></ViewTransition>
+))}
+```
+
+Trigger inside `startTransition`. Avoid wrapper `<div>`s between list and VT.
+
+### Composing Shared Elements with List Identity
+
+Shared elements and list identity are independent concerns — don't confuse one for the other. When a list item contains a shared element (e.g., an image that morphs into a detail view), use two nested `<ViewTransition>` boundaries:
+
+```jsx
+{items.map(item => (
+  <ViewTransition key={item.id}>                                      {/* list identity */}
+    <Link href={`/items/${item.id}`}>
+      <ViewTransition name={`item-image-${item.id}`} share="morph">   {/* shared element */}
+        <Image src={item.image} />
+      </ViewTransition>
+      <p>{item.name}</p>
+    </Link>
+  </ViewTransition>
+))}
+```
+
+The outer VT handles list reorder/enter animations. The inner VT handles the cross-route shared element morph. Missing either layer means that animation silently doesn't happen.
+
+### Force Re-Enter with `key`
+
+```jsx
+<ViewTransition key={searchParams.toString()} enter="slide-up" default="none">
+  <ResultsGrid />
+</ViewTransition>
+```
+
+**Caution:** If wrapping `<Suspense>`, changing `key` remounts the boundary and refetches.
+
+### Suspense Fallback to Content
+
+Simple cross-fade:
+```jsx
+<ViewTransition>
+  <Suspense fallback={<Skeleton />}><Content /></Suspense>
+</ViewTransition>
+```
+
+Directional reveal:
+```jsx
+<Suspense fallback={<ViewTransition exit="slide-down"><Skeleton /></ViewTransition>}>
+  <ViewTransition enter="slide-up" default="none"><Content /></ViewTransition>
+</Suspense>
+```
+
+For more patterns, see `references/patterns.md`.
+
+---
+
+## How Multiple VTs Interact
+
+Every VT matching the trigger fires simultaneously in a single `document.startViewTransition`. VTs in **different** transitions (navigation vs later Suspense resolve) don't compete.
+
+### Use `default="none"` Liberally
+
+Without it, every VT fires the browser cross-fade on **every** transition — Suspense resolves, `useDeferredValue` updates, background revalidations. Always use `default="none"` and explicitly enable only desired triggers.
+
+### Two Patterns Coexist
+
+**Pattern A — Directional slides:** Type-keyed VT on each page, fires during navigation.
+**Pattern B — Suspense reveals:** Simple string props, fires when data loads (no type).
+
+They coexist because they fire at different moments. `default="none"` on both prevents cross-interference. Always pair `enter` with `exit`. Place directional VTs in page components, not layouts.
+
+### Nested VT Limitation
+
+When a parent VT exits, nested VTs inside it do **not** fire their own enter/exit — only the outermost VT animates. Per-item staggered animations during page navigation are not possible today. See [react#36135](https://github.com/facebook/react/pull/36135) for an experimental opt-in fix.
+
+---
+
+## Next.js Integration
+
+For Next.js setup (`experimental.viewTransition` flag, `transitionTypes` prop on `next/link`, App Router patterns, Server Components), see `references/nextjs.md`.
+
+---
+
+## Accessibility
+
+Always add the reduced motion CSS from `references/css-recipes.md` to your global stylesheet.
+
+---
+
+## Reference Files
+
+- **`references/implementation.md`** — Step-by-step implementation workflow.
+- **`references/patterns.md`** — Patterns, animation timing, events API, troubleshooting.
+- **`references/css-recipes.md`** — Ready-to-use CSS animation recipes.
+- **`references/nextjs.md`** — Next.js App Router patterns and Server Component details.
+
+## Full Compiled Document
+
+For the complete guide with all reference files expanded: `AGENTS.md`

package/skills/readme-i18n/SKILL.md

@@ -0,0 +1,176 @@
+---
+name: readme-i18n
+description: Use when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized README variants in a GitHub-style repository.
+---
+
+Localize a repository `README.md` without breaking the repo mechanics around it.
+
+The default job is translate + wire-up:
+
+- read the source-of-truth README
+- create localized sibling files such as `README.zh.md`
+- preserve GitHub-flavored Markdown structure and repo-specific tokens
+- add or update a shared language selector near the top of every variant
+
+This skill is for multilingual README workflows, not general website/app i18n.
+
+## Inputs
+
+Expect these inputs when available:
+
+- source README path, default `README.md`
+- source language, default inferred or English
+- one or more target languages
+- optional glossary or do-not-translate list
+- optional filename override if the repo already uses a different multilingual naming pattern
+
+If target languages are not named, inspect existing translated files, selectors, filenames, issues, or prior repo conventions. If that still leaves the target languages unclear, ask once. Do not invent target languages.
+
+## Defaults And Decision Rules
+
+- Treat the root `README.md` as the source-of-truth unless the user explicitly says otherwise.
+- If the source language is ambiguous, ask once. Otherwise assume English.
+- Keep section order aligned with the source README. Only make a small heading wording adjustment when needed to produce a valid localized anchor.
+- Output localized siblings with `README.<bcp47-tag>.md` naming unless the repo already has a different established pattern that should be preserved.
+- Update an existing language selector in place. Do not duplicate it.
+- Translate only human-language content.
+- Preserve project names, package names, commands, CLI flags, option names, environment variables, URLs, file paths, inline code, code fences, HTML attributes, and badge/image URLs.
+- Badge alt text or visible labels may be translated only when the change does not require changing the badge URL, query params, or image source.
+- If a glossary or do-not-translate list is provided, apply it consistently across every target language.
+
+## Workflow
+
+### 1. Establish the source README and languages
+
+- Confirm the source README path. Default to `README.md`.
+- Identify the source language from the file contents and repo context.
+- Determine target languages from the request or existing repo pattern.
+- Note any glossary terms, product names, or phrases that must stay untranslated.
+
+### 2. Audit the Markdown structure before translating
+
+Read the source README once as structure, not prose. Open [`references/preservation-checklist.md`](./references/preservation-checklist.md) and inventory the elements most likely to break:
+
+- headings and heading levels
+- badge rows, shields URLs, and image links
+- tables and alignment rows
+- raw HTML blocks and inline HTML
+- GitHub alerts or admonitions such as `> [!NOTE]`
+- code fences, inline code, commands, and config snippets
+- intra-document anchors such as `(#installation)`
+- relative links to files, docs, screenshots, or other README variants
+
+If the README already has localized siblings, inspect them too before choosing filenames or selector style.
+
+### 3. Translate only the prose layer
+
+Translate:
+
+- paragraph text
+- list item prose
+- table cell prose
+- visible text inside HTML blocks
+- image alt text when safe
+- selector labels and other human-facing labels
+
+Do not translate:
+
+- fenced code blocks
+- inline code spans
+- shell commands
+- flags such as `--help`
+- env vars such as `OPENAI_API_KEY`
+- URLs
+- file paths
+- repo/package/project identifiers
+- badge and image URLs
+
+When in doubt, preserve the literal token and translate the surrounding sentence instead.
+
+### 4. Preserve structure while writing the localized README
+
+- Keep the same heading hierarchy and section order as the source.
+- Keep the same number of code fences unless the user explicitly asks to rewrite examples.
+- Preserve table shape, list nesting, HTML wrappers, and Markdown comments.
+- Preserve relative links unless a link intentionally needs to point at a localized sibling README.
+
+### 5. Rewrite localized anchors and anchor-dependent links
+
+When a translated heading changes, GitHub will generate a different heading ID. After translating headings:
+
+- rewrite every same-file `(#...)` link so it matches the localized heading slug in that file
+- preserve custom explicit anchors such as `<a id="...">` unless the file already uses localized explicit IDs
+- verify that every intra-document anchor target resolves to an existing heading or explicit anchor
+
+Prefer a small heading wording adjustment over a broken anchor. The section order should still match the source README.
+
+### 6. Write sibling files using the repo's naming pattern
+
+Default to sibling filenames like:
+
+- `README.zh.md`
+- `README.es.md`
+- `README.fr.md`
+
+If the repo already uses a different multilingual naming pattern, keep using it consistently rather than forcing the default pattern.
+
+### 7. Insert or update the language selector
+
+Open [`references/language-selector-reference.md`](./references/language-selector-reference.md) before editing selectors.
+
+Placement:
+
+- keep the selector near the top of the file
+- if the README starts with a title, badges, hero image, or short intro block, place the selector immediately after that opening cluster
+
+Behavior:
+
+- update an existing selector block in place if one already exists
+- if you add a new selector, use the canonical marker comments from the reference file so later runs can update it deterministically
+- emphasize the current language and link the other variants
+- keep selector order and labels consistent across every README variant
+
+### 8. Final verification
+
+Before finishing, verify:
+
+- localized filenames follow the chosen pattern
+- every README variant contains exactly one selector block
+- code fence counts are preserved
+- badge/image URLs and relative file links still point to the original targets unless intentionally localized
+- every `(#...)` link resolves inside its own file
+- the localized README still feels structurally identical to the source
+
+## Output
+
+Produce:
+
+- one localized sibling README per target language
+- an updated selector block in every README variant
+- a brief note to the user covering created or updated files, any assumptions, and any terms intentionally left untranslated
+
+## Maintenance Note
+
+Keep `README.md` as the canonical source unless the user says otherwise. When the source README changes later, update each localized sibling by diffing the changed prose, then re-check selectors, filenames, and anchor links instead of reformatting the whole file from scratch.
+
+## Example Prompts
+
+**Example 1**
+
+`Translate this README into Chinese and add a language switcher. Keep badge URLs, code fences, and all commands exactly as they are.`
+
+**Example 2**
+
+`Make the repo multilingual. Add Spanish and Chinese README variants, keep the internal anchor links working, and wire the selector into every file.`
+
+**Example 3**
+
+`We already have README.zh.md. Add README.es.md and update the existing selector in place instead of adding a second one.`
+
+## Common Mistakes
+
+- Translating fenced code blocks or inline code instead of only the prose around them
+- Duplicating the language selector instead of updating the existing block
+- Translating a heading but forgetting to rewrite same-file `(#...)` links
+- Changing badge URLs or image sources while trying to translate visible labels
+- Reordering sections in the localized README even though the source README is the authority

package/skills/real-time-communication/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: real-time-communication
+description: Implement real-time features with WebSockets, SSE, and WebRTC
+category: Software Development
+---
+
+# Real Time Communication
+
+## Overview
+Implement real-time features with WebSockets, SSE, and WebRTC. This skill helps you apply structured, repeatable methods for consistent results.
+
+## When to Use
+- When you need to apply real time communication best practices
+- When establishing processes or standards for your workflow
+- When training team members on real time communication
+- When automating or optimizing real time communication tasks
+
+## Instructions
+1. **Assess**: Evaluate the current state, requirements, and constraints
+2. **Plan**: Define the approach, steps, and success criteria
+3. **Execute**: Follow the established patterns and best practices
+4. **Verify**: Check results against expected outcomes and quality standards
+5. **Iterate**: Refine based on feedback and lessons learned
+
+## Examples
+```
+User: Help me apply real time communication for my current project
+Assistant: I'll help you apply real time communication step by step...
+```
+
+## Related Skills
+- Use with `workflow` tool for orchestrated execution
+- Combine with `task` tool for delegated processing
+- Reference `system-prompt` for system-level integration