create-issflow 1.10.0 → 1.11.1

package/template/.issflow/templates/PLAN-SCOPED.md

@@ -2,6 +2,9 @@
 
 > Revision: 1
 > Status: PENDING
+> Size: S | M | L
+> Lane: Fast | Standard | Heavy
+> Platform: web | pwa | line | mobile | n/a
 
 ## Goal
 Describe the desired outcome.
@@ -20,6 +23,12 @@ List the paths that the owner will approve in the approval record.
 
 ## Acceptance criteria
 - [ ] Observable behavior with test evidence.
+- [ ] (UI) Primary user can complete the task without guessing — task check
+
+## Delivery (ETA)
+- agent_eta:
+- waiting_on: none | owner | client | vendor | other
+- waiting_since:
 
 ## Tests
 - Unit:
@@ -34,3 +43,6 @@ List the paths that the owner will approve in the approval record.
 Do not change source until the owner approves this exact plan revision.
 The approval record must bind the ID, revision, and Git blob hash.
 Merge and deployment require separate authorization.
+
+Plan-Ready required before approve (testable AC · no TBD on auth/money/PII ·
+direction locked if UI · size+lane set).

package/template/.issflow/templates/UX-PACK-template.md

@@ -5,7 +5,18 @@
 
 ## Purpose
 Hi-fi-enough UI direction for build: screens, flows, and frame the implementer
-must stay inside. Wireframe baseline first; visual direction confirmed here.
+must stay inside. Wireframe baseline first; visual direction from locked picker.
+
+## Design scale
+Spike | Bounded | Architectural:
+
+## Surfaces
+- web-responsive (default) · pwa · line-oa · mobile-app:
+
+## Direction lock
+- `docs/design/DIRECTION.md` id:
+- Tokens: `docs/design/tokens.css`
+- Inventory: `docs/design/inventory.md`
 
 ## Users & jobs
 -
@@ -15,19 +26,19 @@ must stay inside. Wireframe baseline first; visual direction confirmed here.
 2.
 
 ## Screen inventory
-| Screen | Job | Priority |
-|--------|-----|----------|
-| | | |
+| Id | Screen | Job | Priority | Empty/Loading/Error |
+|----|--------|-----|----------|---------------------|
+| S-01 | | | | |
 
 ## Frame & tokens
-- Wireframe baseline: (link or summary)
-- Brand / tokens: (or “follow OVERVIEW UX direction”)
-- UI UX Pro Max: style · palette · type · anti-patterns
-- Breakpoints: XS · SM · MD · LG · XL
+- Wireframe baseline: `.issflow/skills/ux-design/references/wireframe-template.md`
+- Brand / tokens: locked file above (do not re-roll catalogue)
+- Breakpoints: XS · SM · MD · LG · XL — declare <SM and ≥MD behavior per primary screen
 
 ## States & a11y notes
 - Empty / loading / error covered for each primary view
 - WCAG 2.1 AA targets
+- No emoji as UI icons
 
 ## Out of scope (design)
 -

package/template/.issflow/templates/automation/feature-docker.js

@@ -18,9 +18,15 @@
 // own doc + slug. Results come back as commits on feature/<slug> (visible from the
 // main repo); remove the dir with `git worktree remove` after merge.
 'use strict';
-const fs = require('fs');
-const path = require('path');
-const { spawnSync } = require('child_process');
+// Dynamic imports work in both CommonJS and ESM project scopes.
+Promise.all([
+  import('node:fs'),
+  import('node:path'),
+  import('node:child_process'),
+]).then(([fsModule, pathModule, childModule]) => {
+const fs = fsModule.default;
+const path = pathModule.default;
+const { spawnSync } = childModule;
 
 const IMAGE = process.env.ISSFLOW_IMAGE || 'issflow-runner';
 const argv = process.argv.slice(2);
@@ -105,3 +111,7 @@ args.push(IMAGE, '-p', `/feature ${doc}`, '--dangerously-skip-permissions');
 const res = run('docker', args);
 if (res.status !== 0) die(`run exited with status ${res.status} — see output above; blockers land in docs/features/<slug>/BLOCKED.md`);
 console.log('feature-docker: done. Review the feature branch, then run /uat with the TEST-PLAN.');
+}).catch((error) => {
+  console.error('feature-docker: ' + error.message);
+  process.exitCode = 1;
+});

package/template/.issflow/templates/design/DIRECTION.md

@@ -0,0 +1,22 @@
+# Design direction — <project>
+
+> Status: PENDING | locked <id> <YYYY-MM-DD>
+
+## Chosen direction
+- Id: (A|B|C or catalogue slug)
+- Name:
+- Mood / one-liner:
+- Surfaces: web-responsive (default) · …
+
+## Tokens source
+- `docs/design/tokens.css`
+
+## Primary user tasks
+1.
+2.
+
+## Anti-patterns (do not ship)
+-
+
+## Notes
+-

