@jakkrichm/create-nexus-devflow 2.16.0 → 2.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakkrichm/create-nexus-devflow",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "Installer and workflow manager for Nexus-DevFlow agentic workflow layer.",
   "license": "MIT",
   "author": "Jakkrich",

package/template/AGENTS.md

@@ -9,7 +9,7 @@ This project uses **Nexus-DevFlow**, an agentic workflow layer supporting **The
 2. **⚡ Present (Active Context)**: `devflow/context/` — Global Shared Source of Truth (`project-overview.md`, `coding-standards.md`, `ai-interaction.md`, `glossary.md`) & Active Task Workspaces (`devflow/context/{xxx-slug}/`).
 3. **📦 Past (History Archive)**: `devflow/history/` — Categorized delivery archives (`features/`, `fixes/`, `rollbacks/`, and `HISTORY.md`).
 
-To start a new project, scaffold the application first in an empty folder, then run `npm create nexus-devflow` (or `npx nexus-devflow`) to overlay DevFlow onto your codebase.
+To start a new project, scaffold the application first in an empty folder, then run `npx nexus-devflow` (or `npm create @jakkrichm/nexus-devflow`) to overlay DevFlow onto your codebase.
 
 ## Read these for full context
 
@@ -55,7 +55,7 @@ Unused adapter families can be removed. Codex, Antigravity, GitHub Copilot, and
    - **Execution Safety Gate**: DO NOT execute the skill's primary or mutating actions (do not launch scans/attacks, do not modify source code, and do not initialize new task runs).
    - **Dynamic Workspace Inspection**: Read the target skill definition (`.agents/skills/<skill>/SKILL.md`, `.claude/skills/<skill>/SKILL.md`, and any vendored resources such as `devflow/.vendor/<skill>/`), then scan the active workspace (`devflow/context/project-overview.md`, `package.json`, tech stack, active tasks, endpoints, and file hierarchy).
    - **Persistent HTML Playbook & Token-Saving Cache**:
-     - **Output Location**: Compile and persist the tailored playbook as a standalone, styled HTML report at `devflow/docs/playbooks/{skill}.html` (responsive design, dark/light theme, collapsible sections, copyable command snippets).
+     - **Output Location & Light Theme Mandate**: Compile and persist the tailored playbook as a standalone, styled HTML report at `devflow/docs/playbooks/{skill}.html` adhering to the **Paper/Ink Light Theme Standard** (`data-theme="light"`, teal accent, ruler corner, terminal mockup UI, and diagram slot per `devflow/docs/playbooks/template.html`). Never generate dark-mode-first documentation.
      - **First Run**: Render the comprehensive 5W1H playbook in chat and write the complete HTML report to `devflow/docs/playbooks/{skill}.html`.
      - **Subsequent Invocations (Delta Updates & Zero Token Bloat)**: If `devflow/docs/playbooks/{skill}.html` already exists:
        - Inspect the existing HTML file and compute the diff/delta against the current repository state (e.g., new file paths, modified endpoints, or newly installed vendor assets).
