---
name: arrow-js
description: Use when working on Arrow apps, templates, reactivity, components, SSR, hydration, routing, or Vite-based Arrow projects.
---

# Arrow

Use this skill when the project uses Arrow packages such as `@arrow-js/core`, `@arrow-js/framework`, `@arrow-js/ssr`, `@arrow-js/hydrate`, or the Vite scaffold generated by `create-arrow-js`.

## Quick workflow

1. Confirm whether the task is core-only Arrow or full-framework Arrow.
2. Read the smallest relevant reference:
   - Getting started / scaffold shape: `references/getting-started.md`
   - API surface and package split: `references/api.md`
   - Common patterns and examples: `references/examples.md`
3. Prefer idiomatic Arrow:
   - `reactive()` for state
   - `html` tagged templates for DOM
   - `component()` for reusable view units
   - `watch()` only for side effects
4. In scaffolded SSR apps, treat `routeToPage(url)` as the route entry point.
5. If SSR or hydration is involved, preserve payload, metadata, and boundary behavior.

## Rules of thumb

- Expression slots are static by default. They only stay live when passed as callable functions.
- Pass reactive state directly as component props unless narrowing is clearly needed.
- Compose views with nested templates and component calls instead of imperative DOM work.
- Keep no-build Arrow honest. Avoid introducing benchmark-only patterns or unnecessary compiler assumptions.
- In framework apps, remember the package split:
  - `@arrow-js/core`: reactive state, templates, components, watch
  - `@arrow-js/framework`: render, async component runtime, boundary
  - `@arrow-js/ssr`: `renderToString`, `serializePayload`
  - `@arrow-js/hydrate`: `hydrate`, `readPayload`

## References

- `references/getting-started.md`
- `references/api.md`
- `references/examples.md`