package/template/.issflow/templates/design/inventory.md

@@ -0,0 +1,18 @@
+# Component inventory — <project>
+
+> Only listed components may be used in UI. New need → add here first (STOP if inventing mid-page).
+
+| Component | Variants | States required |
+|-----------|----------|-----------------|
+| Button | primary, ghost | default hover focus disabled loading |
+| Text field | default | default focus error disabled |
+| Nav (top) | desktop, collapsed | default |
+| Card | default | default |
+| Empty state | — | empty + CTA |
+| Alert | info, danger, success | default |
+
+## Icon set
+- One SVG set, `currentColor`. No emoji as UI icons.
+
+## Notes
+-

package/template/.issflow/templates/design/picker.html

@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Design direction picker — {{PROJECT}}</title>
+<style>
+  /* Fixed chrome — agents only replace CSS variables + text slots below. */
+  :root {
+    --bg: {{P1_BG}};
+    --surface: {{P1_SURFACE}};
+    --text: {{P1_TEXT}};
+    --muted: {{P1_MUTED}};
+    --accent: {{P1_ACCENT}};
+    --border: {{P1_BORDER}};
+    --radius: {{P1_RADIUS}};
+    --font: {{P1_FONT}};
+    --bg2: {{P2_BG}};
+    --surface2: {{P2_SURFACE}};
+    --text2: {{P2_TEXT}};
+    --muted2: {{P2_MUTED}};
+    --accent2: {{P2_ACCENT}};
+    --border2: {{P2_BORDER}};
+    --radius2: {{P2_RADIUS}};
+    --font2: {{P2_FONT}};
+    --bg3: {{P3_BG}};
+    --surface3: {{P3_SURFACE}};
+    --text3: {{P3_TEXT}};
+    --muted3: {{P3_MUTED}};
+    --accent3: {{P3_ACCENT}};
+    --border3: {{P3_BORDER}};
+    --radius3: {{P3_RADIUS}};
+    --font3: {{P3_FONT}};
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: system-ui, sans-serif; background: #f3f1ec; color: #1c1917; }
+  header { padding: 28px 24px 8px; max-width: 1100px; margin: 0 auto; }
+  header h1 { margin: 0 0 8px; font-size: 1.6rem; }
+  header p { margin: 0; color: #57534e; max-width: 52ch; }
+  .grid { display: grid; gap: 18px; padding: 20px 24px 40px; max-width: 1100px; margin: 0 auto;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+  .card { border: 1px solid #d6d3d1; border-radius: 12px; overflow: hidden; background: #fff;
+    box-shadow: 0 8px 24px rgba(28,25,23,.06); }
+  .card h2 { margin: 0; padding: 14px 16px 6px; font-size: 1.05rem; }
+  .meta { padding: 0 16px 12px; font-size: .85rem; color: #78716c; }
+  .swatches { display: flex; gap: 6px; padding: 0 16px 12px; }
+  .swatches i { width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); display: block; }
+  .preview { margin: 0 16px 16px; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
+    background: var(--c-bg); color: var(--c-text); font-family: var(--c-font); }
+  .preview.wide { --c-bg: var(--bg); --c-surface: var(--surface); --c-text: var(--text); --c-muted: var(--muted);
+    --c-accent: var(--accent); --c-border: var(--border); --c-radius: var(--radius); --c-font: var(--font); }
+  .d2 .preview.wide { --c-bg: var(--bg2); --c-surface: var(--surface2); --c-text: var(--text2); --c-muted: var(--muted2);
+    --c-accent: var(--accent2); --c-border: var(--border2); --c-radius: var(--radius2); --c-font: var(--font2); }
+  .d3 .preview.wide { --c-bg: var(--bg3); --c-surface: var(--surface3); --c-text: var(--text3); --c-muted: var(--muted3);
+    --c-accent: var(--accent3); --c-border: var(--border3); --c-radius: var(--radius3); --c-font: var(--font3); }
+  .top { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--c-surface);
+    border-bottom: 1px solid var(--c-border); font-size: .8rem; font-weight: 700; }
+  .top .brand { color: var(--c-accent); }
+  .top .spacer { flex: 1; }
+  .body { padding: 14px 12px; background: var(--c-bg); }
+  .body h3 { margin: 0 0 6px; font-size: .95rem; }
+  .body p { margin: 0 0 12px; font-size: .8rem; color: var(--c-muted); }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; }
+  .btn { border: 0; border-radius: var(--c-radius); padding: 8px 12px; font: inherit; font-size: .8rem; font-weight: 700; cursor: default; }
+  .btn.primary { background: var(--c-accent); color: #fff; }
+  .btn.ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
+  .field { flex: 1; min-width: 120px; border: 1px solid var(--c-border); border-radius: var(--c-radius);
+    padding: 8px 10px; background: var(--c-surface); color: var(--c-muted); font-size: .8rem; }
+  .narrow-wrap { padding: 0 16px 16px; }
+  .narrow { width: 160px; margin: 0 auto; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden;
+    background: var(--c-bg); color: var(--c-text); font-family: var(--c-font); transform: scale(1); }
+  .narrow .top { font-size: .7rem; padding: 8px; }
+  .narrow .body { padding: 10px 8px; }
+  .narrow .btn, .narrow .field { font-size: .7rem; padding: 6px 8px; }
+  .anti { padding: 0 16px 16px; font-size: .8rem; color: #9a3412; }
+  .pick { display: block; margin: 0 16px 16px; text-align: center; padding: 10px; border-radius: 8px;
+    background: #1c1917; color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; }
+  footer { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; color: #78716c; font-size: .85rem; }
+</style>
+</head>
+<body>
+<header>
+  <h1>{{PROJECT}} — pick a visual direction</h1>
+  <p>Open this file in a browser. Choose A, B, or C. Then lock tokens into <code>docs/design/DIRECTION.md</code> + <code>docs/design/tokens.css</code>. Do not re-roll styles after lock.</p>
+</header>
+<div class="grid">
+  <article class="card d1">
+    <h2>A · {{P1_NAME}}</h2>
+    <div class="meta">{{P1_BLURB}}</div>
+    <div class="swatches">
+      <i style="background:{{P1_BG}}"></i>
+      <i style="background:{{P1_SURFACE}}"></i>
+      <i style="background:{{P1_ACCENT}}"></i>
+      <i style="background:{{P1_TEXT}}"></i>
+    </div>
+    <div class="preview wide">
+      <div class="top"><span class="brand">Brand</span><span>Home</span><span>Work</span><span class="spacer"></span><span>Account</span></div>
+      <div class="body">
+        <h3>Primary task</h3>
+        <p>Short supporting line for this direction.</p>
+        <div class="row"><span class="field">Email</span><button class="btn primary" type="button">Continue</button><button class="btn ghost" type="button">Cancel</button></div>
+      </div>
+    </div>
+    <div class="narrow-wrap"><div class="narrow">
+      <div class="top"><span class="brand">Brand</span><span class="spacer"></span>☰</div>
+      <div class="body"><h3>Mobile</h3><p>Single column</p><button class="btn primary" type="button">Continue</button></div>
+    </div></div>
+    <div class="anti">Avoid: {{P1_ANTI}}</div>
+    <a class="pick" href="#lock-a">Lock direction A</a>
+  </article>
+  <article class="card d2">
+    <h2>B · {{P2_NAME}}</h2>
+    <div class="meta">{{P2_BLURB}}</div>
+    <div class="swatches">
+      <i style="background:{{P2_BG}}"></i>
+      <i style="background:{{P2_SURFACE}}"></i>
+      <i style="background:{{P2_ACCENT}}"></i>
+      <i style="background:{{P2_TEXT}}"></i>
+    </div>
+    <div class="preview wide">
+      <div class="top"><span class="brand">Brand</span><span>Home</span><span>Work</span><span class="spacer"></span><span>Account</span></div>
+      <div class="body">
+        <h3>Primary task</h3>
+        <p>Short supporting line for this direction.</p>
+        <div class="row"><span class="field">Email</span><button class="btn primary" type="button">Continue</button><button class="btn ghost" type="button">Cancel</button></div>
+      </div>
+    </div>
+    <div class="narrow-wrap"><div class="narrow">
+      <div class="top"><span class="brand">Brand</span><span class="spacer"></span>☰</div>
+      <div class="body"><h3>Mobile</h3><p>Single column</p><button class="btn primary" type="button">Continue</button></div>
+    </div></div>
+    <div class="anti">Avoid: {{P2_ANTI}}</div>
+    <a class="pick" href="#lock-b">Lock direction B</a>
+  </article>
+  <article class="card d3">
+    <h2>C · {{P3_NAME}}</h2>
+    <div class="meta">{{P3_BLURB}}</div>
+    <div class="swatches">
+      <i style="background:{{P3_BG}}"></i>
+      <i style="background:{{P3_SURFACE}}"></i>
+      <i style="background:{{P3_ACCENT}}"></i>
+      <i style="background:{{P3_TEXT}}"></i>
+    </div>
+    <div class="preview wide">
+      <div class="top"><span class="brand">Brand</span><span>Home</span><span>Work</span><span class="spacer"></span><span>Account</span></div>
+      <div class="body">
+        <h3>Primary task</h3>
+        <p>Short supporting line for this direction.</p>
+        <div class="row"><span class="field">Email</span><button class="btn primary" type="button">Continue</button><button class="btn ghost" type="button">Cancel</button></div>
+      </div>
+    </div>
+    <div class="narrow-wrap"><div class="narrow">
+      <div class="top"><span class="brand">Brand</span><span class="spacer"></span>☰</div>
+      <div class="body"><h3>Mobile</h3><p>Single column</p><button class="btn primary" type="button">Continue</button></div>
+    </div></div>
+    <div class="anti">Avoid: {{P3_ANTI}}</div>
+    <a class="pick" href="#lock-c">Lock direction C</a>
+  </article>
+</div>
+<footer>
+  Fallback presets (no Python): A Calm SaaS · B Bold Commerce · C Trust Fintech.
+  After lock, set STATE <code>design-direction: locked &lt;id&gt; &lt;date&gt;</code>.
+</footer>
+</body>
+</html>

package/template/.issflow/templates/design/platforms/line-oa.md

@@ -0,0 +1,16 @@
+# Platform pack — LINE OA
+
+## Not web CSS
+Design in Messaging API terms. Prototype Flex in Flex Message Simulator; verify on device.
+
+## Inventory
+| Piece | Notes |
+|-------|-------|
+| Rich menu | Image + tap bounds map |
+| Message types | text / flex / imagemap / … |
+| Flex bubbles | header/hero/body/footer; wrap long text |
+| LIFF | for forms needing web UI |
+| Reply vs push | quota / UX expectations |
+
+## Auth
+LINE userId linking to app user — record in ARCHITECTURE auth section.

package/template/.issflow/templates/design/platforms/mobile-app.md

@@ -0,0 +1,10 @@
+# Platform pack — mobile app
+
+## Conventions
+- Platform nav (tabs / stack) — do not paste web top-bar blindly
+- Touch targets ≥ 44×44
+- System type / spacing where OS expects it
+- Safe areas / notches
+
+## Screens
+List screen IDs + primary gestures (tap / swipe / long-press) per flow.

package/template/.issflow/templates/design/platforms/pwa.md

@@ -0,0 +1,11 @@
+# Platform pack — PWA
+
+## Beyond web-responsive
+- Install / add-to-home-screen affordance
+- Offline shell + update UX
+- Safe-area insets
+- Manifest icons + theme-color
+- Service worker update prompt (no silent break)
+
+## Out of scope unless listed
+-

package/template/.issflow/templates/design/platforms/web-responsive.md

@@ -0,0 +1,9 @@
+# Platform pack — web-responsive
+
+## Constraints
+- Mobile-first; breakpoints XS <640 · SM 640 · MD 768 · LG 1024 · XL 1280
+- Tokens only from `docs/design/tokens.css`
+- Wireframe baseline regions required
+
+## Must show per primary screen
+Route · primary CTA · empty · loading · error · <SM stack · ≥MD layout

package/template/.issflow/templates/design/screens/SCREEN.md

@@ -0,0 +1,19 @@
+# Screen: S-XX — <name>
+
+- Id: S-XX
+- Route: /
+- Surface: web-responsive
+- Primary job:
+- Primary CTA:
+- Breakpoints: <SM single column · ≥MD as wireframe
+- Empty:
+- Loading:
+- Error:
+
+## Regions (map to wireframe baseline)
+- Top bar:
+- Main:
+- Footer / status:
+
+## Tokens
+- Uses `docs/design/tokens.css` only

package/template/.issflow/templates/design/tokens.css

@@ -0,0 +1,47 @@
+/* Semantic tokens — only file allowed to hold raw color/size literals for UI.
+   Components must use these variables. Generated/locked from Direction Picker. */
+:root {
+  --color-bg: #f7f5f0;
+  --color-surface: #ffffff;
+  --color-text: #1c1917;
+  --color-text-muted: #78716c;
+  --color-border: #d6d3d1;
+  --color-accent: #0f766e;
+  --color-accent-contrast: #ffffff;
+  --color-danger: #b91c1c;
+  --color-success: #15803d;
+  --color-warning: #a16207;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: "Source Sans 3", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Fraunces", "Noto Serif Thai", ui-serif, Georgia, serif;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 2rem;
+  --leading-body: 1.5;
+}
+
+/* Optional dark pair — fill when direction includes dark mode */
+[data-theme="dark"] {
+  --color-bg: #0c0a09;
+  --color-surface: #1c1917;
+  --color-text: #fafaf9;
+  --color-text-muted: #a8a29e;
+  --color-border: #44403c;
+  --color-accent: #2dd4bf;
+  --color-accent-contrast: #042f2e;
+}