create-issflow 1.10.1 → 1.12.0

package/template/.issflow/skills/ux-design/SKILL.md

@@ -47,6 +47,10 @@ wireframe does not have. If the design truly needs a frame the wireframe lacks,
 STOP and update the wireframe baseline first (a design decision -> `log-decision`).
 When an approved `docs/UX-PACK.md` exists, treat it as the project frame — drift
 from the pack is a defect unless the pack is re-approved.
+When `docs/design/tokens.css` exists, components must use those semantic tokens —
+unapproved colors / off-grid spacing in UI files are a **BLOCK**. Run
+`node .issflow/scripts/token-lint.js` for unlisted hex/RGB colors; review semantic
+token usage and spacing separately because the script does not verify those. Frontend CLOSE also needs a **task check** for the primary user job.
 
 -----
 

package/template/.issflow/templates/ARCHITECTURE-template.md

@@ -29,10 +29,14 @@ into concrete boundaries the implementer follows per phase.
 - Stores / schemas (high level):
 - Migrations approach:
 
-## Auth & trust boundaries
-- Authn / authz:
-- Secrets:
+## Auth & trust boundaries (decision record)
+- Provider (e.g. Clerk / Auth.js / Supabase / custom / LINE Login):
+- Session model (cookie session / JWT / opaque):
+- Identity linking (e.g. LINE userId ↔ app user):
+- Roles / authz:
+- Secrets handling:
 - Threat notes (STRIDE if security-touching):
+- Open auth questions: none | (list — blocks Architectural approve if material)
 
 ## Integrations
 | Service | Use | Failure mode |

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/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;
+}