@edupia-tutor/spec-driven-docs 0.14.0 → 0.14.2

package/skills/design-spec/SKILL.tmpl

@@ -1,21 +1,21 @@
 ---
-description: Generates a Design Specification document for FE or App platforms from a Business PRD. Trigger when: "/generate-design-spec", "tạo design spec", "generate design spec", "viết design spec", "tạo tài liệu thiết kế UI", "generate UI spec", "cần design spec cho", "tôi muốn spec UI", "tài liệu cho FE", "tài liệu cho app".
+description: Sinh tài liệu Design Specification cho platform FE hoặc App từ một Business PRD. Trigger when: "/generate-design-spec", "tạo design spec", "generate design spec", "viết design spec", "tạo tài liệu thiết kế UI", "generate UI spec", "cần design spec cho", "tôi muốn spec UI", "tài liệu cho FE", "tài liệu cho app".
 ---
 
 # /generate-design-spec — Generate Design Specification (FE / App)
 
-This skill generates a platform-specific Design Spec from a Business PRD.
-Design Spec captures screen-level UI requirements, component inventory, platform interactions,
-and design-level AC-UI for PO + Designer sign-off — separate from the business-level PRD.
+Skill này sinh một Design Spec riêng theo platform từ một Business PRD.
+Design Spec nắm bắt yêu cầu UI mức màn hình, component inventory, tương tác platform,
+và AC-UI mức design để PO + Designer sign off — tách khỏi PRD mức nghiệp vụ.
 
-**Supported platforms:** web (react / nextjs / vue / angular), app (flutter / react-native / ios-swiftui / android-compose)
-**Not supported:** backend services — API contracts belong in the Business PRD.
+**Platform hỗ trợ:** web (react / nextjs / vue / angular), app (flutter / react-native / ios-swiftui / android-compose)
+**Không hỗ trợ:** service backend — API contract thuộc về Business PRD.
 
 ---
 
 ## Gate
 
-<!-- Directory: specs/*/*/prd.md -->
+<!-- Directory: specs/*/*/*.md (file PRD ở gốc feature folder) -->
 {{include:steps/gate.md}}
 
 ---
@@ -24,59 +24,59 @@ and design-level AC-UI for PO + Designer sign-off — separate from the business
 
 {{include:steps/context-loader.md}}
 
-*Read the target PRD. Extract: TICKET-ID, domain, feature name, Service, Module from metadata, User Flow (Section 4a), Wireframe screen names (Section 4b).*
+*Đọc PRD target. Trích: TICKET-ID, domain, tên feature, Service, Module từ metadata, User Flow (Section 4a), tên màn hình Wireframe (Section 4b).*
 
 ---
 
 ## Platform Check
 
-- `platform_type = "backend"` → **STOP**: "Design Spec is only for FE/App. BE API contracts go in the Business PRD."
+- `platform_type = "backend"` → **STOP**: "Design Spec chỉ dành cho FE/App. API contract BE đi vào Business PRD."
 - `platform_type = "web-frontend"` → `active_platform = "web"`
-- `platform_type = "mobile"` → `active_platform = "app"` (or `"app-ios"` / `"app-android"` for native)
-- `platform_type = "unknown"` → ask user to select platform
+- `platform_type = "mobile"` → `active_platform = "app"` (hoặc `"app-ios"` / `"app-android"` cho native)
+- `platform_type = "unknown"` → hỏi user chọn platform
 
 ---
 
 ## Figma Check
 
-Ask: "Do you have a Figma link? (paste URL or Enter to skip)"
+Hỏi: "Bạn có link Figma không? (dán URL hoặc Enter để skip)"
 
-Store as `figma_url` or set to `"TBD"` with AI Assumption noted.
+Lưu thành `figma_url` hoặc set `"TBD"` kèm AI Assumption.
 
 ---
 
 ## Screen Discovery
 
