# Arrow JS

> Use when working on Arrow apps, templates, reactivity, components, SSR, hydration, routing, or Vite-based Arrow projects.

- Skill: `standardagents/arrow-js` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add standardagents/arrow-js`
- Raw SKILL.md: https://api.skillmd.com/api/skills/standardagents/arrow-js/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: standardagents (https://skillmd.com/u/standardagents)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/standardagents/arrow-js

---


# 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`