create-obsidian-arrow

Scaffold a new Obsidian-styled Arrow.js UI sandbox — a client-only Vite + TypeScript project that renders Arrow components against Obsidian's real app.css, ready to port into a plugin.

Usage

npm create obsidian-arrow@latest my-app
# or: pnpm create obsidian-arrow my-app
# or: npx create-obsidian-arrow my-app

Then:

cd my-app
pnpm install
pnpm pull-css   # required — extract Obsidian's app.css from your local install (macOS auto-detect)
pnpm dev

public/app.css is git-ignored and never bundled — it's Obsidian's proprietary CSS, so each developer extracts it from their own install via pnpm pull-css.

Install the agent skills

Skills aren't vendored into the scaffold — skills:install pulls them from the published repo (source of truth, always current) via the skills CLI:

pnpm skills:install --yes                       # non-interactive — installs all
pnpm skills:install                             # interactive picker
pnpm skills:install --yes --project-dir=<root>  # install at another repo root (nesting)
pnpm skills:update                              # update an existing setup

If you scaffold inside an existing repo, skills install scoped to the scaffold folder (the CLI is cwd-relative); use --project-dir=<outer-repo> (or --global) to install where an agent at the outer repo looks. The scaffolder prints this hint when it detects nesting.

Refresh an existing project

The scaffolder is create-first, but refresh refreshes an existing project's managed files (scripts/, docs/, .github/, .husky/, biome.json, agent guides, tools/viewer/, tools/router/, tools/sandbox/, src/main.ts, src/utilities.css, test/) and merges new package.json scripts/deps — it never touches src/components/, stories/, public/, index.html, or build configs:

npx create-obsidian-arrow refresh            # in the project (or: refresh <dir>)
npx create-obsidian-arrow refresh --dry-run  # preview

Then install with your package manager and run the check script.

Local dev of the initializer

From the sandbox repo, before publishing:

node create-obsidian-arrow/index.mjs create ../my-app    # scaffold
node create-obsidian-arrow/index.mjs refresh ../my-app   # refresh

What you get

A full sandbox: client-only Vite + TS, @arrow-js/core + @arrow-js/framework (no SSR), routeToPage + Navigation-API router, a Storybook-style component viewer at /components (add *.stories.ts files in stories/), a live token and class reference at /reference, Biome + husky pre-commit + node:test + GitHub Actions CI, a skills:install that pulls the agent skills from the published repo, and the pull-css script that extracts Obsidian's app.css.

Maintaining the template

template/ is generated from the sandbox repo so it never drifts. After changing the sandbox, regenerate it from the repo root:

pnpm create:sync