@@ -64,19 +64,22 @@ Unused adapter families can be removed. Codex, Antigravity, GitHub Copilot, and
        - In-place update `devflow/docs/playbooks/{skill}.html` with the fresh timestamp and state.
        - Provide a direct clickable link to [devflow/docs/playbooks/{skill}.html](file:///d:/devtools/nexus-devflow/devflow/docs/playbooks/{skill}.html) for browser viewing.
    - **Render the User-Friendly 5W1H Playbook**: Emit an easy-to-read, practical guide organized around the **5W 1H Framework** (rendered on initial run or updated in the HTML playbook):
-     1. **What (คืออะไร & ทำอะไรได้บ้าง)**: Clear, jargon-free summary of what this skill does, its core concept, and its bundled tools/capabilities.
-     2. **Why (ทำไมต้องใช้ & ประโยชน์ที่ได้รับ)**: The problems it solves, key advantages, and why you should use it instead of ad-hoc manual work.
-     3. **Who (เหมาะสำหรับใคร)**: Target audience or engineering role (e.g., Feature Developer, Senior QA, Security Auditor, Solo Dev, or Tech Lead).
-     4. **Where (ใช้กับส่วนไหน & บันทึกผลที่ใด)**: Target workspace boundaries, affected directories, and generated artifact locations (e.g., `devflow/context/`, `devflow/discoveries/`, `findings.md`).
-     5. **When (ควรใช้ตอนไหน & ลำดับก่อน-หลัง)**:
-        - **Timing & Triggers**: Practical situations or milestones when this skill should be invoked.
-        - **Run Before (Prerequisites)**: What to check, prepare, or run beforehand to get the best result.
-        - **Run After (Next Steps)**: What DevFlow command or lifecycle stage should follow next (e.g., handing off to `/fix`, `/feature`, or `/complete`).
-     6. **How (ใช้งานอย่างไร & ตัวอย่างคำสั่งจริง)**:
-        - **How It Works (Lifecycle)**: Simple, plain-language breakdown of the execution steps or phases.
-        - **Available Commands & Options**: Common sub-commands, arguments, and flags with brief explanations.
-        - **Safety & Guardrails**: Operational boundaries (read-only vs. code modifications, credential hygiene).
-        - **Ready-to-Use Command Recipes**: Concrete, copy-pasteable command snippets with plain-language descriptions of what each accomplishes.
+      1. **What (Concept & Capabilities)**: Clear, jargon-free summary of what this skill does, its core concept, and its bundled tools/capabilities.
+      2. **Why (Problems Solved & Key Benefits)**: The problems it solves, key advantages, and why you should use it instead of ad-hoc manual work.
+      3. **Who (Target Roles & Personas)**: Target audience or engineering role (e.g., Feature Developer, Senior QA, Security Auditor, Solo Dev, or Tech Lead).
+      4. **Where (Boundaries & Artifact Locations)**: Target workspace boundaries, affected directories, and generated artifact locations (e.g., `devflow/context/`, `devflow/discoveries/`, `findings.md`).
+      5. **When (Timing & Prerequisites/Next Steps)**:
+         - **Timing & Triggers**: Practical situations or milestones when this skill should be invoked.
+         - **Run Before (Prerequisites)**: What to check, prepare, or run beforehand to get the best result.
+         - **Run After (Next Steps)**: What DevFlow command or lifecycle stage should follow next (e.g., handing off to `/fix`, `/feature`, or `/complete`).
+      6. **How (Execution Lifecycle & Real Command Examples)**:
+         - **How It Works (Lifecycle)**: Simple, plain-language breakdown of the execution steps or phases.
+         - **Available Commands & Options**: Common sub-commands, arguments, and flags with brief explanations.
+         - **Safety, Guardrails & Precautions**: Operational boundaries, credential hygiene, read-only vs. mutating constraints, and explicit special safety constraints / precautions.
+      7. **Diagram Slot & Architecture Flow**:
+         - **Real Diagram Mandate**: MUST embed a real, verified vector SVG or interactive diagram reflecting actual skill lifecycle, state transitions, or threat models in Light Theme (`data-theme="light"`).
+         - **Thai Language & Legible Typography**: Architecture and flow diagrams must describe workflows and nodes in Thai language while preserving technical identifiers, paths, and commands in English. Typography must be sufficiently sized and legible for Thai script (Headers 13–14px, box content/descriptions 11–12px, line spacing 18–22px) to prevent tone marks and vowels from clipping or overlapping.
+         - **Strictly No Placeholders**: NEVER output empty placeholder cards, generic instruction text, or phrases like *"when invoking archify..."*. Every playbook must ship with a real visual architectural diagram.
    - Always conclude the response with: `"Help menu displayed successfully"`.
 
 ---
@@ -86,7 +89,7 @@ Unused adapter families can be removed. Codex, Antigravity, GitHub Copilot, and
 All development tasks execute through the 4-step progressive lifecycle:
 
 ```text
-/feature (หรือ /fix) ──▶ /implement ──▶ /check ──▶ /complete
+/feature (or /fix) ──▶ /implement ──▶ /check ──▶ /complete
 ```
 
 1. **`feature` / `fix` (`/feature`, `/fix`)**:

package/template/devflow/context/coding-standards.md

@@ -197,3 +197,53 @@ Testing is a core quality gate in Nexus-DevFlow, not an afterthought:
   - Store durable, high-impact, hard-to-reverse architectural decisions in `devflow/decisions/`.
   - Number sequentially (`ADR-001`, `ADR-002`, ...).
   - Must include: Context, Decision, Alternatives Considered (with trade-offs), and Consequences (positive gains and accepted risks).
+
+---
+
+## 12. HTML Documentation & Theming Standards (Light Theme Mandate)
+
+All generated HTML artifacts across the framework (Contextual Help Playbooks `devflow/docs/playbooks/{skill}.html`, Standalone Reports `report-html`, Architecture & Workflow Diagrams `archify` / `diagram-design`, and UI Prototypes/Mockups) MUST strictly adhere to the **Paper/Ink Light Theme Design System**:
+
+- **Mandatory Default `data-theme="light"`**:
+  - All HTML documents must start with `<html lang="th" data-theme="light">`.
+  - Prohibit dark mode as the default theme. Never generate pure black or dark gray (`#0d1117`, `#020617`) backgrounds for documentation.
+- **Core Design Tokens (Paper / Ink + Teal Accent)**:
+  - **Canvas & Background**: `--bg: #f5f6f8` with subtle 32px grid lines (`linear-gradient(var(--border) 1px, transparent 1px)`).
+  - **Surfaces & Cards**: Pure white `--surface: #ffffff` with 1px border `--border: #e1e4ea` and subtle elevation `--shadow-sm`.
+  - **Secondary Surfaces**: `--surface-alt: #eef0f4` for code blocks, terminal body, and table headers.
+  - **Typography & Ink**: High-contrast `--ink: #171a21`, muted `--ink-muted: #5b6072`, faint `--ink-faint: #9297a6`.
+  - **Primary Accent**: Teal `--accent: #0f766e` with soft backgrounds `--accent-soft: #e5f3f1` and border `--accent-line: #9fd6d0`.
+  - **Semantic Accents**: Violet `--violet: #6d28d9` (Diagrams/Architecture), Amber `--amber: #b45309` (Warnings), Red `--red: #b42318` (Danger), Green `--green: #15803d` (Success/Live).
+- **Focal Point & Motion Discipline**:
+  - Exactly **one subtle motion focal point** per screen: ruler corner (`hero-ruler`) at the header top-right + slow-pulsing green live dot (`.live-dot`).
+  - The rest of the page remains still and calm; no competing animations or flashing components.
+  - Sequential animation (`step-in`) is reserved strictly for ordered sequential pipelines or decision ladders.
+- **Interactive Terminal Mockup UI**:
+  - Represent realistic CLI execution using a dark macOS-style terminal card with window dots (`.terminal-dot`), prompt symbol (`❯`), and blinking cursor (`.cursor`) to make command recipes feel alive and tangible.
+- **Real Diagram Mandate in Section 07 (Strictly No Placeholder Text)**:
+  - Section 07 (Diagram Slot & Architecture Flow) in every playbook MUST contain a **real, fully-formed interactive or vector SVG diagram** with concrete architectural data, flow nodes, and verified lifecycle steps specific to that skill.
+  - **Strictly prohibit placeholder text or generic instructional notices** (such as *"when invoking archify... render with data-theme='light'... connect diagram..."*).
+  - All embedded diagrams must render with `data-theme="light"` matching the Paper/Ink palette (`--surface: #ffffff`, `--bg: #f5f6f8`, `--border: #e1e4ea`, `--accent: #0f766e`).
+- **Thai Language & Legible Typography Mandate for Architecture Diagrams (Vector SVG)**:
+  - **Thai Language Primary**: All architectural and workflow diagrams (Vector SVG) **must explain workflows and concepts in Thai** for clear, accessible comprehension, while retaining technical identifiers, file paths, and command syntax in English.
+  - **Legible Typography for Thai Script**:
+    - Because Thai script features ascenders, descenders, upper/lower vowels, and tone marks, prohibit small font sizes that cause tone marks to be clipped or glyphs to collide (never use font sizes below 10px).
+    - **Standard Font Sizes in SVG**:
+      - **Header Titles**: **13px – 14px** (Font-weight: 700)
+      - **Node / Box Titles**: **12px – 13px** (Font-weight: 600–700)
+      - **Descriptions & Bullet Points**: **11px – 12px** (Font-weight: 400–500)
+      - **Code / Badges**: Minimum **10px – 10.5px**
+      - **Line Spacing (Y-Offset)**: Maintain at least **18px – 22px** line spacing between stacked text elements to render Thai tone marks and vowels cleanly without crowding.
+- **Safety, Guardrails & Precaution Standards**:
+  - Every playbook must explicitly specify **Safety & Guardrails**, **Operational Boundaries**, and **Precautions**.
+  - Detail specific safety constraints, such as safe operational boundaries (Read-Only vs. Mutating), credential/secret hygiene, and hard stops (e.g., no unauthorized auto-merge, no bypassing verification).
+  - Surface these critical notices using high-visibility UI Alert Cards, such as `.alert.alert-danger` (for critical security constraints and operational hard stops) and `.alert.alert-warning` (for essential conditions and operational precautions).
+- **Diagram Tooling Integration Contract (`archify` & `diagram-design`)**:
+  - When generating external or companion diagrams via `archify` or `diagram-design`, always enforce `--theme light` / `data-theme="light"` (or URL query `?theme=light`) to match the document palette seamlessly.
+- **Typography & Accessibility**:
+  - Fonts: Google Sans (`'Google Sans'`, `'Google Sans Text'`) for display headers and body text, `'JetBrains Mono'` for code and monospaced data.
+  - Full support for `prefers-reduced-motion: reduce` and clear `:focus-visible` outlines.
+- **Master Reference Template**:
+  - Refer to `devflow/docs/playbooks/template.html` as the authoritative, reusable component reference for all playbook and HTML documentation generation.
+
+