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.

설치로 이동

저장소: vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve
최근 소스 활동: 2026년 3월 2일 14:44
감지된 SKILL.md 언어: 베트남어
스타: 1
포크: 0

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/vuthuonghai-steve/KLTN-By_Thuong_Hai-Steve --skill ui-pencil-drawer

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

9 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

검색으로 돌아가기 설치로 돌아가기

activity-diagram-design-analyst

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-02

class-diagram-analyst

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-02

flow-design-analyst

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-02

이 저장소의 모든 Skills 보기

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?".

ui-pencil-drawer

소스 정보

설치 방법

소스 파일 검토

이 저장소의 다른 Skills

이 저장소의 다른 Skills