create-obsidian-arrow 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-obsidian-arrow",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Scaffold an Obsidian-styled Arrow.js UI sandbox (pnpm create obsidian-arrow <dir>).",
   "type": "module",
   "bin": {

package/template/AGENTS.md

@@ -11,6 +11,7 @@ This file is the hub — everything else is linked from here:
 - [`docs/workflow.md`](docs/workflow.md) — fresh-machine → running workflow.
 - [`skills/`](skills/) — installable domain skills (`pnpm skills:install`):
   - `obsidian-arrow-sandbox` — running the sandbox, CSS scoping, porting basics.
+  - `obsidian-arrow-composition` — **run before designing any view area**: surveys codebase, shows file trees for confirmation, asks questions, checks DRY/primitive use, produces a locked hierarchy doc.
   - `obsidian-arrow-stories` — **component + story authoring workflow**: `defineStories` API, variants, children, status flag, DRY patterns, utilities.
   - `obsidian-arrow-css` — **CSS decision hierarchy**: Obsidian classes → oas-* utilities → custom CSS; token reference; specificity scoping; overrides via variables; auditing for excess CSS.
   - `arrow-js-obsidian-templates` — Arrow v1.0.6 template syntax + footguns.

package/template/README.md

@@ -92,6 +92,7 @@ skills under [`skills/`](skills/) — it's a skill marketplace. Scaffolds **don'
 vendor copies**; they pull from this published repo, so installs are always
 current.
 
+- `obsidian-arrow-composition` — **run before designing any view area**: surveys codebase, shows proposed file trees, asks targeted questions, checks DRY and primitive use, produces a locked hierarchy doc for the migration agent to execute.
 - `obsidian-arrow-sandbox` — running and using this sandbox, CSS scoping, porting basics.
 - `obsidian-arrow-stories` — **component + story authoring workflow**: the complete `defineStories` API (variants, children, status flag, notes), DRY patterns, utility classes, story viewing, and how to structure sub-components.
 - `obsidian-arrow-css` — **CSS decision hierarchy**: Obsidian classes first, `oas-*` utilities second, custom CSS last; the live token reference (`/reference`), class catalog (`/reference/classes`), specificity scoping, overrides via CSS variables, and auditing components to minimize hand-written CSS.

package/template/docs/prompts/agent-setup.md

@@ -44,6 +44,8 @@ READ FIRST
 - AGENTS.md (root) — operating guide + docs map (links everything below).
 - docs/workflow.md — fresh-machine → running workflow.
 - skills/*/SKILL.md — seven installable skills:
+    obsidian-arrow-composition  design component hierarchy: surveys codebase, shows file trees,
+                              asks questions, checks DRY/primitives, produces locked plan
     obsidian-arrow-sandbox    running the sandbox, CSS scoping, porting basics
     obsidian-arrow-stories    component + story authoring: defineStories API,
                               variants, children, status, DRY patterns, utilities

package/template/src/utilities.css

@@ -52,7 +52,56 @@
 	flex-shrink: 0;
 }
 
-/* ── Spacing (Obsidian 4-px step scale) ─────────────────────── */
+/*
+ * Spacing — two Obsidian token families:
+ *
+ * 4-px scale  oas-gap-N / oas-p-N / oas-px-N / oas-py-N / oas-mt-N / oas-mb-N
+ *   N=1 → --size-4-1 (4px)   N=2 → --size-4-2 (8px)   N=3 → --size-4-3 (12px)
+ *   N=4 → --size-4-4 (16px)  N=5 → --size-4-5 (20px)  N=6 → --size-4-6 (24px)
+ *
+ * 2-px sub-scale  oas-gap-2-1 / oas-p-2-1 … (mirrors Obsidian token name)
+ *   2-1 → --size-2-1 (2px)   2-3 → --size-2-3 (6px)
+ */
+
+/* 2-px sub-scale ── */
+.oas-gap-2-1 {
+	gap: var(--size-2-1);
+}
+.oas-p-2-1 {
+	padding: var(--size-2-1);
+}
+.oas-px-2-1 {
+	padding-inline: var(--size-2-1);
+}
+.oas-py-2-1 {
+	padding-block: var(--size-2-1);
+}
+.oas-mt-2-1 {
+	margin-top: var(--size-2-1);
+}
+.oas-mb-2-1 {
+	margin-bottom: var(--size-2-1);
+}
+.oas-gap-2-3 {
+	gap: var(--size-2-3);
+}
+.oas-p-2-3 {
+	padding: var(--size-2-3);
+}
+.oas-px-2-3 {
+	padding-inline: var(--size-2-3);
+}
+.oas-py-2-3 {
+	padding-block: var(--size-2-3);
+}
+.oas-mt-2-3 {
+	margin-top: var(--size-2-3);
+}
+.oas-mb-2-3 {
+	margin-bottom: var(--size-2-3);
+}
+
+/* 4-px scale ── */
 .oas-gap-1 {
 	gap: var(--size-4-1);
 }
@@ -65,6 +114,12 @@
 .oas-gap-4 {
 	gap: var(--size-4-4);
 }
+.oas-gap-5 {
+	gap: var(--size-4-5);
+}
+.oas-gap-6 {
+	gap: var(--size-4-6);
+}
 .oas-p-1 {
 	padding: var(--size-4-1);
 }
@@ -77,12 +132,27 @@
 .oas-p-4 {
 	padding: var(--size-4-4);
 }
+.oas-p-5 {
+	padding: var(--size-4-5);
+}
+.oas-p-6 {
+	padding: var(--size-4-6);
+}
 .oas-px-2 {
 	padding-inline: var(--size-4-2);
 }
 .oas-px-3 {
 	padding-inline: var(--size-4-3);
 }
+.oas-px-4 {
+	padding-inline: var(--size-4-4);
+}
+.oas-px-5 {
+	padding-inline: var(--size-4-5);
+}
+.oas-px-6 {
+	padding-inline: var(--size-4-6);
+}
 .oas-py-1 {
 	padding-block: var(--size-4-1);
 }
@@ -92,6 +162,15 @@
 .oas-py-3 {
 	padding-block: var(--size-4-3);
 }
+.oas-py-4 {
+	padding-block: var(--size-4-4);
+}
+.oas-py-5 {
+	padding-block: var(--size-4-5);
+}
+.oas-py-6 {
+	padding-block: var(--size-4-6);
+}
 .oas-mt-1 {
 	margin-top: var(--size-4-1);
 }
@@ -101,6 +180,15 @@
 .oas-mt-3 {
 	margin-top: var(--size-4-3);
 }
+.oas-mt-4 {
+	margin-top: var(--size-4-4);
+}
+.oas-mt-5 {
+	margin-top: var(--size-4-5);
+}
+.oas-mt-6 {
+	margin-top: var(--size-4-6);
+}
 .oas-mb-1 {
 	margin-bottom: var(--size-4-1);
 }
@@ -110,6 +198,15 @@
 .oas-mb-3 {
 	margin-bottom: var(--size-4-3);
 }
+.oas-mb-4 {
+	margin-bottom: var(--size-4-4);
+}
+.oas-mb-5 {
+	margin-bottom: var(--size-4-5);
+}
+.oas-mb-6 {
+	margin-bottom: var(--size-4-6);
+}
 .oas-ml-auto {
 	margin-left: auto;
 }
@@ -195,6 +292,9 @@
 .oas-rounded-m {
 	border-radius: var(--radius-m);
 }
+.oas-rounded-l {
+	border-radius: var(--radius-l);
+}
 
 /* ── Interaction ─────────────────────────────────────────────── */
 .oas-cursor-pointer {