DiscordSign up
SKILLS.SH

infographic

Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels,…

INSTALLATION
npx skills add https://github.com/markdown-viewer/skills --skill infographic
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Infographic Visualizer

⚠️ CHECK TEMPLATES: Wrong template names WILL cause render failures.

When to Use & Available Templates

✅ Use infographic when:

  • Feature list / checklist: list-grid-badge-card, list-grid-candy-card-lite, list-grid-ribbon-card, list-column-done-list, list-column-vertical-icon-arrow, list-column-simple-vertical-arrow, list-row-horizontal-icon-arrow, list-row-simple-illus, list-sector-plain-text, list-zigzag-down-compact-card, list-zigzag-down-simple, list-zigzag-up-compact-card, list-zigzag-up-simple
  • Timeline / milestones: sequence-timeline-simple, sequence-timeline-rounded-rect-node, sequence-timeline-simple-illus
  • Step-by-step process: sequence-snake-steps-simple, sequence-snake-steps-compact-card, sequence-snake-steps-underline-text, sequence-stairs-front-compact-card, sequence-stairs-front-pill-badge, sequence-ascending-steps, sequence-ascending-stairs-3d-underline-text, sequence-circular-simple, sequence-pyramid-simple, sequence-mountain-underline-text, sequence-cylinders-3d-simple, sequence-zigzag-steps-underline-text, sequence-zigzag-pucks-3d-simple, sequence-horizontal-zigzag-underline-text, sequence-horizontal-zigzag-simple-illus, sequence-color-snake-steps-horizontal-icon-line
  • Product roadmap: sequence-roadmap-vertical-simple, sequence-roadmap-vertical-plain-text
  • Funnel / conversion: sequence-filter-mesh-simple, sequence-funnel-simple
  • A vs B comparison: compare-binary-horizontal-underline-text-vs, compare-binary-horizontal-simple-fold, compare-binary-horizontal-badge-card-arrow, compare-hierarchy-left-right-circle-node-pill-badge
  • SWOT analysis: compare-swot
  • Priority matrix 2×2: quadrant-quarter-simple-card, quadrant-quarter-circular, quadrant-simple-illus
  • Org tree / hierarchy: hierarchy-tree-tech-style-capsule-item, hierarchy-tree-curved-line-rounded-rect-node, hierarchy-tree-tech-style-badge-card, hierarchy-structure
  • Pie / donut chart: chart-pie-plain-text, chart-pie-compact-card, chart-pie-donut-plain-text, chart-pie-donut-pill-badge
  • Bar / column chart: chart-bar-plain-text, chart-column-simple, chart-line-plain-text
  • Word cloud: chart-wordcloud
  • Relation / circle: relation-circle-icon-badge, relation-circle-circular-progress

Syntax Structure

infographic <template-name>

data

  title Title

  desc Description

  items

    - label Label

      value 12.5

      desc Explanation

      icon mdi/rocket-launch

theme

  palette #3b82f6 #8b5cf6 #f97316

Rules: First line infographic <template-name> (must match template list) | 2-space indentation | key value pairs (space-separated, NOT key: value) | - prefix for arrays | Compare templates need exactly 2 root items with children | SWOT needs exactly 4 items (Strengths/Weaknesses/Opportunities/Threats in English) | Quadrant needs exactly 4 items with children | list templates use desc not value | hierarchy-structure max 3 levels | Use desc not description | Use items not steps

⚠️ Common Mistakes (will cause render failure)

❌ WRONG — Do NOT use YAML colon syntax:

template: list-grid-badge-card     ← wrong! no "template:" key

title: My Title                    ← wrong! colons are not allowed

items:                             ← wrong! no colon after items

  - label: Item One                ← wrong! no colon after label

    description: Some text         ← wrong! field is "desc" not "description"

    value: "100"                   ← wrong! no colon, and value must be numeric

steps:                             ← wrong! field is "items" not "steps"

left:                              ← wrong! compare uses 2 root items + children

  label: Option A                  ← wrong! compare structure is flat items

quadrants:                         ← wrong! quadrant uses 4 items + children

✅ CORRECT — Space-separated key-value, 2-space indent:

infographic list-grid-badge-card

data

  title My Title

  items

    - label Item One

      desc Some text

      value 100

Data Fields

Field

Description

Example

label

Item title/name (required)

label Q1 Sales

desc

Description text

desc $1.28B | +20%

value

Numeric value (charts/funnels only)

value 128

time

