Skip to content

Commit 0b7f666

Browse files
duynnduduynndu
committed
feat: initialize template-editor project and document shape-to-template skill patterns
1 parent 7540ddf commit 0b7f666

5 files changed

Lines changed: 558 additions & 0 deletions

File tree

‎.github/skills/generate-template-from-shape-text/SKILL.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
name: generate-template-from-shape-text
3+
description: Generate Vue template from medical form shape descriptions written with characters instead of images
4+
---
5+
6+
# Skill: Generate Template from Shape Text
7+
8+
## Mục đích
9+
Skill này giúp AI phân tích mô tả biểu mẫu y tế bằng ký tự (ASCII/text sketch) và tạo template Vue tương ứng sử dụng các component có sẵn.
10+
11+
## Quy tắc chung
12+
1. **Strict visibility rule** - Chỉ tạo nội dung xuất hiện rõ ràng trong mô tả ký tự, không suy diễn thêm.
13+
2. **Chỉ trả về template Vue** - không kèm script, style, hoặc logic JS/TS.
14+
3. **Sử dụng component có sẵn** - tham khảo [component-mapping.md](component-mapping.md), [shape-patterns.md](shape-patterns.md), [template-capture/manifest.json](template-capture/manifest.json).
15+
4. **Layout Rules** - giữ đúng bố cục và thứ tự theo mô tả ký tự, ưu tiên flex/grid khi phù hợp.
16+
5. **Data Binding Rules** - chỉ dùng path dạng `data.TenTruong` (không dùng `hsBenhAn`, `context`, `data.obj.field`).
17+
6. **Không tạo file tool** - chỉ generate template string, không viết script automation.
18+
19+
---
20+
21+
## Định dạng input được hỗ trợ
22+
23+
Input có thể là một hoặc nhiều khối văn bản mô tả giao diện bằng ký tự, ví dụ:
24+
25+
```text
26+
================ PHIẾU KHÁM ================
27+
Họ tên: ______________________ Năm sinh: __/__/____
28+
Địa chỉ: ____________________________________________
29+
30+
[ ] Cấp cứu [ ] Bán cấp [ ] Khám thường
31+
32+
Chẩn đoán: ...........................................
33+
```
34+
35+
Hoặc:
36+
37+
```text
38+
+------------------------------------------+
39+
| Bệnh chính: [ICD] ________ Tên: _______ |
40+
| Bệnh kèm theo: [ICD LIST] |
41+
+------------------------------------------+
42+
```
43+
44+
---
45+
46+
## Quy trình phân tích mô tả ký tự
47+
48+
### Bước 1: Phân tích cấu trúc tổng thể
49+
- Xác định phạm vi nội dung text được cung cấp: chỉ convert trong phạm vi này.
50+
- Xác định loại trang: A4, A5 (nếu mô tả có nhắc; nếu không thì mặc định A4).
51+
- Xác định hướng trang: portrait/landscape nếu có dấu hiệu trong mô tả.
52+
- Nhận diện các block: header, body, footer chỉ khi mô tả thể hiện rõ.
53+
- Không tự thêm các phần thường gặp nếu mô tả không có.
54+
55+
### Bước 2: Mapping ký tự sang component
56+
Được ưu tiên theo [shape-patterns.md](shape-patterns.md):
57+
58+
- `[ ]` hoặc `☐` -> `Checkbox`
59+
- `__/__/____` hoặc `Ngày ... tháng ... năm ...` -> `DatePicker`
60+
- `________` hoặc `........` -> `Textarea` (`line :rows="1"`)
61+
- `[v]`, `▼`, `... (chon)` -> `Select`
62+
- `[ ][ ][ ]` (nhiều ô nhỏ liền nhau) -> `InputOTP`
63+
- `[ICD]` / `[ICD LIST]` / `Bệnh chính:` / `Bệnh kèm theo:` -> `IcdGroupItem` hoặc `IcdList`
64+
- `[SIGN]` / `Ký tên` / `Bác sĩ` / `Người bệnh` -> `Signature`
65+
- Khung trống có viền để viết/vẽ -> `Paint`
66+
67+
### Bước 3: Xác định data binding paths
68+
- Chỉ dùng 1 lớp: `data.TenTruong`
69+
- Cấm tuyệt đối: `hsBenhAn.*`, `BenhNhan.*`, `context.*`, `data.obj.field`, bất kỳ path lồng nhau nào.
70+
- Đặt tên field theo nhãn gần nhất trong mô tả text.
71+
72+
### Bước 4: Tạo template structure
73+
74+
```vue
75+
<PageA4 style="padding:20px; font-size:12pt">
76+
<!-- Header chỉ nếu có trong mô tả -->
77+
<div>
78+
<!-- Nội dung header -->
79+
</div>
80+
81+
<!-- Body -->
82+
<div>
83+
<!-- Form fields -->
84+
</div>
85+
86+
<!-- Footer chỉ nếu có trong mô tả -->
87+
<div>
88+
<!-- Chữ ký / thông tin cuối trang -->
89+
</div>
90+
</PageA4>
91+
```
92+
93+
---
94+
95+
## Layout Rules từ mô tả ký tự
96+
97+
1. Các dòng cùng hàng trong sketch -> cùng `display:flex` hoặc cùng một row grid.
98+
2. Ký tự canh cột (`|`) -> ưu tiên grid/flex có cột canh thẳng.
99+
3. Đường viền (`+---+`, `| |`) -> wrapper `div` có border.
100+
4. Khoảng trắng giữa các cụm text -> `gap` hoặc chia cột hợp lý.
101+
5. Tiêu đề viết hoa, can giữa trong mô tả -> text center, font-weight đậm.
102+
103+
---
104+
105+
## Component Rules quan trọng
106+
107+
1. `Textarea` 1 dòng: luôn ưu tiên `line :rows="1"`.
108+
2. Không dùng `:suffix` cho `Textarea` trong bất kỳ trường hợp nào.
109+
3. Checkbox có text bên phải: ưu tiên `afterText`.
110+
4. Ưu tiên dùng prop `label` của component khi field đứng độc lập theo dòng.
111+
5. Chỉ dùng wrapper khi cần layout phức tạp (nhiều field trên cùng hàng, checkbox + textarea, ...).
112+
113+
---
114+
115+
## Self-check trước khi trả kết quả
116+
117+
1. Toàn bộ `v-model`, interpolation `{{ }}`, `:items`, `:value` chỉ tham chiếu `data.*`.
118+
2. Không còn `hsBenhAn`, `context`, hoặc dạng nested `data.a.b`.
119+
3. Không để nguyên chuỗi dấu chấm/dấu gạch dưới để mô tả ô nhập; đã đổi sang component phù hợp.
120+
4. Không thêm section không tồn tại trong mô tả ký tự.
121+
122+
---
123+
124+
## TODO khi không chắc chắn
125+
126+
Nếu mô tả ký tự mơ hồ hoặc xung đột:
127+
128+
```vue
129+
<!-- TODO: Xác nhận component và data binding cho trường này -->
130+
<div>...</div>
131+
```
132+
133+
---
134+
135+
## Resources
136+
137+
- [Component Mapping and Props](component-mapping.md)
138+
- [Shape Patterns](shape-patterns.md)
139+
- [Capture Manifest](template-capture/manifest.json)
140+
- [Capture Components](template-capture/components)
141+
142+
---
143+
144+
## Notes
145+
146+
- Skill này đọc mô tả text/ASCII, không cần ảnh.
147+
- Chỉ generate template, không bao gồm script/style.
148+
- Mặc định giữ phong cách đơn giản, dễ map lại với bộ component hiện tại.

0 commit comments

Comments
 (0)