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
- Confirm whether the task is core-only Arrow or full-framework Arrow.
- 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
- Getting started / scaffold shape:
- Prefer idiomatic Arrow:
reactive()for statehtmltagged templates for DOMcomponent()for reusable view unitswatch()only for side effects
- In scaffolded SSR apps, treat
routeToPage(url)as the route entry point. - 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.mdreferences/api.mdreferences/examples.md