api-and-interface-desi…
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints,…
Infographics: 21 layouts x 21 styles (信息图, 可视化).
$ npx -y skills add kevinnft/ai-agent-skills --skill baoyu-infographic --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/baoyu-infographicContext preview
The summary Claude sees to decide when to auto-load this skill.
Infographics: 21 layouts x 21 styles (信息图, 可视化).
name: baoyu-infographic
description: "Infographics: 21 layouts x 21 styles (信息图, 可视化)."
version: 1.56.1
author: 宝玉 (JimLiu)
license: MIT
metadata:
hermes:
tags: [infographic, visual-summary, creative, image-generation]
homepage: https://github.com/JimLiu/baoyu-skills#baoyu-infographic
origin: aggregated
source_license: see upstream
source_repo: JimLiu/baoyu-skills
source_url: https://github.com/JimLiu/baoyu-skills/tree/main/skills/creative/baoyu-infographic
language: zhAdapted from [baoyu-infographic](https://github.com/JimLiu/baoyu-skills) for Hermes Agent's tool ecosystem.
Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
Trigger this skill when the user asks to create an infographic, visual summary, information graphic, or uses terms like "信息图", "可视化", or "高密度信息大图". The user provides content (text, file path, URL, or topic) and optionally specifies layout, style, aspect ratio, or language.
| Option | Values | |--------|--------| | Layout | 21 options (see Layout Gallery), default: bento-grid | | Style | 21 options (see Style Gallery), default: craft-handmade | | Aspect | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) | | Language | en, zh, ja, etc. |
| Layout | Best For | |--------|----------| | `linear-progression` | Timelines, processes, tutorials | | `binary-comparison` | A vs B, before-after, pros-cons | | `comparison-matrix` | Multi-factor comparisons | | `hierarchical-layers` | Pyramids, priority levels | | `tree-branching` | Categories, taxonomies | | `hub-spoke` | Central concept with related items | | `structural-breakdown` | Exploded views, cross-sections | | `bento-grid` | Multiple topics, overview (default) | | `iceberg` | Surface vs hidden aspects | | `bridge` | Problem-solution | | `funnel` | Conversion, filtering | | `isometric-map` | Spatial relationships | | `dashboard` | Metrics, KPIs | | `periodic-table` | Categorized collections | | `comic-strip` | Narratives, sequences | | `story-mountain` | Plot structure, tension arcs | | `jigsaw` | Interconnected parts | | `venn-diagram` | Overlapping concepts | | `winding-roadmap` | Journey, milestones | | `circular-flow` | Cycles, recurring processes | | `dense-modules` | High-density modules, data-rich guides |
Full definitions: `references/layouts/<layout>.md`
| Style | Description | |-------|-------------| | `craft-handmade` | Hand-drawn, paper craft (default) | | `claymation` | 3D clay figures, stop-motion | | `kawaii` | Japanese cute, pastels | | `storybook-watercolor` | Soft painted, whimsical | | `chalkboard` | Chalk on black board | | `cyberpunk-neon` | Neon glow, futuristic | | `bold-graphic` | Comic style, halftone | | `aged-academia` | Vintage science, sepia | | `corporate-memphis` | Flat vector, vibrant | | `technical-schematic` | Blueprint, engineering | | `origami` | Folded paper, geometric | | `pixel-art` | Retro 8-bit | | `ui-wireframe` | Grayscale interface mockup | | `subway-map` | Transit diagram | | `ikea-manual` | Minimal line art | | `knolling` | Organized flat-lay | | `lego-brick` | Toy brick construction | | `pop-laboratory` | Blueprint grid, coordinate markers, lab precision | | `morandi-journal` | Hand-drawn doodle, warm Morandi tones | | `retro-pop-grid` | 1970s retro pop art, Swiss grid, thick outlines | | `hand-drawn-edu` | Macaron pastels, hand-drawn wobble, stick figures |
Full definitions: `references/styles/<style>.md`
| Content Type | Layout + Style | |--------------|----------------| | Timeline/History | `linear-progression` + `craft-handmade` | | Step-by-step | `linear-progression` + `ikea-manual` | | A vs B | `binary-comparison` + `corporate-memphis` | | Hierarchy | `hierarchical-layers` + `craft-handmade` | | Overlap | `venn-diagram` + `craft-handmade` | | Conversion | `funnel` + `corporate-memphis` | | Cycles | `circular-flow` + `craft-handmade` | | Technical | `structural-breakdown` + `technical-schematic` | | Metrics | `dashboard` + `corporate-memphis` | | Educational | `bento-grid` + `chalkboard` | | Journey | `winding-roadmap` + `storybook-watercolor` | | Categories | `periodic-table` + `bold-graphic` | | Product Guide | `dense-modules` + `morandi-journal` | | Technical Guide | `dense-modules` + `pop-laboratory` | | Trendy Guide | `dense-modules` + `retro-pop-grid` | | Educational Diagram | `hub-spoke` + `hand-drawn-edu` | | Process Tutorial | `linear-progression` + `hand-drawn-edu` |
Default: `bento-grid` + `craft-handmade`
When user input contains these keywords, **auto-select** the associated layout and offer associated styles as top recommendations in Step 3. Skip content-based layout inference for matched keywords.
If a shortcut has **Prompt Notes**, append them to the generated prompt (Step 5) as additional style instructions.
| User Keyword | Layout | Recommended Styles | Default Aspect | Prompt Notes | |--------------|--------|--------------------|----------------|--------------| | 高密度信息大图 / high-density-info | `dense-modules` | `morandi-journal`, `pop-laboratory`, `retro-pop-grid` | portrait | — | | 信息图 / infographic | `bento-grid` | `craft-handmade` | landscape | Minimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only. |
infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.pngSlug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
191 attribution-first agent skills for Hermes Agent, Claude Code, Cursor — one installer, 28 categories, searchable catalog. See NOTICE for upstream attribution.
Repo: kevinnft/ai-agent-skills
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints,…
Tests in real browsers. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze…
Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test…
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to…
Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend…
Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure…