{"id":"6003713d-36d8-40e9-9703-a8908ef9548c","shortId":"zdEAB9","kind":"skill","title":"ci-mockup-figure","tagline":"Create space-efficient figures for papers and proposals. HTML mockups for systems, dashboards, and timelines; TikZ or skia-canvas for abstract diagrams with arrow routing. Covers tool selection, design, capture, and LaTeX insertion. The primary goal is maximizing information per ","description":"# CI Mockup Figure\n\n## Overview\n\nThe goal is **space-efficient, information-dense figures** that communicate\na system's design, a method's pipeline, or an architectural flowchart in\nminimal page area. Two paths depending on figure type:\n\n- **HTML mockup path** (Phases 1-4 below): for UI mockups, dashboards,\n  timelines, and any figure where content is rectangular with no cross-node\n  arrows. Build interactive HTML, capture screenshots, insert into LaTeX.\n- **Abstract figure path** (Abstract Figure Toolchain section): for\n  architecture overviews, dependency topologies, and any figure needing\n  arrow routing between non-adjacent nodes. Use TikZ, skia-canvas, or\n  Illustrator ExtendScript.\n\nEvery figure must pass the space test: does this figure communicate more per\nsquare inch than the text it displaces? If a full-width figure takes half a\npage but only says \"A → B → C → D\", it fails. A wrapfigure showing an\ninteractive prototype with search results, graph nodes, and real data labels\npasses because it communicates system design, data model, and UX simultaneously.\n\nThis skill works for any document where figures need to communicate design\nor methodology credibly: research papers (method overview, architecture\ndiagrams, pipeline flowcharts), proposals (NSF, NIH, DOE, etc.), technical\nreports, or demo writeups. It is especially effective when the figure needs\nto show multi-component structure, data flow, or step-by-step methodology\nand reviewers evaluate whether the design is credible and well-conceived.\n\n### HTML mockups vs TikZ/LaTeX diagrams\n\nHTML and TikZ each have a clear strength. The deciding factor is **whether\nthe figure needs arrow routing between non-adjacent nodes**.\n\n| | HTML mockup | TikZ |\n|---|---|---|\n| Visual polish | Modern CSS, shadows, gradients, rounded cards | Flat, academic-looking boxes |\n| Iteration speed | Change CSS and refresh | Recompile LaTeX, debug positioning |\n| Layout control | Flexbox/grid, responsive | Manual coordinate math |\n| Color/font variety | Full CSS + web fonts | Limited, verbose color defs |\n| Interactivity | View switching, capture mode | Static only |\n| **Arrow routing** | **Breaks on cross-row/non-adjacent nodes** | **Node anchoring solves this natively** |\n| Font matching | Separate from LaTeX | Perfect match with document body |\n\n**Prefer HTML** for system mockups, dashboards, Gantt/timeline figures, and\nany figure where the content is inherently rectangular and flows naturally\n(no cross-node arrows needed).\n\n**Prefer TikZ** for abstract framework diagrams, dependency topologies, and\narchitecture overviews where arrows must route between non-adjacent nodes\n(L-shaped, curved, crossing rows). TikZ node anchoring (`node.south`,\n`node.east`) handles this natively. Also prefer TikZ for small inline\ndiagrams that must live inside the LaTeX source or when exact font matching\nis critical.\n\n**Prefer skia-canvas** (Node.js) when you need the arrow-routing control of\nTikZ but want faster iteration (edit `.mjs`, run, get PDF) and richer\nvisual styling than TikZ provides.\n\n### HTML mockups vs AI image generation\n\nHTML mockups are strictly better than AI-generated images for system and\nmethod figures. AI image generation is acceptable only for artistic/conceptual\noverview diagrams.\n\n| | HTML mockup | AI image generation |\n|---|---|---|\n| Text legibility | Pixel-perfect, real fonts | Often garbled or blurry |\n| Data accuracy | Every number/label controlled | Hallucinated values |\n| Iteration speed | Change CSS and refresh | Re-prompt and hope |\n| Consistency | Same palette across figures | Each generation varies |\n| Print quality | Vector PDF via browser print | Always raster |\n| Reviewer trust | Looks like a system you could build | Looks like a concept sketch |\n\n### HTML mockups vs PowerPoint (for timelines)\n\nHTML is also better than PPTX for Gantt/timeline figures:\n\n| | HTML | PowerPoint |\n|---|---|---|\n| Alignment | CSS grid, pixel-perfect | Manual drag |\n| Edits | Change one label, everything reflows | Reposition every box |\n| Color consistency | CSS variables, one source of truth | Manual color matching |\n| Capture | Browser Print → PDF (vector) | Export PDF (often wrong margins) |\n\n## When to Use\n\n- The document describes a multi-component system or multi-step methodology\n  (e.g., \"representation layer + discovery service + workflow engine\", or\n  \"data collection → feature extraction → model training → evaluation\")\n- Abstract pipeline diagrams feel generic and do not differentiate the work\n- The figure needs to show architectural structure, data flow, or method\n  pipeline with real labels, not just boxes and arrows\n- Collaborators need something interactive to react to and iterate on\n- The document has a page limit and figures need to be space-efficient\n- A timeline/Gantt figure is needed for the work plan or project overview\n\n### When NOT to Use (either path)\n\n- **Experimental result figures** (plots, charts, tables, ablation curves) --\n  use Python (matplotlib, seaborn, plotly) or LaTeX (pgfplots, tikz) instead.\n  This skill is for system/method diagrams, not data visualization.\n\n### When to Use the Abstract Path Instead of HTML\n\n- **Abstract framework diagrams with cross-node arrow routing** --\n  dependency topologies, architecture overviews with curved arrows between\n  non-adjacent nodes, box-and-arrow conceptual figures. HTML/CSS fails at\n  arrow routing: JS-positioned SVG arrows drift and misalign, CSS\n  pseudo-element arrows work only for simple adjacent connections, and card\n  grid layouts read as a product dashboard, not a research diagram. Use the\n  Abstract Figure Toolchain section below.\n\n## Abstract Figure Toolchain\n\nWhen the figure is NOT a UI mockup, dashboard, or timeline (i.e., it needs\narrows between nodes, dependency edges, or architectural flow), HTML/CSS is\nthe wrong tool. The core problem: **arrow routing is the bottleneck**, not\nbox/text rendering. Any tool with node-anchor-based arrow endpoints works;\nany tool relying on CSS layout for arrow positioning will struggle.\n\n### What fails in HTML/CSS for abstract diagrams\n\n| Problem | Why |\n|---|---|\n| Curved arrows between components | Requires absolute-positioned SVG overlay that fights CSS layout |\n| External screenshots as hero images | Multi-panel screenshots break `object-fit: cover` and explode containers |\n| Card grid layout | Reads as a product dashboard, not a research diagram |\n| Print fidelity | Browser print rescales unpredictably for non-page layouts |\n| Emoji/icons for decoration | Instantly makes the figure look unprofessional |\n\n### Recommended tools (ranked by context)\n\n| Context | Tool | Why |\n|---|---|---|\n| LaTeX paper, arrow-heavy | **TikZ** | Node anchoring (`node.south`, `node.east`) handles arrow routing natively. Font/style consistency with the paper is free. Academic gold standard. |\n| Programmatic iteration needed | **skia-canvas** (Node.js) | Same Canvas API as HTML but headless, with direct PDF/SVG vector export. Edit coordinates in `.mjs`, run `node script.mjs`, get PDF. No browser, no capture, no pdfcrop. |\n| Final hand-polish needed | **Illustrator ExtendScript** (`.jsx`) | Generate programmatically, then hand-adjust. Best for figures that need to look \"designed.\" Requires Illustrator. |\n| Python-only environment | **drawsvg** (`pip install drawsvg`) | SVG-first imperative drawing. For PDF, convert the output SVG externally (e.g., Inkscape CLI or `cairosvg`, which needs the Cairo C library and is tricky on Windows). |\n\n**Not recommended:** D2 (auto layout too unpredictable for precise academic\nfigures), Graphviz (limited custom styling), matplotlib (designed for data\nplots, not diagrams).\n\n### skia-canvas workflow\n\nA parallel capture path to the HTML workflow, for abstract figures:\n\n```bash\nnpm install skia-canvas\n# edit generate-figure.mjs (Canvas API: ctx.roundRect, ctx.fillText, ctx.lineTo)\nnode generate-figure.mjs\n# outputs figure.pdf (vector), figure.svg, figure.png\n# use figure.pdf directly in \\includegraphics — no pdfcrop needed\n```\n\nScript structure pattern:\n```\ngen_overview.mjs\n├── helpers: roundRect(), text(), drawArrow(), drawImage()\n├── layout constants: W, H, panel positions, gap sizes\n├── draw():\n│   ├── header bar (title + thumbnails)\n│   ├── component panels (frame + internal diagram + footer)\n│   ├── inter-component arrows with labeled handoffs\n│   └── bottom strip (use cases + running example)\n└── export: PDF + PNG preview\n```\n\nAdjust coordinates, rerun, get new PDF instantly. No browser, no print quirks.\n\n### Design principles for abstract/architecture figures\n\n1. **No external screenshots in component panels.** Draw diagrams\n   programmatically (nodes, edges, flow stages). Screenshots are not made\n   for your figure's aspect ratio and will break.\n2. **Real images only in grounding areas** (use case strips, running example\n   ribbons) where they are decorative context, not structural elements.\n3. **Horizontal layout for pipeline figures** (T1 -> T2 -> T3 left-to-right).\n   Vertical stacking wastes landscape width.\n4. **Minimal elements per panel**: badge, title, one diagram, short\n   description, one output line.\n5. **Light tint fills** (`rgba(..., 0.06-0.08)`), thick top-border accent\n   per component. No saturated card backgrounds, no shadows, no pills/chips.\n6. **Inter-component arrows with labeled handoffs** (e.g., \"Asset Graph\",\n   \"Discovery Trace\") as explicit connectors, not just whitespace.\n7. **Professional typography**: system sans-serif (Segoe UI, Arial) or serif\n   (Georgia). Never playful fonts. No emoji.\n\n## Space Budget (decide first)\n\nBefore designing anything, decide the figure budget for the document. The\ntable below uses LaTeX environments as examples; adapt to the target format.\n\n| Figure type | Space cost | When to use |\n|---|---|---|\n| `wrapfigure{r}{0.55\\textwidth}` | ~55% column width, text wraps beside | **Best default** for system mockups — gives prose enough room |\n| `wrapfigure{r}{0.46\\textwidth}` 2x2 grid | ~46% column width, 4 images in compact grid | Motivation figures with matched-ratio panels |\n| `figure[t]` full-width | Full column, ~3-4cm height for landscape | Timelines, overview diagrams, or mockups with small text |\n| `subfloat` 1x4 row in `figure[t]` | Full column, ~3cm height | Cross-domain motivation (all same aspect ratio) |\n\n**Lesson learned: 0.68\\textwidth is too wide for most wrapfigures.** At 0.68,\nthe remaining text column is too narrow for comfortable reading and the prose\nwraps through multiple paragraphs. Default to **0.55–0.56\\textwidth** for\nsystem mockups. Use 0.68 only for simple figures with large text.\n\n**Rule of thumb for page-limited documents (e.g., 15-page proposal):**\n- 3 main figures as wrapfigures = ~1.5 pages of figure space\n- 1 overview figure + 1 motivation figure = ~1 page\n- Total figure budget: ~2.5 pages out of 15 (17%) — leave 83% for text\n\n**Horizontal layout is mandatory.** Vertical/portrait screenshots waste 50%+\nof their space on a landscape-format page. Design the mockup for wide capture\nfrom the start.\n\n## Phase 1: Design the Mockup\n\n### 1a. Split complex interfaces into separate figures\n\nDo not cram multiple interfaces into one figure. If a system has a\ncoordinator-facing view and a citizen-facing view, build both in one HTML file\nbut capture them as **separate screenshots**, each inserted at its own\nrelevant subtask in the LaTeX.\n\nAdd **view-switching buttons** (e.g., COORDINATOR / CITIZEN / BOTH) to the\ntoolbar so the user can toggle views and capture each at full width. Each\nview mode should have its own CSS that expands sidebars, scales up fonts,\nand adjusts proportions for the full-width layout.\n\n### 1b. Identify the views\n\nEach major thrust or component gets its own view. Typically 3-4 views:\n- A dashboard/overview showing the full pipeline\n- One view per thrust showing that thrust's specific interface\n\n### 1c. Choose per-thrust visual identity\n\nEach thrust needs a distinct color palette with **three tones** (solid, mid,\nlight) so bars, cards, and legends are consistent:\n\n```css\n--t1: #0d9488; --t1-mid: #5eead4; --t1-light: #ccfbf1;\n--t2: #2563eb; --t2-mid: #93c5fd; --t2-light: #dbeafe;\n```\n\nUse the light tone for activity bars with a solid-tone border, the solid tone\nfor milestone/completion bars, and the mid tone sparingly for hover states.\n**Legend swatches must match the actual bar appearance** — if bars are light\nwith colored borders, show that in the legend, not a solid fill.\n\n### 1d. Embed real public-domain imagery\n\nUse real, public-domain scientific imagery as **low-opacity backgrounds** to\nadd geographic or domain credibility without overwhelming the schematic:\n\n- NASA Earth Observatory for satellite/geoscience imagery\n- NOAA for climate/ocean data products\n- USGS for terrain/hazard data\n\nEmbed as CSS background with `opacity: 0.15–0.20` and `filter: saturate(0.6)`.\nAdd a small attribution credit (e.g., \"Imagery: NASA/USGS Landsat 9, Jan 14\n2025\") in the corner. Download locally to `figure-src/assets/` for offline\nreliability.\n\n### 1e. Choose icons\n\nUse Lucide (ISC license) or similar SVG icon library. Define icons as an SVG\nsprite block at the top of the HTML so they are referenced once and used\neverywhere via `<svg><use href=\"#icon-name\"/></svg>`. Inline SVG icons in\npanel headers add polish with zero external dependencies.\n\n## Phase 2: Build the Mockup\n\n### Technical requirements\n\n- Single self-contained HTML file per figure type (system mockup and timeline\n  should be separate files, not crammed into one)\n- Embedded CSS and JavaScript\n- System fonts preferred for offline reliability; Google Fonts acceptable only\n  with explicit fallback stacks (e.g., Georgia, system-ui, Consolas)\n- Dark sidebar + light main area, or similar professional layout\n- Responsive to container size changes (for print/screenshot)\n\n### Key features to include\n\n- **View switching** via toolbar buttons (not sidebar — saves horizontal space)\n- **Screenshot mode** (`CAPTURE` button): hides toolbar and any titles that\n  duplicate the LaTeX caption, tightens spacing, scales up fonts for legibility\n- **Print CSS** (`@media print`): hides chrome, preserves background colors,\n  forces landscape orientation, allows text wrapping in bars\n- **Dynamic rendering** (graphs, DAGs): use percentage-based CSS positioning,\n  not absolute pixels, so nodes survive container resize during print\n\n### Visual polish checklist\n\nRaw mockups that look like \"developer prototypes\" undermine credibility. These\ndetails make the difference:\n\n- **Depth**: subtle box-shadows on cards, layered backgrounds\n  (`linear-gradient` on surfaces)\n- **Cards**: rounded corners, colored left-border accent for action/alert cards\n- **Typography hierarchy**: bold subtask numbers in bar labels, monospace for\n  metrics and audit trails, proper weight differentiation\n- **SVG glow filters** on key nodes (assembly points, critical indicators)\n- **Progress bars** alongside metric values (not just numbers)\n- **Status indicators**: colored dots, pulse animations for live status\n\n### Per-thrust layout patterns\n\nVary the layout between thrusts for visual interest:\n- **Thrust A**: Info panels left | Interactive canvas right\n- **Thrust B**: Search+results left | Explanation cards right (both info-dense)\n- **Thrust C**: Canvas left | Timeline+cards right (flipped from A)\n\n### Common pitfalls\n\n- Dynamic graph nodes positioned with `px` values break during print — use `%`\n- `wrapfigure` in LaTeX needs text below it to wrap — place before a long\n  paragraph, never at section end\n- Large hero images waste space in wide mode — integrate as panel backgrounds\n  at low opacity instead of giving them a full column\n- Screenshots are vertical by default — must design horizontal layout explicitly\n- **Wrap-environment collisions**: never place a `wrapfigure` immediately before\n  a `wraptable` or another `wrapfigure` — LaTeX emits collision warnings and\n  forces floats out of position. Separate them with at least one full paragraph\n  of unwrapped text, or convert one to a `figure[t]`/`table[t]`\n- **`white-space: nowrap` truncates text in print** — bar labels and tags must\n  allow wrapping. Always test the print preview (`Ctrl+P`) before capturing.\n  Remove `nowrap`, add `line-height: 1.2`, and increase row height to\n  accommodate wrapped text.\n- **Capture mode should hide the HTML title/header** — the LaTeX caption\n  provides the title. Duplicating it in the screenshot wastes vertical space.\n\n## Phase 2b: Timeline / Gantt Figures\n\nFor work plan timeline figures, use a standalone HTML file with CSS grid.\n\n### Design principles\n\n- **CSS grid** with quarter-columns: `grid-template-columns: <label-width>\n  repeat(16, 1fr)` for a 4-year / 16-quarter layout\n- **Phase bars spanning multiple quarters** — not one bar per quarter. Use\n  `grid-column: N / M` to span consecutive phases as single continuous blocks.\n- **Stagger start times** to show dependencies. Not all thrusts start Q1.\n  If Thrust 2 depends on Thrust 1 outputs, start Thrust 2's bar in Q2 or Q3.\n- **Subtask numbers in bar labels** (e.g., \"**1.1** WRF-SFIRE calibration\")\n  so reviewers can cross-reference to the thrust text.\n- **Milestone diamonds** at delivery points; solid-fill bars for milestone\n  quarters, bordered-light bars for activity phases.\n- **Integration row** at the bottom with dark-pill milestone markers spanning\n  across all thrusts (M1: Component demos, M2: End-to-end pipeline, etc.).\n- **Legend** must match actual bar appearance (light + border for activity,\n  solid for milestone, diamond for marker, dark pill for integration).\n\n### Timeline capture\n\n- Click CAPTURE → `Ctrl+P` → Destination: Save as PDF → Layout: **Landscape**\n  → Margins: None → Save.\n- Insert as `figure[t]` full-width (timelines need the detail).\n\n## Phase 3: Review with Codex\n\nUse the `implement-review` skill to send the staged figure to Codex for review.\nKey review points (apply to both HTML and abstract paths):\n\n1. **Scientific accuracy** — are dataset names, diagnostics, and workflow steps\n   plausible for the target domain?\n2. **Visual differentiation** — do the component views look distinct?\n3. **Legibility at print size** — will fonts survive at `0.55\\textwidth`?\n4. **Branch coverage** — if the system has multiple modes (e.g., zero-vehicle\n   vs HV-owning), does the caption explicitly label which branch is shown?\n5. **Figure cross-references** — every figure must have a `Figure~\\ref{}`\n   callout in the prose. Figures without cross-references feel decorative.\n\nAdditional review points for the **abstract path**:\n6. **Arrow routing** — do all arrows connect at correct node anchors? No\n   floating or misaligned endpoints.\n7. **No dashboard aesthetic** — the figure should read as a research diagram,\n   not a product UI.\n8. **Vector output** — PDF/SVG output is vector, not rasterized.\n\nIterate based on feedback. Typical: 2-3 rounds.\n\n## Phase 4: HTML Capture and Insert\n\n### Capture workflow\n\n1. Open the mockup in Chrome\n2. Click the view button for the target thrust (e.g., COORDINATOR)\n3. Click `CAPTURE` to hide toolbar and titles\n4. `Ctrl+P` → Save as PDF (landscape, no margins) for **vector output**, or\n   take a screenshot for PNG\n5. Save as `figure/thrustN.pdf` (or `.png`)\n\n**Prefer PDF** — text and SVG elements stay vector (sharp at any zoom). Only\nthe embedded satellite imagery stays raster. Drop the file extension in\n`\\includegraphics` so LaTeX auto-selects the best available format:\n```latex\n\\includegraphics[width=0.55\\textwidth]{figure/thrust4-coord}\n```\n\n### Trim white margins with `pdfcrop`\n\nBrowser-exported PDFs have full-page white margins that waste space in LaTeX.\nUse `pdfcrop` (bundled with TeX Live) to trim to the content bounding box.\n\n```bash\npdfcrop figure/timeline.pdf figure/timeline-trimmed.pdf\npdfcrop --margins 4 figure/thrust1.pdf figure/thrust1-trimmed.pdf\n```\n\n**Always keep the original and write to a separate `-trimmed` file.** This\npreserves the full-page source for re-trimming with different margins later.\nUse the trimmed file in `\\includegraphics`.\n\n- `pdfcrop` uses Ghostscript for bounding box detection, which is reliable\n  for both vector and raster content.\n- Default padding is 0 bp. Use `--margins N` to add N bp on all sides (2-4\n  is typical for proposal figures).\n- Do not attempt pixel-based or metadata-based trimming with PyMuPDF or\n  similar — these methods frequently misdetect content bounds on\n  browser-exported PDFs.\n\n### LaTeX insertion\n\nDefault to `wrapfigure` at **0.55–0.56\\textwidth**:\n\n```latex\n\\begin{wrapfigure}{r}{0.56\\textwidth}\n  \\vspace{-1.2em}\n  \\centering\n  \\includegraphics[width=0.55\\textwidth]{figure/thrust1}\n  \\caption{\\textbf{Thrust 1 title.} Brief description of what the\n  screenshot shows, referencing left and right panels. If the system\n  has multiple modes, state which mode is shown (e.g., ``zero-vehicle\n  branch; the HV-owning branch provides departure/route guidance'').}\n  \\label{fig:thrust1}\n  \\vspace{-1.4em}\n\\end{wrapfigure}\n```\n\nPlace the `wrapfigure` before a paragraph with 10+ lines of text below it.\nNever place at the end of a section.\n\nFor timelines, use full-width `figure[t]`:\n```latex\n\\begin{figure}[t]\n  \\centering\n  \\includegraphics[width=\\textwidth]{figure/timeline}\n  \\caption{\\textbf{Four-year work plan and integration timeline.}\n  Colored bars show per-thrust activities by quarter; diamonds mark\n  milestones; bottom row shows integration checkpoints (M1--M4).}\n  \\label{fig:timeline}\n  \\vspace{-1em}\n\\end{figure}\n```\n\n### Motivation figure\n\nFor a cross-domain motivation figure (e.g., \"spatio-temporal data spans\nmultiple national-priority domains\"):\n\n1. Source 3-4 images from federal agencies (NASA, NOAA, USGS, USDA)\n2. Ensure all images have the same aspect ratio (e.g., all 3:2 from NASA\n   Earth Observatory)\n3. Use `\\subfloat` with `height=` for equal-height tiling\n4. Cite data sources with `@misc` bib entries using institutional authors\n5. Reference each panel in the opening paragraph prose\n\n## Output Checklist\n\n### HTML mockup path\n- [ ] HTML mockup(s) in `figure-src/` with all assets in `figure-src/assets/`\n- [ ] Separate HTML files for system mockup vs timeline (not combined)\n- [ ] View-switching buttons for multi-interface systems\n- [ ] Print preview tested — text wraps, no truncation, landscape orientation\n- [ ] Screenshot PNG/PDF files in `figure/` (originals kept, trimmed copies via `pdfcrop`)\n\n### Abstract figure path\n- [ ] Generation script (`.mjs` for skia-canvas, `.tex` for TikZ, `.jsx` for Illustrator) in `figure-src/`\n- [ ] Vector output (PDF/SVG) in `figure/` — no browser capture needed\n- [ ] Arrow endpoints anchored to correct node edges, no drift\n- [ ] No dashboard aesthetic (no card shadows, no pills/chips, no emoji)\n- [ ] Professional typography (system sans-serif or serif, no playful fonts)\n\n### Both paths\n- [ ] `wrapfigure` (0.55–0.56) or `figure[t]` environments in tex files\n- [ ] `Figure~\\ref{}` callouts in the prose for every figure\n- [ ] Captions describing visible content with explicit branch/mode labeling\n- [ ] Legend swatches match actual bar/card colors in the figure\n- [ ] Bib entries for any cited data products (NASA, USGS, etc.)\n- [ ] Codex review passed (scientific accuracy, legibility, differentiation)","tags":["mockup","figure","anywhere","agents","yzhao062","agent-config","agent-skills","agents-md","ai-agents","ai-safety","claude-code","code-review"],"capabilities":["skill","source-yzhao062","skill-ci-mockup-figure","topic-agent-config","topic-agent-skills","topic-agents-md","topic-ai-agents","topic-ai-safety","topic-claude-code","topic-code-review","topic-codex","topic-dual-agent-review","topic-git-safety","topic-npm","topic-opinionated"],"categories":["anywhere-agents"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/yzhao062/anywhere-agents/ci-mockup-figure","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add yzhao062/anywhere-agents","source_repo":"https://github.com/yzhao062/anywhere-agents","install_from":"skills.sh"}},"qualityScore":"0.532","qualityRationale":"deterministic score 0.53 from registry signals: · indexed on github topic:agent-skills · 165 github stars · SKILL.md body (23,252 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T06:54:58.897Z","embedding":null,"createdAt":"2026-04-18T22:16:06.847Z","updatedAt":"2026-05-02T06:54:58.897Z","lastSeenAt":"2026-05-02T06:54:58.897Z","tsv":"'-0.08':1330 '-1':3164 '-1.2':3036 '-1.4':3089 '-3':2783 '-4':90,1465,1730,2988,3191 '/assets':1925,3266 '/non-adjacent':366 '0':2975 '0.06':1329 '0.15':1897 '0.20':1898 '0.46':1438 '0.55':1419,1527,2678,2879,3026,3041,3368 '0.56':1528,3027,3033,3369 '0.6':1902 '0.68':1498,1507,1534 '0d9488':1777 '1':89,1244,1564,1567,1570,1612,2493,2645,2793,3047,3188 '1.1':2510 '1.2':2382 '1.5':1559 '10':3100 '14':1914 '15':1551,1579 '16':2443,2449 '17':1580 '1a':1616 '1b':1715 '1c':1748 '1d':1847 '1e':1929 '1fr':2444 '1x4':1479 '2':1271,1976,2489,2497,2660,2782,2799,2987,3200,3212 '2.5':1575 '2025':1915 '2563eb':1787 '2b':2413 '2x2':1440 '3':1292,1464,1554,1729,2616,2669,2810,3190,3211,3217 '3cm':1486 '4':1310,1445,2447,2680,2786,2818,2921,3227 '46':1442 '5':1324,2706,2836,3238 '50':1592 '55':1421 '5eead4':1781 '6':1346,2736 '7':1365,2752 '8':2768 '83':1582 '9':1912 '93c5fd':1791 'ablat':756 'absolut':934,2106 'absolute-posit':933 'abstract':27,118,121,412,677,781,786,852,857,924,1152,2643,2734,3306 'abstract/architecture':1242 'academ':322,1020,1126 'academic-look':321 'accent':1335,2153 'accept':520,2015 'accommod':2388 'accuraci':543,2647,3417 'across':563,2556 'action/alert':2155 'activ':1801,2542,2578,3147 'actual':1828,2572,3397 'adapt':1405 'add':1668,1867,1903,1969,2378,2981 'addit':2729 'adjac':139,307,427,805,835 'adjust':1070,1227,1707 'aesthet':2755,3346 'agenc':3195 'ai':498,508,516,528 'ai-gener':507 'align':608 'allow':2090,2365 'alongsid':2186 'also':443,599 'alway':575,2367,2924 'anchor':369,437,903,1006,2746,3337 'anim':2197 'anoth':2320 'anyth':1389 'api':1032,1163 'appear':1830,2574 'appli':2638 'architectur':73,126,233,418,693,797,880 'area':78,1277,2031 'arial':1374 'arrow':30,109,134,302,359,407,421,474,707,793,801,810,816,822,830,874,890,905,915,929,1002,1010,1213,1350,2737,2741,3335 'arrow-heavi':1001 'arrow-rout':473 'artistic/conceptual':523 'aspect':1266,1494,3207 'assembl':2180 'asset':1355,3261 'attempt':2996 'attribut':1906 'audit':2169 'author':3237 'auto':1120,2870 'auto-select':2869 'avail':2874 'b':183,2223 'background':1341,1865,1894,2085,2140,2286 'badg':1315 'bar':1201,1769,1802,1814,1829,1832,2094,2163,2185,2360,2453,2459,2499,2507,2533,2540,2573,3142 'bar/card':3398 'base':904,2102,2778,2999,3003 'bash':1154,2915 'begin':3030,3123 'besid':1426 'best':1071,1427,2873 'better':505,600 'bib':3233,3403 'block':1947,2475 'blurri':541 'bodi':382 'bold':2159 'border':1334,1808,1837,2152,2538,2576 'bordered-light':2537 'bottleneck':894 'bottom':1217,2548,3153 'bound':2913,2960,3014 'box':324,624,705,808,2135,2914,2961 'box-and-arrow':807 'box-shadow':2134 'box/text':896 'bp':2976,2983 'branch':2681,2703,3076,3081 'branch/mode':3392 'break':361,951,1270,2253 'brief':3049 'browser':573,637,973,1052,1235,2888,3017,3332 'browser-export':2887,3016 'budget':1384,1393,1574 'build':110,585,1646,1977 'bundl':2904 'button':1672,2051,2060,2803,3280 'c':184,1110,2235 'cairo':1109 'cairosvg':1105 'calibr':2514 'callout':2718,3379 'canva':25,145,467,1028,1031,1141,1159,1162,2220,2236,3315 'caption':2070,2400,2699,3044,3131,3386 'captur':36,113,355,636,1054,1145,1607,1653,1687,2059,2375,2391,2590,2592,2788,2791,2812,3333 'card':319,838,959,1340,1770,2138,2146,2156,2228,2239,3348 'case':1220,1279 'ccfbf1':1785 'center':3038,3126 'chang':327,551,617,2040 'chart':754 'checklist':2117,3248 'checkpoint':3157 'choos':1749,1930 'chrome':2083,2798 'ci':2,47 'ci-mockup-figur':1 'cite':3228,3407 'citizen':1643,1675 'citizen-fac':1642 'clear':292 'cli':1103 'click':2591,2800,2811 'climate/ocean':1884 'cm':1466 'codex':2619,2632,3413 'collabor':708 'collect':671 'collis':2310,2324 'color':350,625,634,1760,1836,2086,2149,2194,3141,3399 'color/font':342 'column':1422,1443,1463,1485,1511,2296,2437,2441,2465 'combin':3276 'comfort':1516 'common':2244 'communic':62,159,206,224 'compact':1448 'complex':1618 'compon':259,655,931,1204,1212,1249,1337,1349,1723,2560,2665 'conceiv':280 'concept':589 'conceptu':811 'connect':836,2742 'connector':1361 'consecut':2470 'consist':560,626,1014,1774 'consola':2026 'constant':1192 'contain':958,1985,2038,2111 'content':101,396,2912,2971,3013,3389 'context':995,996,1288 'continu':2474 'control':336,476,546 'convert':1096,2344 'coordin':340,1043,1228,1637,1674,2809 'coordinator-fac':1636 'copi':3303 'core':888 'corner':1918,2148 'correct':2744,3339 'cost':1413 'could':584 'cover':32,955 'coverag':2682 'cram':1625,2000 'creat':5 'credibl':228,276,1871,2126 'credit':1907 'critic':463,2182 'cross':107,364,405,433,791,1489,2519,2709,2725,3173 'cross-domain':1488,3172 'cross-nod':106,404,790 'cross-refer':2518,2708,2724 'cross-row':363 'css':315,328,345,552,609,627,826,912,940,1699,1775,1893,2004,2079,2103,2428,2432 'ctrl':2372,2593,2819 'ctx.filltext':1165 'ctx.lineto':1166 'ctx.roundrect':1164 'curv':432,757,800,928 'custom':1130 'd':185 'd2':1119 'dag':2098 'dark':2027,2551,2585 'dark-pil':2550 'dashboard':18,95,388,845,868,966,2754,3345 'dashboard/overview':1733 'data':201,209,261,542,670,695,775,1135,1885,1890,3181,3229,3408 'dataset':2649 'dbeaf':1795 'debug':333 'decid':295,1385,1390 'decor':984,1287,2728 'def':351 'default':1428,1525,2301,2972,3022 'defin':1941 'deliveri':2528 'demo':245,2561 'dens':59,2233 'departure/route':3083 'depend':81,128,415,795,877,1974,2481,2490 'depth':2132 'describ':651,3387 'descript':1320,3050 'design':35,66,208,225,274,1078,1133,1239,1388,1602,1613,2303,2430 'destin':2595 'detail':2128,2614 'detect':2962 'develop':2123 'diagnost':2651 'diagram':28,234,285,414,449,525,679,773,788,849,925,970,1138,1208,1252,1318,1472,2763 'diamond':2526,2582,3150 'differ':2131,2947 'differenti':685,2173,2662,3419 'direct':1038,1176 'discoveri':665,1357 'displac':168 'distinct':1759,2668 'document':219,381,650,719,1396,1549 'doe':240 'domain':1490,1852,1858,1870,2659,3174,3187 'dot':2195 'download':1919 'drag':615 'draw':1093,1199,1251 'drawarrow':1189 'drawimag':1190 'drawsvg':1085,1088 'drift':823,3343 'drop':2861 'duplic':2067,2404 'dynam':2095,2246 'e.g':662,1101,1354,1550,1673,1908,2021,2509,2689,2808,3072,3177,3209 'earth':1877,3215 'edg':878,1255,3341 'edit':483,616,1042,1160 'effect':250 'effici':8,56,731 'either':748 'element':829,1291,1312,2847 'em':3037,3090,3165 'emb':1848,1891 'embed':2003,2856 'emit':2323 'emoji':1382,3353 'emoji/icons':982 'end':2274,2564,2566,3091,3110,3166 'end-to-end':2563 'endpoint':906,2751,3336 'engin':668 'enough':1434 'ensur':3201 'entri':3234,3404 'environ':1084,1402,2309,3373 'equal':3224 'equal-height':3223 'especi':249 'etc':241,2568,3412 'evalu':271,676 'everi':149,544,623,2711,3384 'everyth':620 'everywher':1961 'exact':459 'exampl':1222,1282,1404 'expand':1701 'experiment':750 'explan':2227 'explicit':1360,2018,2306,2700,3391 'explod':957 'export':641,1041,1223,2889,3018 'extendscript':148,1063 'extens':2864 'extern':942,1100,1246,1973 'extract':673 'face':1638,1644 'factor':296 'fail':187,814,920 'fallback':2019 'faster':481 'featur':672,2044 'feder':3194 'feedback':2780 'feel':680,2727 'fidel':972 'fig':3086,3161 'fight':939 'figur':4,9,49,60,83,99,119,122,132,150,158,174,221,253,300,390,393,515,564,605,689,725,734,752,812,853,858,862,988,1073,1127,1153,1243,1264,1297,1392,1410,1451,1457,1482,1538,1556,1562,1566,1569,1573,1622,1630,1923,1989,2348,2416,2421,2606,2630,2707,2712,2716,2722,2757,2993,3120,3124,3167,3169,3176,3257,3264,3299,3307,3324,3330,3371,3377,3385,3402 'figure-src':1922,3256,3263,3323 'figure.pdf':1170,1175 'figure.png':1173 'figure.svg':1172 'figure/thrust1':3043 'figure/thrust1-trimmed.pdf':2923 'figure/thrust1.pdf':2922 'figure/thrust4-coord':2881 'figure/thrustn.pdf':2839 'figure/timeline':3130 'figure/timeline-trimmed.pdf':2918 'figure/timeline.pdf':2917 'file':1651,1987,1998,2426,2863,2934,2953,3269,3297,3376 'fill':1327,1846,2532 'filter':1900,2176 'final':1057 'first':1091,1386 'fit':954 'flat':320 'flexbox/grid':337 'flip':2241 'float':2328,2748 'flow':262,401,696,881,1256 'flowchart':74,236 'font':347,373,460,537,1380,1705,2008,2014,2075,2675,3364 'font/style':1013 'footer':1209 'forc':2087,2327 'format':1409,1600,2875 'four':3134 'four-year':3133 'frame':1206 'framework':413,787 'free':1019 'frequent':3011 'full':172,344,1460,1462,1484,1690,1712,1736,2295,2338,2609,2893,2939,3118 'full-pag':2892,2938 'full-width':171,1459,1711,2608,3117 'gantt':2415 'gantt/timeline':389,604 'gap':1197 'garbl':539 'gen_overview.mjs':1185 'generat':500,509,518,530,566,1065,3309 'generate-figure.mjs':1161,1168 'generic':681 'geograph':1868 'georgia':1377,2022 'get':486,1049,1230,1724 'ghostscript':2958 'give':1432,2292 'glow':2175 'goal':42,52 'gold':1021 'googl':2013 'gradient':317,2143 'graph':197,1356,2097,2247 'graphviz':1128 'grid':610,839,960,1441,1449,2429,2433,2439,2464 'grid-column':2463 'grid-template-column':2438 'ground':1276 'guidanc':3084 'h':1194 'half':176 'hallucin':547 'hand':1059,1069 'hand-adjust':1068 'hand-polish':1058 'handl':440,1009 'handoff':1216,1353 'header':1200,1968 'headless':1036 'heavi':1003 'height':1467,1487,2381,2386,3221,3225 'helper':1186 'hero':945,2276 'hide':2061,2082,2394,2814 'hierarchi':2158 'hope':559 'horizont':1293,1585,2055,2304 'hover':1821 'html':14,85,112,281,286,309,384,495,501,526,591,597,606,785,1034,1149,1650,1953,1986,2396,2425,2641,2787,3249,3252,3268 'html/css':813,882,922 'hv':2695,3079 'hv-own':2694,3078 'i.e':871 'icon':1931,1939,1942,1965 'ident':1754 'identifi':1716 'illustr':147,1062,1080,3321 'imag':499,510,517,529,946,1273,1446,2277,3192,3203 'imageri':1853,1860,1881,1909,2858 'immedi':2315 'imper':1092 'implement':2623 'implement-review':2622 'inch':163 'includ':2046 'includegraph':1178,2866,2877,2955,3039,3127 'increas':2384 'indic':2183,2193 'info':2216,2232 'info-dens':2231 'inform':45,58 'information-dens':57 'inher':398 'inkscap':1102 'inlin':448,1963 'insert':39,115,1659,2604,2790,3021 'insid':453 'instal':1087,1156 'instant':985,1233 'instead':767,783,2290 'institut':3236 'integr':2283,2544,2588,3139,3156 'inter':1211,1348 'inter-compon':1210,1347 'interact':111,192,352,711,2219 'interest':2213 'interfac':1619,1627,1747,3284 'intern':1207 'isc':1934 'iter':325,482,549,716,1024,2777 'jan':1913 'javascript':2006 'js':819 'js-posit':818 'jsx':1064,3319 'keep':2925 'kept':3301 'key':2043,2178,2635 'l':430 'l-shape':429 'label':202,619,702,1215,1352,2164,2361,2508,2701,3085,3160,3393 'landsat':1911 'landscap':1308,1469,1599,2088,2600,2824,3293 'landscape-format':1598 'larg':1540,2275 'later':2949 'latex':38,117,332,377,455,764,999,1401,1667,2069,2259,2322,2399,2868,2876,2901,3020,3029,3122 'layer':664,2139 'layout':335,840,913,941,961,981,1121,1191,1294,1586,1714,2035,2204,2208,2305,2451,2599 'learn':1497 'least':2336 'leav':1581 'left':1302,2151,2218,2226,2237,3057 'left-bord':2150 'left-to-right':1301 'legend':1772,1823,1842,2569,3394 'legibl':532,2077,2670,3418 'lesson':1496 'librari':1111,1940 'licens':1935 'light':1325,1767,1784,1794,1798,1834,2029,2539,2575 'like':580,587,2122 'limit':348,723,1129,1548 'line':1323,2380,3101 'line-height':2379 'linear':2142 'linear-gradi':2141 'live':452,2199,2907 'local':1920 'long':2269 'look':323,579,586,989,1077,2121,2667 'low':1863,2288 'low-opac':1862 'lucid':1933 'm':2467 'm1':2559,3158 'm2':2562 'm4':3159 'made':1261 'main':1555,2030 'major':1720 'make':986,2129 'mandatori':1588 'manual':339,614,633 'margin':645,2601,2826,2884,2896,2920,2948,2978 'mark':3151 'marker':2554,2584 'match':374,379,461,635,1454,1826,2571,3396 'matched-ratio':1453 'math':341 'matplotlib':760,1132 'maxim':44 'media':2080 'metadata':3002 'metadata-bas':3001 'method':68,231,514,698,3010 'methodolog':227,268,661 'metric':2167,2187 'mid':1766,1780,1790,1817 'mileston':2525,2535,2553,2581,3152 'milestone/completion':1813 'minim':76,1311 'misalign':825,2750 'misc':3232 'misdetect':3012 'mjs':484,1045,3311 'mockup':3,15,48,86,94,282,310,387,496,502,527,592,867,1431,1474,1532,1604,1615,1979,1992,2119,2796,3250,3253,3272 'mode':356,1694,2058,2282,2392,2688,3066,3069 'model':210,674 'modern':314 'monospac':2165 'motiv':1450,1491,1568,3168,3175 'multi':258,654,659,948,3283 'multi-compon':257,653 'multi-interfac':3282 'multi-panel':947 'multi-step':658 'multipl':1523,1626,2455,2687,3065,3183 'must':151,422,451,1825,2302,2364,2570,2713 'n':2466,2979,2982 'name':2650 'narrow':1514 'nasa':1876,3196,3214,3410 'nasa/usgs':1910 'nation':3185 'national-prior':3184 'nativ':372,442,1012 'natur':402 'need':133,222,254,301,408,471,690,709,726,736,873,1025,1061,1075,1107,1181,1757,2260,2612,3334 'never':1378,2271,2311,3106 'new':1231 'nih':239 'noaa':1882,3197 'node':108,140,198,308,367,368,406,428,436,792,806,876,902,1005,1047,1167,1254,2109,2179,2248,2745,3340 'node-anchor-bas':901 'node.east':439,1008 'node.js':468,1029 'node.south':438,1007 'non':138,306,426,804,979 'non-adjac':137,305,425,803 'non-pag':978 'none':2602 'nowrap':2355,2377 'npm':1155 'nsf':238 'number':2161,2191,2505 'number/label':545 'object':953 'object-fit':952 'observatori':1878,3216 'offlin':1927,2011 'often':538,643 'one':618,629,1317,1321,1629,1649,1738,2002,2337,2345,2458 'opac':1864,1896,2289 'open':2794,3244 'orient':2089,3294 'origin':2927,3300 'output':1098,1169,1322,2494,2770,2772,2829,3247,3327 'overlay':937 'overview':50,127,232,419,524,743,798,1471,1565 'overwhelm':1873 'own':2696,3080 'p':2373,2594,2820 'pad':2973 'page':77,178,722,980,1547,1552,1560,1571,1576,1601,2894,2940 'page-limit':1546 'palett':562,1761 'panel':949,1195,1205,1250,1314,1456,1967,2217,2285,3060,3241 'paper':11,230,1000,1017 'paragraph':1524,2270,2339,3098,3245 'parallel':1144 'pass':152,203,3415 'path':80,87,120,749,782,1146,2644,2735,3251,3308,3366 'pattern':1184,2205 'pdf':487,571,639,642,1050,1095,1224,1232,2598,2823,2843 'pdf/svg':1039,2771,3328 'pdfcrop':1056,1180,2886,2903,2916,2919,2956,3305 'pdfs':2890,3019 'per':46,161,1313,1336,1740,1751,1988,2202,2460,3145 'per-thrust':1750,2201,3144 'percentag':2101 'percentage-bas':2100 'perfect':378,535,613 'pgfplot':765 'phase':88,1611,1975,2412,2452,2471,2543,2615,2785 'pill':2552,2586 'pills/chips':1345,3351 'pip':1086 'pipelin':70,235,678,699,1296,1737,2567 'pitfal':2245 'pixel':534,612,2107,2998 'pixel-bas':2997 'pixel-perfect':533,611 'place':2266,2312,3093,3107 'plan':740,2419,3137 'plausibl':2655 'play':1379,3363 'plot':753,762,1136 'png':1225,2835,2841 'png/pdf':3296 'point':2181,2529,2637,2731 'polish':313,1060,1970,2116 'posit':334,820,916,935,1196,2104,2249,2331 'powerpoint':594,607 'pptx':602 'precis':1125 'prefer':383,409,444,464,2009,2842 'preserv':2084,2936 'preview':1226,2371,3287 'primari':41 'principl':1240,2431 'print':568,574,638,971,974,1237,2078,2081,2114,2255,2359,2370,2672,3286 'print/screenshot':2042 'prioriti':3186 'problem':889,926 'product':844,965,1886,2766,3409 'profession':1366,2034,3354 'programmat':1023,1066,1253 'progress':2184 'project':742 'prompt':557 'proper':2171 'proport':1708 'propos':13,237,1553,2992 'prose':1433,1520,2721,3246,3382 'prototyp':193,2124 'provid':494,2401,3082 'pseudo':828 'pseudo-el':827 'public':1851,1857 'public-domain':1850,1856 'puls':2196 'px':2251 'pymupdf':3006 'python':759,1082 'python-on':1081 'q1':2486 'q2':2501 'q3':2503 'qualiti':569 'quarter':2436,2450,2456,2461,2536,3149 'quarter-column':2435 'quirk':1238 'r':1418,1437,3032 'rank':993 'raster':576,2776,2860,2970 'ratio':1267,1455,1495,3208 'raw':2118 're':556,2944 're-prompt':555 're-trim':2943 'react':713 'read':841,962,1517,2759 'real':200,536,701,1272,1849,1855 'recommend':991,1118 'recompil':331 'rectangular':103,399 'ref':2717,3378 'refer':2520,2710,2726,3239 'referenc':1957,3056 'reflow':621 'refresh':330,554 'relev':1663 'reli':910 'reliabl':1928,2012,2965 'remain':1509 'remov':2376 'render':897,2096 'repeat':2442 'report':243 'reposit':622 'represent':663 'requir':932,1079,1981 'rerun':1229 'rescal':975 'research':229,848,969,2762 'resiz':2112 'respons':338,2036 'result':196,751,2225 'review':270,577,2516,2617,2624,2634,2636,2730,3414 'rgba':1328 'ribbon':1283 'richer':489 'right':1304,2221,2229,2240,3059 'room':1435 'round':318,2147,2784 'roundrect':1187 'rout':31,135,303,360,423,475,794,817,891,1011,2738 'row':365,434,1480,2385,2545,3154 'rule':1542 'run':485,1046,1221,1281 'san':1370,3358 'sans-serif':1369,3357 'satellit':2857 'satellite/geoscience':1880 'satur':1339,1901 'save':2054,2596,2603,2821,2837 'say':181 'scale':1703,2073 'schemat':1875 'scientif':1859,2646,3416 'screenshot':114,943,950,1247,1258,1590,1657,2057,2297,2408,2833,3054,3295 'script':1182,3310 'script.mjs':1048 'seaborn':761 'search':195,2224 'section':124,855,2273,3113 'sego':1372 'select':34,2871 'self':1984 'self-contain':1983 'send':2627 'separ':375,1621,1656,1997,2332,2932,3267 'serif':1371,1376,3359,3361 'servic':666 'sfire':2513 'shadow':316,1343,2136,3349 'shape':431 'sharp':2850 'short':1319 'show':190,256,692,1734,1742,1838,2480,3055,3143,3155 'shown':2705,3071 'side':2986 'sidebar':1702,2028,2053 'similar':1937,2033,3008 'simpl':834,1537 'simultan':213 'singl':1982,2473 'size':1198,2039,2673 'sketch':590 'skia':24,144,466,1027,1140,1158,3314 'skia-canva':23,143,465,1026,1139,1157,3313 'skill':215,769,2625 'skill-ci-mockup-figure' 'small':447,1476,1905 'solid':1765,1806,1810,1845,2531,2579 'solid-fil':2530 'solid-ton':1805 'solv':370 'someth':710 'sourc':456,630,2941,3189,3230 'source-yzhao062' 'space':7,55,154,730,1383,1412,1563,1595,2056,2072,2279,2354,2411,2899 'space-effici':6,54,729 'span':2454,2469,2555,3182 'spare':1819 'spatio':3179 'spatio-tempor':3178 'specif':1746 'speed':326,550 'split':1617 'sprite':1946 'squar':162 'src':1924,3258,3265,3325 'stack':1306,2020 'stage':1257,2629 'stagger':2476 'standalon':2424 'standard':1022 'start':1610,2477,2485,2495 'state':1822,3067 'static':357 'status':2192,2200 'stay':2848,2859 'step':265,267,660,2654 'step-by-step':264 'strength':293 'strict':504 'strip':1218,1280 'structur':260,694,1183,1290 'struggl':918 'style':491,1131 'subfloat':1478,3219 'subtask':1664,2160,2504 'subtl':2133 'surfac':2145 'surviv':2110,2676 'svg':821,936,1090,1099,1938,1945,1964,2174,2846 'svg-first':1089 'swatch':1824,3395 'switch':354,1671,2048,3279 'system':17,64,207,386,512,582,656,1368,1430,1531,1633,1991,2007,2024,2685,3063,3271,3285,3356 'system-ui':2023 'system/method':772 't1':1298,1776,1779,1783 't1-light':1782 't1-mid':1778 't2':1299,1786,1789,1793 't2-light':1792 't2-mid':1788 't3':1300 'tabl':755,1398,2350 'tag':2363 'take':175,2831 'target':1408,2658,2806 'technic':242,1980 'templat':2440 'tempor':3180 'terrain/hazard':1889 'test':155,2368,3288 'tex':2906,3316,3375 'text':166,531,1188,1424,1477,1510,1541,1584,2091,2261,2342,2357,2390,2524,2844,3103,3289 'textbf':3045,3132 'textwidth':1420,1439,1499,1529,2679,2880,3028,3034,3042,3129 'thick':1331 'three':1763 'thrust':1721,1741,1744,1752,1756,2203,2210,2214,2222,2234,2484,2488,2492,2496,2523,2558,2807,3046,3146 'thrust1':3087 'thumb':1544 'thumbnail':1203 'tighten':2071 'tikz':21,142,288,311,410,435,445,478,493,766,1004,3318 'tikz/latex':284 'tile':3226 'time':2478 'timelin':20,96,596,870,1470,1994,2238,2414,2420,2589,2611,3115,3140,3162,3274 'timeline/gantt':733 'tint':1326 'titl':1202,1316,2065,2403,2817,3048 'title/header':2397 'toggl':1684 'tone':1764,1799,1807,1811,1818 'tool':33,886,899,909,992,997 'toolbar':1679,2050,2062,2815 'toolchain':123,854,859 'top':1333,1950 'top-bord':1332 'topic-agent-config' 'topic-agent-skills' 'topic-agents-md' 'topic-ai-agents' 'topic-ai-safety' 'topic-claude-code' 'topic-code-review' 'topic-codex' 'topic-dual-agent-review' 'topic-git-safety' 'topic-npm' 'topic-opinionated' 'topolog':129,416,796 'total':1572 'trace':1358 'trail':2170 'train':675 'tricki':1114 'trim':2882,2909,2933,2945,2952,3004,3302 'truncat':2356,3292 'trust':578 'truth':632 'two':79 'type':84,1411,1990 'typic':1728,2781,2990 'typographi':1367,2157,3355 'ui':93,866,1373,2025,2767 'undermin':2125 'unpredict':976,1123 'unprofession':990 'unwrap':2341 'usda':3199 'use':141,648,747,758,779,850,1174,1219,1278,1400,1416,1533,1796,1854,1932,1960,2099,2256,2422,2462,2620,2902,2950,2957,2977,3116,3218,3235 'user':1682 'usg':1887,3198,3411 'ux':212 'valu':548,2188,2252 'vari':567,2206 'variabl':628 'varieti':343 'vector':570,640,1040,1171,2769,2774,2828,2849,2968,3326 'vehicl':2692,3075 'verbos':349 'vertic':1305,2299,2410 'vertical/portrait':1589 'via':572,1962,2049,3304 'view':353,1639,1645,1670,1685,1693,1718,1727,1731,1739,2047,2666,2802,3278 'view-switch':1669,3277 'visibl':3388 'visual':312,490,776,1753,2115,2212,2661 'vs':283,497,593,2693,3273 'vspace':3035,3088,3163 'w':1193 'want':480 'warn':2325 'wast':1307,1591,2278,2409,2898 'web':346 'weight':2172 'well':279 'well-conceiv':278 'whether':272,298 'white':2353,2883,2895 'white-spac':2352 'whitespac':1364 'wide':1502,1606,2281 'width':173,1309,1423,1444,1461,1691,1713,2610,2878,3040,3119,3128 'window':1116 'without':1872,2723 'work':216,687,739,831,907,2418,3136 'workflow':667,1142,1150,2653,2792 'wrap':1425,1521,2092,2265,2308,2366,2389,3290 'wrap-environ':2307 'wrapfigur':189,1417,1436,1505,1558,2257,2314,2321,3024,3031,3092,3095,3367 'wraptabl':2318 'wrf':2512 'wrf-sfire':2511 'write':2929 'writeup':246 'wrong':644,885 'year':2448,3135 'zero':1972,2691,3074 'zero-vehicl':2690,3073 'zoom':2853","prices":[{"id":"c979fd8a-0412-426f-aa2d-aeb4b640b8f7","listingId":"6003713d-36d8-40e9-9703-a8908ef9548c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"yzhao062","category":"anywhere-agents","install_from":"skills.sh"},"createdAt":"2026-04-18T22:16:06.847Z"}],"sources":[{"listingId":"6003713d-36d8-40e9-9703-a8908ef9548c","source":"github","sourceId":"yzhao062/anywhere-agents/ci-mockup-figure","sourceUrl":"https://github.com/yzhao062/anywhere-agents/tree/main/skills/ci-mockup-figure","isPrimary":false,"firstSeenAt":"2026-04-18T22:16:06.847Z","lastSeenAt":"2026-05-02T06:54:58.897Z"}],"details":{"listingId":"6003713d-36d8-40e9-9703-a8908ef9548c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"yzhao062","slug":"ci-mockup-figure","github":{"repo":"yzhao062/anywhere-agents","stars":165,"topics":["agent-config","agent-skills","agents-md","ai-agents","ai-safety","claude-code","code-review","codex","dual-agent-review","git-safety","npm","opinionated","portable-config","pypi","safety-hooks","shared-configuration","skill-dispatch","skill-router"],"license":"apache-2.0","html_url":"https://github.com/yzhao062/anywhere-agents","pushed_at":"2026-05-01T06:48:52Z","description":"One config to rule all your AI agents: portable (every project, every session), effective (curated writing, routing, skills), and safer (destructive-command guard).","skill_md_sha":"6e1b60ab844f546cce836ca19d7a7a7e8439e2f7","skill_md_path":"skills/ci-mockup-figure/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/yzhao062/anywhere-agents/tree/main/skills/ci-mockup-figure"},"layout":"multi","source":"github","category":"anywhere-agents","frontmatter":{"name":"ci-mockup-figure","description":"Create space-efficient figures for papers and proposals. HTML mockups for systems, dashboards, and timelines; TikZ or skia-canvas for abstract diagrams with arrow routing. Covers tool selection, design, capture, and LaTeX insertion. The primary goal is maximizing information per page — every figure must earn its space."},"skills_sh_url":"https://skills.sh/yzhao062/anywhere-agents/ci-mockup-figure"},"updatedAt":"2026-05-02T06:54:58.897Z"}}