-Extract screen names from PRD Section 4. Present list for PO to confirm/add before generating.
+Trích tên màn hình từ Section 4 của PRD. Trình bày danh sách để PO confirm/thêm trước khi sinh.
 
 ---
 
 ## Generate
 
-Write `specs/{domain}/{prd-slug}/design-spec/{TICKET-ID}-design-spec-{active_platform}-{slug}.md`.
+Ghi `specs/{domain}/{prd-slug}/design-spec/{TICKET-ID}-design-spec-{active_platform}-{slug}.md`.
 
-Structure:
-1. **Metadata** — Spec ID, platform, module, service, Business PRD link, Figma link
-2. **Screen Inventory** — table of all screens with entry points and Figma frame links
-3. **Screen Specs** (per screen):
-   - Layout (grid, spacing, design tokens)
+Cấu trúc:
+1. **Metadata** — Spec ID, platform, module, service, link Business PRD, link Figma
+2. **Screen Inventory** — bảng mọi màn hình với entry point và link Figma frame
+3. **Screen Specs** (theo từng màn):
+   - Layout (grid, spacing, design token)
    - Component Inventory (Figma → code component, import path, states)
    - Screen States (default / loading / error / empty / success)
-   - Actions & Navigation (triggers → results)
-4. **Interaction Patterns** (platform-adaptive):
-   - Web: responsive breakpoints table, hover/focus/keyboard table
-   - App: gesture table, navigation stack diagram, iOS vs Android conventions table
-5. **Platform Considerations** (platform-adaptive):
-   - Web: accessibility checklist (WCAG, keyboard, ARIA)
-   - App: safe area, touch targets, deep links, permissions, offline, dark mode
-6. **AC-UI** — design acceptance criteria table (Verified by: Designer / PO / QA)
-7. **Appendix** — Figma summary, design tokens, references, AI assumptions, changelog
-
-Component mapping rules:
-- Check `figma-components/{active_module}.md` (loaded in context) for every component
-- ✅ Found → use exact Code Component + Import Path
-- ⚠️ TODO → mark `[TODO — implementation pending]`
-- ❌ Not found → mark `[NEW — confirm with designer]`
+   - Actions & Navigation (trigger → kết quả)
+4. **Interaction Patterns** (thích ứng theo platform):
+   - Web: bảng responsive breakpoint, bảng hover/focus/keyboard
+   - App: bảng gesture, sơ đồ navigation stack, bảng convention iOS vs Android
+5. **Platform Considerations** (thích ứng theo platform):
+   - Web: checklist accessibility (WCAG, keyboard, ARIA)
+   - App: safe area, touch target, deep link, permission, offline, dark mode
+6. **AC-UI** — bảng design acceptance criteria (Verified by: Designer / PO / QA)
+7. **Appendix** — tóm tắt Figma, design token, references, AI assumptions, changelog
+
+Quy tắc component mapping:
+- Kiểm tra `figma-components/{active_module}.md` (nạp trong context) cho mọi component
+- ✅ Found → dùng đúng Code Component + Import Path
+- ⚠️ TODO → đánh dấu `[TODO — implementation pending]`
+- ❌ Not found → đánh dấu `[NEW — confirm with designer]`
 
 ---
 
@@ -85,11 +85,11 @@ Component mapping rules:
 {{include:steps/report-footer.md}}
 
 ```
-/generate-design-spec Complete — {TICKET-ID} [{active_platform}]
+/generate-design-spec Hoàn tất — {TICKET-ID} [{active_platform}]
 ---
 Status : ✅ Complete
 Output Artifacts:
   created specs/{domain}/{prd-slug}/design-spec/{TICKET-ID}-design-spec-{active_platform}-{slug}.md  (v1.0)
-Next   : Share with Designer → add Figma links → PO + Designer sign-off
+Next   : Chia sẻ với Designer → thêm link Figma → PO + Designer sign-off
          → /generate-bdd {prd-file}
 ```