hermes-agent/skills/creative/baoyu-infographic/references/layouts/bento-grid.md
Teknium 65c0a30a77 feat(skills): add baoyu-infographic skill — 21 layouts × 21 styles
Port of baoyu-infographic from JimLiu/baoyu-skills (v1.56.1) adapted
for Hermes Agent's tool ecosystem.

Adaptations from upstream:
- Frontmatter: openclaw metadata → hermes metadata
- Usage: slash command syntax → natural language triggers
- Removed EXTEND.md config system (not part of Hermes infrastructure)
- AskUserQuestion → clarify tool (one question at a time)
- Image generation → image_generate tool
- Removed Windows-specific paths
- Simplified file operations to use Hermes file tools
- All 45 reference files (layouts, styles, templates) preserved intact

Attribution preserved per agreement with 宝玉 (Jim Liu):
- author, version, GitHub homepage URL in frontmatter

Co-authored-by: Jim Liu 宝玉 <junminliu@gmail.com>
2026-04-18 12:32:16 -07:00

851 B

bento-grid

Modular grid layout with varied cell sizes, like a bento box.

Structure

  • Grid of rectangular cells
  • Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
  • No strict symmetry required
  • Hero cell for main point
  • Supporting cells around it

Best For

  • Multiple topic overview
  • Feature highlights
  • Dashboard summaries
  • Portfolio displays
  • Mixed content types

Visual Elements

  • Clear cell boundaries
  • Varied cell backgrounds
  • Icons or illustrations per cell
  • Consistent padding/margins
  • Visual hierarchy through size

Text Placement

  • Main title at top
  • Cell titles within each cell
  • Brief content per cell
  • Minimal text, maximum visual
  • CTA or summary in prominent cell
  • craft-handmade: Friendly overviews (default)
  • corporate-memphis: Business summaries
  • pixel-art: Retro feature grids