@anhth2/spec-driven-dev-plugin 0.6.0 → 0.8.0

package/templates/design-spec.template.md

@@ -0,0 +1,209 @@
+# {TICKET-ID} {Feature Name} — Design Spec [{Platform}]
+
+<!--
+  Template này được sử dụng bởi /generate-design-spec.
+  Platform = web | app | app-ios | app-android
+
+  PLATFORM SECTIONS:
+  - Section 3A + 4A: chỉ dành cho web (react/nextjs/vue/angular). Xóa C khi dùng cho web.
+  - Section 3C + 4B: chỉ dành cho app (flutter/react-native/ios/android). Xóa A+B khi dùng cho app.
+
+  COMPONENT MAPPING (bắt buộc):
+  - Mọi component trong Component Inventory PHẢI được map với figma-components/{module}.md
+  - ✅ Matched     → dùng Code Component và Import Path từ catalog
+  - ⚠️ TODO        → đánh dấu [TODO — chưa implement]
+  - ❌ Chưa có     → đánh dấu [NEW — cần confirm với designer]
+
+  SCREEN STATES (bắt buộc mỗi màn):
+  - Tối thiểu: default, loading, error
+  - Thêm "empty" nếu màn có thể hiển thị trạng thái không có dữ liệu
+  - Thêm "success" nếu action tạo ra trạng thái xác nhận riêng biệt
+-->
+
+---
+
+## Metadata
+
+| Field              | Value                                                         |
+|--------------------|---------------------------------------------------------------|
+| **Spec ID**        | {TICKET-ID}-DS-{platform}                                     |
+| **Version**        | 1.0                                                           |
+| **Status**         | draft / approved                                              |
+| **Platform**       | {web \| app \| app-ios \| app-android}                        |
+| **Module**         | {active_module}                                               |
+| **Service**        | {active_service}                                              |
+| **Domain**         | {domain}                                                      |
+| **Business PRD**   | [{TICKET-ID}](./{TICKET-ID}-slug.md)                          |
+| **Figma**          | {figma_url or TBD}                                            |
+| **Author**         | {PO name or "AI-assisted"}                                    |
+| **Created**        | {YYYY-MM-DD}                                                  |
+| **Updated**        | {YYYY-MM-DD}                                                  |
+
+---
+
+# 1. Screen Inventory
+
+| # | Screen Name | Entry Point | Figma Frame | Notes |
+|---|-------------|-------------|-------------|-------|
+| 1 | {Screen 1}  | {how user arrives} | [Frame]({figma_url}) | |
+| 2 | {Screen 2}  | {entry point} | [Frame]({figma_url}) | |
+
+---
+
+# 2. Screen Specs
+
+## Screen 1: {Screen Name}
+
+**Figma**: [{Frame name}]({figma_frame_url})
+
+### Layout
+
+{Grid / max-width / padding / spacing — reference design tokens where applicable}
+
+### Component Inventory
+
+| Component (Figma)      | Code Component | Import Path            | States                          | Notes   |
+|------------------------|----------------|------------------------|---------------------------------|---------|
+| {Figma/Button/Primary} | Button         | @/components/ui/Button | default, loading, disabled      |         |
+| {Figma/Input/Text}     | TextInput      | @/components/ui/Input  | default, focus, error, disabled |         |
+
+### Screen States
+
+| State     | Trigger                          | UI Behavior                                              |
+|-----------|----------------------------------|----------------------------------------------------------|
+| default   | Screen loaded, data available    | {Describe full rendered appearance}                      |
+| loading   | API call in flight               | {Skeleton / spinner position and style}                  |
+| error     | API failure / validation error   | {Toast / inline error / error screen + recovery CTA}     |
+| empty     | No data returned                 | {Illustration + CTA — e.g., "No items yet. Add one →"}   |
+| success   | Action completed (if applicable) | {Confirmation toast / navigation / visual change}        |
+
+### Actions & Navigation
+
+| Action          | Trigger                   | Result                                            |
+|-----------------|---------------------------|---------------------------------------------------|
+| {Action name}   | Tap/click {element}       | Navigate to {Screen N} / Open {Modal name}        |
+| {Back/Cancel}   | Back gesture / button     | Return to {previous screen} without saving        |
+
+---
+
+<!--  Repeat ## Screen N for each additional screen  -->
+
+---
+
+# 3. Interaction Patterns
+
+<!-- === WEB ONLY — delete this section for app === -->
+
+## A. Responsive Behavior  *(web)*
+
+| Breakpoint | Width      | Layout Changes                              |
+|------------|------------|---------------------------------------------|
+| Mobile     | < 768px    | {Single column, bottom nav, full-width CTA} |
+| Tablet     | 768–1279px | {2-col grid, sidebar collapsed}             |
+| Desktop    | ≥ 1280px   | {Full layout, max-width 1440px}             |
+
+## B. Hover / Focus / Keyboard  *(web)*
+
+| Element        | Hover                         | Focus                           | Keyboard      |
+|----------------|-------------------------------|---------------------------------|---------------|
+| Primary button | Background → {color.hover}    | Outline 2px {color.focus}       | Enter / Space |
+| Text input     | Border → {color.border.hover} | Border → {color.primary}        | Tab to focus  |
+
+<!-- === APP ONLY — delete sections A+B for app === -->
+
+## C. Gestures & Navigation  *(app)*
+
+| Gesture              | Screen / Element    | Behavior                                    |
+|----------------------|---------------------|---------------------------------------------|
+| Back gesture         | All screens         | {Return / show "Discard changes?" dialog}   |
+| Pull-to-refresh      | {Screen names}      | Refresh data, spinner at top                |
+| Swipe left on row    | {List item}         | Reveal {Delete / Archive} action            |
+
+### Navigation Stack  *(app)*
+
+```
+{e.g., BottomTab(Home) → ListPage → DetailPage → EditPage}
+```
+
+### Platform Conventions  *(app)*
+
+| Aspect           | iOS                                       | Android                             |
+|------------------|-------------------------------------------|-------------------------------------|
+| Navigation bar   | Back button top-left, title centered      | Up arrow, title left-aligned        |
+| Bottom sheet     | UISheetPresentation, grabber visible      | BottomSheet, drag handle            |
+| Dialog           | Actions right-aligned                     | Actions left-aligned                |
+
+---
+
+# 4. Platform Considerations
+
+<!-- === WEB ONLY === -->
+
+## A. Accessibility  *(web)*
+
+- [ ] All interactive elements reachable by Tab key — no keyboard traps
+- [ ] Focus trap inside modals
+- [ ] Icon-only buttons have `aria-label`
+- [ ] Dynamic content announces via `aria-live`
+- [ ] WCAG AA contrast: text ≥ 4.5:1, large text ≥ 3:1
+- [ ] Form inputs have visible labels (not placeholder-only)
+
+<!-- === APP ONLY === -->
+
+## B. Device & OS  *(app)*
+
+- [ ] Safe area insets applied (top + bottom) on all screens
+- [ ] Minimum touch target: 44×44pt (iOS) / 48×48dp (Android)
+- [ ] Tested on 375pt (iPhone SE) and 360dp (small Android)
+- [ ] Deep link: `{scheme}://{host}/{path}` → {screen name}
+- [ ] Permissions: {Camera / Location / Notification} — rationale copy TBD
+- [ ] Offline: {screen name} shows cached data + banner; {action} disabled with tooltip
+- [ ] Dark mode tested — no hardcoded colors
+
+---
+
+# 5. AC-UI — Design Acceptance Criteria
+
+> Reviewed and signed off by **PO + Designer** before BDD generation.
+> Complements business-level AC in [Business PRD](./{TICKET-ID}-slug.md).
+
+| ID     | Acceptance Criterion                                                     | Verified by     |
+|--------|--------------------------------------------------------------------------|-----------------|
+| AC-UI1 | All screens match approved Figma frames within design-system tolerances  | Designer        |
+| AC-UI2 | Loading state appears within 200ms of any API call initiation            | QA              |
+| AC-UI3 | All error messages are visible, descriptive, and include a recovery CTA  | PO              |
+| AC-UI4 | Empty states include illustration and call-to-action                     | PO + Designer   |
+| AC-UI5 | {Platform-specific criterion}                                            | QA              |
+
+---
+
+# Appendix
+
+## Figma Summary
+
+| Screen     | Figma Frame          | Status                         |
+|------------|----------------------|--------------------------------|
+| {Screen 1} | [Link]({url})        | ✅ Ready / ⏳ WIP / ❌ Missing  |
+
+## Design Tokens Referenced
+
+| Token             | Value    | Used in                    |
+|-------------------|----------|----------------------------|
+| `color.primary`   | {#hex}   | Buttons, links             |
+| `spacing.md`      | {16px}   | Standard vertical gap      |
+
+## References
+
+- [{TICKET-ID}](./{TICKET-ID}-slug.md) — Business PRD
+
+## AI Assumptions
+
+- {Assumption — [AI DRAFT]}
+
+---
+
+## Changelog
+
+| Version | Date         | Changes         |
+|---------|--------------|-----------------|
+| 1.0     | {YYYY-MM-DD} | Initial version |

package/templates/project-context.yaml

@@ -48,6 +48,9 @@ paths:
   # Tech Docs
   tech_docs_dir: "tech-docs"
 
+  # Design Specs (FE/App platforms only — web, app)
+  design_spec_dir: "specs/design-spec"
+
   # Trace
   trace_dir: ".trace"
 
@@ -69,6 +72,32 @@ domains:
   - "{{DOMAIN_1}}"
   # - "{{DOMAIN_2}}"
 
+# ----- Multi-Service / Umbrella Setup -----
+# Fill this section ONLY if this is an UMBRELLA repo that contains multiple
+# service submodules. Leave commented out for single-service projects.
+#
+# setup:
+#   mode: umbrella                            # "umbrella" | "single" (default: single)
+#   spec_source: "{{SPEC_SUBMODULE_PATH}}"   # path to PO spec submodule, e.g. "free-trial-specs"
+#
+# When spec_source is set, context-loader auto-derives:
+#   prd_dir              → {spec_source}/specs/prd
+#   design_spec_dir      → {spec_source}/specs/design-spec
+#   domain_knowledge_dir → {spec_source}/specs/domain-knowledge
+# (You can still override these manually in paths: section below.)
+#
+# services:                                   # domain → service submodule routing
+#   {{DOMAIN_1}}:                             # must match @trace.domain in PRD files
+#     path: "{{SERVICE_SUBMODULE_DIR}}"       # relative path to service submodule
+#     module: "{{STACK_MODULE}}"              # e.g., java-spring, nextjs, flutter
+#     specs_dir: "{{SERVICE_SUBMODULE_DIR}}/specs/bdd"
+#     tech_docs_dir: "{{SERVICE_SUBMODULE_DIR}}/specs/tech-docs"
+#   {{DOMAIN_2}}:
+#     path: "{{SERVICE_2_DIR}}"
+#     module: "{{STACK_MODULE}}"
+#     specs_dir: "{{SERVICE_2_DIR}}/specs/bdd"
+#     tech_docs_dir: "{{SERVICE_2_DIR}}/specs/tech-docs"
+
 # ----- Architecture -----
 architecture:
   style: "{{ARCH_STYLE}}"              # e.g., Layered / Clean / Hexagonal