القائمة
Generate quick PNG UI mockups (dashboards/panels) and store them under logics/external. Use when the user asks for on-the-fly visual mockups or PNG previews.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | logics-mockup-generator |
| description | Generate quick PNG UI mockups (dashboards/panels) and store them under logics/external. Use when the user asks for on-the-fly visual mockups or PNG previews. |
Use this skill to create fast, disposable UI mockups (PNG) directly in the repo. Output goes to logics/external/mockup/ by default. Defaults are neutral (non-domain-specific); pass your own labels when you want domain-specific content.
Always generate both mobile and desktop variants unless the user explicitly asks for only one.
For VS Code extensions, use the vscode preset and generate desktop only.
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--layout desktop \
--out logics/external/mockup/dashboard-desktop.png
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--layout mobile \
--out logics/external/mockup/dashboard-mobile.png
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--preset vscode \
--out logics/external/mockup/logics-orchestrator-desktop.png \
--title "LOGICS ORCHESTRATOR" \
--columns "Requests|Backlog|Tasks|Specs" \
--detail-title "Details" \
--detail-lines "ID: req_000_kickoff|Stage: request|Status: draft|Owner: you|Updated: today"
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--mode breakdown \
--layout desktop \
--out logics/external/mockup/breakdown-desktop.png
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--mode breakdown \
--layout mobile \
--out logics/external/mockup/breakdown-mobile.png
You can override the title, cards, and top‑skills list:
python logics/skills/logics-mockup-generator/scripts/mockup.py \
--out logics/external/mockup/dashboard-mock.png \
--title "OVERVIEW" \
--cards "Metric A|52,180|+9.1%;Metric B|8,340|+2.6%;Metric C|1,284|+3.4%;Metric D|9h 10m|-18m" \
--action-time "Active time|6h 22m|+41m" \
--skills "Category A|1h 32m|24%;Category B|1h 06m|17%;Category C|58m|15%;Category D|46m|12%;Category E|39m|10%" \
--tabs "Overview|Breakdown" \
--layout desktop
Formats:
--cards: Label|Value|Delta entries separated by ;.--action-time: single Label|Value|Delta.--skills: Name|Time|Share entries separated by ;.logics/external/mockup/ unless you pass a different --out.pip install pillow) if not already available.Lint and validate the Logics Markdown conventions. Use when Codex should verify filenames, top headings, and required indicators across `logics/request`, `logics/backlog`, `logics/tasks`, `logics/product`, and `logics/architecture`, and report inconsistencies.
Update Logics indicators consistently. Use when Codex should update request/backlog/task indicators (`From version`, `Understanding`, `Confidence`, `Progress`, `Complexity`, `Theme`) or companion doc indicators in `logics/product|architecture/*.md` such as `Date`, `Status`, `Drivers`, related refs, and `Reminder`.
Manage this repository's Logics workflow (logics/request -> logics/backlog -> logics/tasks) and keep companion product or architecture refs aligned: create new request/backlog/task docs, promote between stages, keep From version, Understanding, Confidence, and Progress indicators consistent, and generate correctly-numbered filenames. Use when a user asks to triage an idea, write a request, promote it to a backlog item, or create an executable task plan.
Bootstrap the Logics directory structure in a new repository (create `logics/architecture`, `logics/product`, `logics/request`, `logics/backlog`, `logics/tasks`, `logics/specs`, `logics/external`) and add `.gitkeep` files for empty folders so the structure stays versioned. Use when setting up Logics in a fresh project or validating that required directories exist.
Generate Logics workflow Mermaid blocks with a deterministic fallback that stays compatible with the flow manager.
Generate a consolidated index of Logics documents. Use when Codex should build or refresh `logics/INDEX.md` summarizing requests, backlog items, and tasks with titles and progress.