Time label (timeline templates only)

time Q1 2024

icon

Icon: mdi/icon-name (Iconify)

icon mdi/star

illus

Illustration name (unDraw)

illus coding

children

Nested items (hierarchy/compare)

See examples

done

Completion status (checklist)

done true

Core Examples

Feature Grid (list-grid-badge-card)

infographic list-grid-badge-card

data

  title Key Metrics

  desc Annual performance overview

  items

    - label Total Revenue

      desc $1.28B | YoY +23.5%

    - label New Customers

      desc 3280 | YoY +45%

    - label Satisfaction

      desc 94.6% | Industry leading

    - label Market Share

      desc 18.5% | Rank #2

Timeline (sequence-timeline-simple)

Timeline items use time for the time label and label for the milestone name.

infographic sequence-timeline-simple

data

  title Product Roadmap

  items

    - label Research

      time Q1 2024

      desc Research phase

    - label Design

      time Q2 2024

      desc Design phase

    - label Development

      time Q3 2024

      desc Development

    - label Launch

      time Q4 2024

      desc Launch

Funnel Chart (sequence-filter-mesh-simple)

infographic sequence-filter-mesh-simple

data

  title Sales Funnel

  items

    - label Leads

      value 10000

      desc Market leads

    - label Qualified

      value 2500

      desc 25% conversion

    - label Proposals

      value 800

      desc 32% conversion

    - label Closed

      value 328

      desc 41% conversion

Checklist (list-column-done-list)

infographic list-column-done-list

data

  title Launch Checklist

  items

    - label Code review completed

      done true

    - label Tests passing

      done true

    - label Documentation updated

      done false

    - label Deploy to production

      done false

A vs B Comparison (compare-binary-horizontal-underline-text-vs)

infographic compare-binary-horizontal-underline-text-vs

data

  title Cloud vs On-Premise

  items

    - label Cloud

      children

        - label Scalable on demand

        - label Pay as you go

    - label On-Premise

      children

        - label Full control

        - label One-time cost

SWOT Analysis (compare-swot)

Must have exactly 4 items with English labels: Strengths, Weaknesses, Opportunities, Threats

infographic compare-swot

data

  title Strategic Analysis

  items

    - label Strengths

      children

        - label Strong R&#x26;D

        - label Complete supply chain

    - label Weaknesses

      children

        - label Limited brand awareness

        - label High costs

    - label Opportunities

      children

        - label Digital transformation

        - label Emerging markets

    - label Threats

      children

        - label Intense competition

        - label Market changes

Pie/Donut Chart (chart-pie-donut-plain-text)

infographic chart-pie-donut-plain-text

data

  title Revenue by Product

  items

    - label Enterprise Software

      value 42

    - label Cloud Services

      value 28

    - label Hardware

      value 18

    - label Services

      value 12

Organization Tree (hierarchy-tree-tech-style-capsule-item)

infographic hierarchy-tree-tech-style-capsule-item

data

  title Organization Structure

  items

    - label CEO

      children

        - label VP Engineering

          children

            - label Frontend Team

            - label Backend Team

        - label VP Product

          children

            - label Design

            - label Research

Priority Matrix (quadrant-quarter-simple-card)

Quadrant templates need exactly 4 root items, each with children. The 4 items represent the four quadrants.

infographic quadrant-quarter-simple-card

data

  title Priority Matrix

  items

    - label Do First

      desc Urgent &#x26; Important

      children

        - label Critical bugs

        - label Client deadlines

    - label Schedule

      desc Not Urgent &#x26; Important

      children

        - label Planning

        - label Training

    - label Delegate

      desc Urgent &#x26; Not Important

      children

        - label Meetings

        - label Some emails

    - label Eliminate

      desc Not Urgent &#x26; Not Important

      children

        - label Time wasters

        - label Busy work

Output Format

infographic <template-name>

data

title Your Title

items

- label Item 1

desc Description here

Theme (optional)

Add a theme block as a top-level sibling of data (not nested inside data):

# Preset theme (single line)

theme dark

# Custom palette

infographic list-grid-badge-card

theme

  palette #3b82f6 #8b5cf6 #f97316

data

  title My Title

  items

    - label Item 1

Available presets: dark, hand-drawn

Related Files

For detailed syntax, templates, and examples, refer to references below:

  • syntax.md — Complete syntax specification and rules
  • templates.md — All available templates with descriptions
  • examples.md — Full examples for each template category

Resources

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card