تشغيل أي مهارة في Manus بنقرة واحدة

ui-pencil-drawer

النجوم١

التفرعات٠

آخر تحديث٢ مارس ٢٠٢٦ في ١٤:٤٤

Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

vuthuonghai-steve

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مصممو واجهات الويب والرقميةمهن الحاسوب والرياضيات·SOC 15-1255

مستكشف الملفات

9 ملفات

SKILL.md

readonly

name	ui-pencil-drawer
description	Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.
category	ui
pipeline	{"stage_order":7,"input_contract":[{"type":"file","path":"Docs/life-2/ui/specs/{module}-ui-spec.md","required":true},{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","required":false}],"output_contract":[{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","format":"pen"}],"validation":{"script":null,"expected_exit_code":0},"dependencies":["ui-architecture-analyst"]}

⚡ CHẾ ĐỘ TỰ ĐỘNG (PIPELINE AUTOMATION MODE): Bạn đang chạy dưới sự ủy quyền của Orchestrator (Tool Task).

KHÔNG CHÀO HỎI, KHÔNG CHỜ ĐỢI: BẮT ĐẦU DÙNG TOOL LÀM VIỆC NGAY LẬP TỨC! Đừng bao giờ trả lời kiểu "Tôi đã hiểu, hãy cung cấp UC-ID...". Prompt bạn nhận được CHÍNH LÀ LỆNH THỰC THI Cuối cùng, hãy dùng Tool Read đọc file Blueprint và Generate Output ngay!

KHÔNG ĐƯỢC PHÉP HỎI (NO INTERACTION GATE): Bỏ qua TẤT CẢ các GATE trạm dừng, không được dừng lại hỏi ý kiến user. Tự suy luận và quyết định theo spec!

INPUT ĐỘNG (DYNAMIC INPUT): TUYỆT ĐỐI không đi tìm project-registry.json trừ khi Orchestrator bảo. CHỈ đọc các file mà Orchestrator chỉ định trong Prompt.

OUTPUT TRỰC TIẾP (DIRECT OUTPUT): Sau khi đọc input và suy luận <think> xong, GHI THẲNG CODE vào file ở thư mục đích bằng tool Write. Đừng hỏi "Ghi file chưa?".

المزيد من هذا المستودع

نفس المستودع

activity-diagram-design-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Senior Solutions Architect chuyên về Activity Diagram (High-Fidelity) theo tư duy Clean Architecture (B-U-E). Kích hoạt khi cần tạo activity diagram từ class diagram hoặc chạy pipeline UML stage 4. Đầu ra: Docs/life-2/diagrams/activity/{module}-activity.md

2026-03-021

class-diagram-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Class Structure Analyst chuyên về Class Diagram theo chuẩn dual-format (Mermaid + YAML Contract) cho PayloadCMS/MongoDB. Kích hoạt khi cần tạo class diagram từ sequence diagram hoặc chạy pipeline UML stage 3. Đầu ra: Docs/life-2/diagrams/class/{module}/class-{module}.md + class-{module}.yaml

2026-03-021

flow-design-analyst

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Senior Business Analyst chuyên về Business Process Flow Diagram (High-Fidelity) theo chuẩn 3-lane Swimlane (User/System/DB). Kích hoạt khi cần tạo flow diagram từ specs hoặc chạy pipeline UML stage 1. Đầu ra: Docs/life-2/diagrams/flow/{module}-flow.md

2026-03-021

global-system-planner

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Master System Planner. Phân tích ngữ cảnh tổng thể từ Functional Requirements, sinh ra Global Blueprint cho quá trình UML Generation. Đóng vai trò làm Stage 0 để truyền context tổng quát cho các Agent phân rã phía sau.

2026-03-021

payload-expert

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Payload CMS 3.x specialist for Steve Void project. Use when designing or implementing Payload collections, hooks, access control, Local API calls, or debugging Payload-related issues.

2026-03-021

pipeline-orchestrator

vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve

Điều phối pipeline chạy các skill theo thứ tự. Dùng khi cần tự động chạy nhiều skill (flow-design → sequence-design → class-diagram → ...) mà không cần can thiệp thủ công giữa các bước. Đọc pipeline.yaml, quản lý _queue.json, spawn subagents và theo dõi tiến trình.

2026-03-021

name	ui-pencil-drawer
description	Automates end-to-end drawing of UI screens in Pencil canvas from module spec files. Reads spec file → generates wireframe blueprint → draws each screen using Pencil MCP tools. Triggers when user provides a UI spec path and asks to draw, generate, or auto-build screens for Steve Void modules M1–M6 in STi.pen.
category	ui
pipeline	{"stage_order":7,"input_contract":[{"type":"file","path":"Docs/life-2/ui/specs/{module}-ui-spec.md","required":true},{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","required":false}],"output_contract":[{"type":"file","path":"Docs/life-2/ui/wireframes/{module}.pen","format":"pen"}],"validation":{"script":null,"expected_exit_code":0},"dependencies":["ui-architecture-analyst"]}

⚡ CHẾ ĐỘ TỰ ĐỘNG (PIPELINE AUTOMATION MODE): Bạn đang chạy dưới sự ủy quyền của Orchestrator (Tool Task).

KHÔNG CHÀO HỎI, KHÔNG CHỜ ĐỢI: BẮT ĐẦU DÙNG TOOL LÀM VIỆC NGAY LẬP TỨC! Đừng bao giờ trả lời kiểu "Tôi đã hiểu, hãy cung cấp UC-ID...". Prompt bạn nhận được CHÍNH LÀ LỆNH THỰC THI Cuối cùng, hãy dùng Tool Read đọc file Blueprint và Generate Output ngay!

KHÔNG ĐƯỢC PHÉP HỎI (NO INTERACTION GATE): Bỏ qua TẤT CẢ các GATE trạm dừng, không được dừng lại hỏi ý kiến user. Tự suy luận và quyết định theo spec!

INPUT ĐỘNG (DYNAMIC INPUT): TUYỆT ĐỐI không đi tìm project-registry.json trừ khi Orchestrator bảo. CHỈ đọc các file mà Orchestrator chỉ định trong Prompt.

OUTPUT TRỰC TIẾP (DIRECT OUTPUT): Sau khi đọc input và suy luận <think> xong, GHI THẲNG CODE vào file ở thư mục đích bằng tool Write. Đừng hỏi "Ghi file chưa?".