skills.rest
yzhao062
yzhao062COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ci-mockup-figure

Create space-efficient system diagrams and dashboards as vector-ready HTML mockups.

13|1|Updated Mar 21, 2026
Search Tags:#documentation#html#latex#diagram#mockup#tikz
One-click install
npx skills add https://github.com/yzhao062/agent-config --skill ci-mockup-figure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ci-mockup-figure
Source: https://github.com/yzhao062/agent-config/tree/main/skills/ci-mockup-figure
Command: npx skills add https://github.com/yzhao062/agent-config --skill ci-mockup-figure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create space-efficient system diagrams and dashboards that convey architecture and data flows in minimal page area.

Core Features & Use Cases

  • HTML mockups path: build interactive HTML, capture screenshots, and insert into LaTeX.
  • Abstract figure path: use TikZ/skia-canvas/Illustrator ExtendScript for arrow-heavy diagrams.
  • Design principles: ensure horizontal layouts, consistent color palettes, and vector exports for publication.
  • Use Case: imagine a paper needing a compact system overview and a timeline figure.

Quick Start

Open the ci-mockup-figure tool and run it to generate an HTML mockup, export vector figures, and prepare them for LaTeX insertion.

Frequently Asked Questions about ci-mockup-figure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create space-efficient system diagrams for LaTeX papers?▼

Space-efficient system diagrams for LaTeX are created by generating HTML mockups, capturing screenshots, and inserting them as vector exports. This approach ensures architecture and data-flow visuals fit minimal page area.

What is the best way to generate compact architecture diagrams for academic publications?▼

The best way to generate compact architecture diagrams is using a design-guided toolchain that outputs vector-ready figures. It enforces horizontal layouts and consistent color palettes to fit minimal page area in academic publications.

Can I use TikZ for arrow-heavy data-flow visuals in my proposals?▼

Yes, you can use TikZ for arrow-heavy data-flow visuals. The abstract figure path specifically utilizes TikZ, skia-canvas, and Illustrator ExtendScript to generate abstract diagrams for your proposals.

How do I export HTML mockups to vector figures for LaTeX insertion?▼

To export HTML mockups to vector figures for LaTeX insertion, run the ci-mockup-figure toolchain. It builds interactive HTML, captures the output, and prepares vector exports for direct document integration.

Does this approach support timeline figures alongside architecture diagrams?▼

Yes, this approach supports timeline figures alongside architecture diagrams. It targets both visual types, outputting them as space-efficient abstract diagrams or HTML mockups for papers and proposals.

Related Skills

Explore More Design & Creative Skills→
nahisahonahisaho
3

scientific-scientific-schematics

Generate publication-quality scientific schematics as SVG, Mermaid, or TikZ vector diagrams.

Community
Advanced
llv22llv22
5

paper-figure

Generate publication-quality figures and LaTeX-ready tables from experimental data.

Community
Advanced
githubgithub
37.6k

legacy-circuit-mockups

Render breadboard circuit mockups with HTML5 Canvas and grid-based component placement.

Official
Basic
arih04xarih04x
6

office-figure

Generate editable research figures for Word, PowerPoint, and LaTeX from draw.io or TikZ sources.

Community
Advanced