arrow-js

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